Search Overlay

Apple Pay Using Paysafe JS SDK

Please follow the guides on how to integrate with Paysafe JS: Payment Hub Integration

  • Obtain your public (single-use token creation) and private (payment processing) API keys from the Merchant Portal
  • Create your custom HTML payment form with the required content (text and images) and style.
  • Include the Paysafe.js JavaScript SDK (paysafe.min.js) <script> tag in the <head> element of your HTML payment form.
  • Add empty container elements (typically <div>) to your HTML for the Apple Pay button (and/or the payment fields).
  • Call the SDK fields.setup function with your single-use token API key. The setup function creates the Apple Pay button (and any other fields) inside the provided containers.
  • Call the SDK instance.show function without any parameters. The show function visualizes the Paysafe JS fields and returns a list of available payment methods.
  • Finally, add the instance.tokenize function to the Apple Pay button's click event. This returns a single-use payment handle token (the token representing the payment data entered by the user is stored in the Payment API). Single-use tokens are valid for only 15 minutes.
  • Send the token to your merchant server, where the standard Payment API payment endpoint can be used to make payment.

Example Payment Form

The following is a simple Paysafe.js code sample that creates a payment form with Apple Pay button. The payment button triggers tokenization of the user-entered data and (if tokenization was successful) displays the token in the browser console.

<!-- Basic Paysafe.js example -->
<html>
<head>

<!-- include the Paysafe.js SDK -->
<script src = "https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
</head>
<body>

<!-- Create divs for the payment fields -->
<div id="applePay"></div>
<p></p>

<script type = "text/javascript">

// Base64-encoded version the Single-Use Token API key.
// Create the key below by concatenating the API username and password
// separated by a colon and Base 64 encoding the result
var apiKey = "Your Base64-encoded Single-use-Token Api Key";

var options = {
// You must provide currencyCode to the Paysafe JS SDK to enable the Payment API integration
currencyCode: "USD

// select the Paysafe test / sandbox environment
environment: "TEST",

// set the CSS selectors to identify the payment field divs above
// set the placeholder text to display in these fields
fields: {
applePay: {
selector: '#apple-pay',
type: 'buy',
label: 'Demo JS',
color: 'white-outline',
}
}
};

// initalize the hosted iframes using the SDK setup function
let demoInstance;
paysafe.fields
.setup(API_KEY, options)
.then((instance) => {
console.log("Setup insance completed.");
demoInstance = instance;
return instance.show();
})
.then((paymentMethods) => {
if (paymentMethods.applePay && !paymentMethods.applePay.error) {
document.getElementById("apple-pay").addEventListener("click", function(event) {
instance.tokenize({
amount: 1000,
transactionType: "PAYMENT",
paymentType: "APPLEPAY",
applePay: {
country: 'US',
},
merchantRefNum: 'merchant-ref-num',
})
.then((result) => {
// write the Payment token value to the browser console
console.log(result.token);

// close the Apple Pay window
instance.complete('success');
}).catch(error => {
// display the tokenization error in dialog window
alert(JSON.stringify(error));

// close the Apple Pay window
instance.complete('fail');
})
}, false);
}
}).catch(error => {
// display any setup errors
alert(JSON.stringify(error));
});
</script>
</body>
</html>

Paysafe.js errors are numbered in the range 9nnn. Errors in the other ranges are generated by the Payment API and may be caused by using an invalid single-use token API key, or by using your server-to-server API key rather than the single-use token API key.

For more information on how to display the Apple Pay buttons, please refer to Ph Apple Pay SDK Setup.

For more information on how to tokenize an Apple Pay payment, please refer to PH Tokenize → Tokenize Example with ApplePay

On this Page