Search Overlay

Saved Cards Integration

Overview

The Saved Cards functionality of Paysafe.js allows 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 token 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 Profile Using a Single-Use Token which will create a new customer profile and will add the card details from the payment token.

For an existing customer the Create a Card Using a Single-Use Token will add the card details from the payment token to an existing customer profile.

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

See the Customer Vault API Reference and Cards API Reference for more information.

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 Customer Vault, 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 profile token and single-use card token to the tokenize function. Single-use profile token is a temporary token representing the profile of the customer. The main purpose of the single-use profile token is to prevent exposing customer profile id and multi-use payment token at the front-end. Single-use card token is a temporary token representing the card details of the customer located in the card object from the response of the single-use profile creation. If the profile contains multiple cards, the merchant needs to pass the correct single-use card token based on the customer intentions.

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

  1. Create a Single-use profile token on the their BE server.

  2. Retrieve the paymentToken of the profile and the selected card paymentToken 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", {...}, 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 a saved or a 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.