Saved Cards Integration
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 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.
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:
-
Create a Single-Use Customer token on their Back-end (BE) server.
-
Retrieve the singleUseCustomerToken and the selected card paymentHandleToken from the response..
-
Send both tokens to the their Front-end (FE).
-
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. |