Saved Cards Integration

Overview

The Saved Cards functionality of Paysafe.js allows the customers to complete their payments faster using a saved card from their customer profile.

Saving a card to the Customer profile

After successfully issuing a single-use payment handle for card payment method from Paysafe.js, the merchant has the ability to add it to a customer profile based on the customer intentions.

Setup Paysafe.js with optional fields

Paysafe.js needs to be setup with optional Card Number and Expiry Date, additionally the merchant needs to hide the field containers in their website. Based on the merchant intentions the CVV field can be set to optional, if needed.

If the customer wishes to pay with a new card, the merchant can start visualizing the Card Number and Expiry Date. They will become required if the singleUseCustomerToken and paymentTokenFrom are not passed on tokenize function call.

<html>
  ...
  <body>
    <div hidden id="cardNumber"></div>
    <div hidden id="expiryDate"></div>
    <div id="cvv"></div>
    <script>
      paysafe.fields.setup("my API key", {
        fields: {
          cardNumber: {
            selector: "#cardNumber",
            optional: true
          },
          expiryDate: {
            selector: "#expiryDate",
            optional: true
          }
          cvv: {
            selector: "#cvv"
          }
        }
      }, function (instance, error) {...});
    </script>
  </body>
</html>

Tokenize with saved card

If the customer has already a profile created in Payments API, and there are cards associated with this profile, the merchant can now instruct Paysafe.js to perform a tokenization for a selected saved card by passing a single-use customer token and single-use payment handle to the tokenize function. Single-Use Customer Token is a temporary token representing the profile of the customer. The main purpose of the single-use customer token is to prevent exposing customer id and multi-use payment token at the front-end. Single-use payment handle is а temporary token representing the card details of the customer located in the paymentHandles object from the response of the single-use customer token creation. If the customer contains multiple cards, the merchant needs to pass the correct single-use payment handle based on the customer intentions.

Before performing a tokenization, the merchant needs to complete the steps:

  1. Create a Single-Use Customer token on their Back-end (BE) server.

  2. Retrieve the singleUseCustomerToken and the selected card paymentHandleToken from the response..

  3. Send both tokens to the their Front-end (FE).

  4. Pass them to the tokenize function using the singleUseCustomerToken and paymentTokenFrom parameter in the options object.

<html>
  ...
  <body>
    ...
    <script>
      paysafe.fields.setup("my Base64 encoded single-use-token API key", {...}, function(instance, error) {
        if (error) {
          console.log(error);
        } else {
          var payButton = document.getElementById("payButton");
          payButton.addEventListener("click", function (event) {
            var singleUseProfile = createSingleUseProfile();
            var options = {
              ...
              singleUseCustomerToken: singleUseProfile.paymentToken,
              paymentTokenFrom: singleUseProfile.cards[0].paymentToken
            }

            instance.tokenize(options , function(instance, error, result) {
              if (error) {
                console.log(error);
              } else {
                // handle result
              }
            });
          });
        }
      });
    </script>
  </body>
</html>

Reset Card Details

The function provides flexibility for the merchant to clear previously inserted card data in Paysafe.js fields. This is to be used when the customer is switching between paying with а saved or а new card.

Optionally the Expiry Date can be prefilled by passing it as an argument in the following format ("MM", "YYYY"). In such scenario the merchant needs to visualize and lock the Expiry Date container, keep in mind that the feature is only for visualizing the Expiry Date and not for editing it.

<html>
  ...
  <body>
    ...
    <script>
      paysafe.fields.setup("my Base64 encoded single-use-token API key", {...}, function(instance, error) {
        if (error) {
          console.log(error);
        } else {
          var payButton = document.getElementById("selectSavedCard");
          payButton.addEventListener("click", function (event) {
            instance.resetCardDetails()
          });
        }
      });
    </script>
  </body>
</html>

Errors

Code Display Message Detailed Message Description
9127

There was an error (9127), please contact our support.

resetCardDetails is available only if card fields are initialized. Used when card fields are not initialized.
Did you find this page useful?