Apple Pay Using Paysafe JS SDK

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

  1. Obtain your public (single-use token creation) and private (payment processing) API keys from the Merchant Portal
  2. Create your custom HTML payment form with the content (text and images) and style you require.
  3. Include the Paysafe.js JavaScript SDK (paysafe.min.js) <script> tag in the <head> element of your HTML payment form.
  4. Add empty container elements (typically <div>) to your HTML for the Apple Pay button (and/or the payment fields).
  5. 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.
  6. 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.
  7. 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.
  8. 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="apple-pay"></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 API_KEY = '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',
           // Provide an apple pay merchant account if you have more than one configured for that same API key
           // accounts: {
           //   default: 0000000000,
           // },
           // 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
         var demoInstance;
         paysafe.fields
           .setup(API_KEY, options)
           .then(instance => {
             console.log('Setup instance completed.');

             demoInstance = instance;
             return instance.show();
           })
           .then(paymentMethods) => {
             if (paymentMethods.applePay && !paymentMethods.applePay.error) {
               document.getElementById('apple-pay"').addEventListener(
                 'click',
                 function (event) {
                   demoInstance
                     .tokenize({
                       amount: 1000,
                       transactionType: 'PAYMENT',
                       paymentType: 'APPLEPAY',
                       applePay: {
                       country: 'US',
                       },
                       customerDetails: {
                         billingDetails: {
                           country: 'US',
                           zip: '90210',
                           street: 'Oak Fields 6',
                           city: 'ca',
                           state: 'CA',
                         },
                       },
                       merchantRefNum: 'merchant-ref-num-' + new Date().getTime(),
                     })
                     .then(result => {
                       // write the Payment token value to the browser console
                       console.log(result.token);
                       // close the Apple Pay window
                       demoInstance.complete('success');
                     })
                  .catch(error => {
                       // display the tokenization error in dialog window
                       alert(JSON.stringify(error));

                       // close the Apple Pay window
                  demoInstance.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 Apple Pay SDK Setup

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

Did you find this page useful?