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.

For a new customer the merchant can use the Create a Customer Using a Single-Use Payment Handle Token which will create a new customer profile and will add the card details from the payment handle.

For an existing customer the Create a Multi-Use Payment Handle Using a Single-Use Payment Handle Token will add the card details from the payment handle to an existing customer profile.

Paysafe recommends to either make a successful payment using the payment handle or verify that the payment handle corresponds to a valid card before adding it to the customer profile.

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"
          }
        }
      })
      .then((instance) => {/** Continue with instance.show() */})
      .catch((error) => {/** Process any errors during the setup*/})
    </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 the their BE server.

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

  3. Send both tokens to the their 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", {...})
        .then((instance) => {
          await instance.show();
          var payButton = document.getElementById("payButton");
          payButton.addEventListener("click", function (event) {
            var singleUseCustomer = createSingleUseCustomer();
            var options = {
              ...
              singleUseCustomerToken: singleUseCustomer.singleUseCustomerToken,
              paymentTokenFrom: singleUseCustomer.paymentHandles[0].paymentHandleToken
            }

            instance.tokenize(options)
              .then(result => {
                 // handle result
               })
          });
        })
        .catch((error) => {/** Process any errors during the setup*/})
    </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", {...})
        .then((instance) => {
          await instance.show();
          var selectSavedCardButton = document.getElementById("selectSavedCard");
          selectSavedCardButton.addEventListener("click", function (event) {
            instance.resetCardDetails();
          });
        })
        .catch((error) => {/** Process any errors during the setup*/})
    </script>
  </body>
</html>

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?