Apple Pay

Apple Pay

Add Apple Pay payment method to your checkout page by using the UNIPaaS Web SDK. Apple Pay payment method consists of a single button component, that triggers the built-in Apple checkout experience.

Apple Pay is available to cardholders exclusively at supported banks. The Apple Pay button will only be visible to buyers with supported browser and device combination

Prerequisites

1. Set up the UNIPaaS Web SDK
2. Make sure you serve your application over HTTPS in all environments
3. Register your domain(s) by sending a request to [email protected].
4. Use a supported browser and device combination for testing

Apple Pay and SCA
The Payment Services Directive 2 (PSD2) requires Strong Customer Authentication (SCA) for some online purchases in the EU, in order to verify the card holder identity.

Buyers that make purchases with Apple Pay are identified with a fingerprint or FaceID and therefore will not require additional identification.

Apple guidelines
While our Web SDK provides significant flexibility for checkout page design, there are some UI guidelines that should be followed when implementing Apple Pay.

In order to stay compliant with Apple Pay and maximize your checkout page's conversion rate, you must make sure Apple Pay is the main payment method on your checkout page (e.g. shown first or pre-selected), and that you follow all Apple human interface guidelines.

Registering your domain with UNIPaaS

Apple play implementation requires your domain to be registered under the UNPIaaS certificate.
To register your domain with UNIPaaS's certificate, please contact UNIPaaS support team.

Make sure you include your domain and all subdomains that are used to host you payment experiences.

Integration

Before you begin the Apple Pay integration, you should implement the UNIPaaS Web SDK. This includes the following steps:

1. Create Checkout request and get the Session token
2. Embed the Web SDK script into your web page

Once the UNIPaaS Web SDK is is ready, you can begin integrating Apple Pay.

Embed the Apple Pay button
Add an HTML element with a selector of choice,.
For example apple-pay as shown in the example below:

<div class="apple-pay"></div>

Initialize the Web SDK

<script>
   var unipaas = new Unipaas();
   
   var SESSION_TOKEN = 'TODO: token from earlier step'
   
   // use polyfiils for IE11
   unipaas.usePolyfills();

   var applePayAvailable = unipaas.isAvailable('applePay');

   var additionalFields = {};

    if (applePayAvailable) {
    	additionalFields.applePay = { selector: "#apple-pay" };
    };
   
   unipaas.initTokenize(
       SESSION_TOKEN,
       {
       },
       {
           additionalFields,
           "mode": 'test'
       }
   );
   
   
       function disableButtonOnSuccess() {
           var sendButton = window.document.getElementById('submit-form');
           if (sendButton) {
               sendButton.disabled = true;
           }
       }
   
       unipaas.on('onSuccess', function (data) {
           console.log('Success:', data);
           disableButtonOnSuccess(true);
       })
       unipaas.on('onError', function (err) {
           console.log('Error:', err);
       })
</script>

Authorization

Forward the details of the Authorization to your server.
This step is required to confirm the Authorization status.

// on form submit
unipaas.on("onSubmission", () => {
  
});

// after token succeed
unipaas.on("OnTokenSuccess", (token) => {
  // You can keep the paymentOptionId for later use 
});

// on any status except to success
unipaas.on("onError", (err) => {
  //Do something if the user cancelled the form
});

// the payment was successful
unipaas.on("onSuccess", (data) => {
  // take the data response and forward it to your server for additional checks

});

Verification

Verify the Authorization status from your server side.
Authorization verification is essential to ensure no manipulation occurred on the client-side.
Make a GET /pay-ins/{authorizationId} request:

curl --location --request GET 'https://sandbox.unipaas.com/platform/pay-ins/{authorizationId}' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {{PRIVATE_KEY}}'

Test your Apple pay integration in sandbox

📘

Create a Sandbox Tester Account

Please make sure you have an Apple Sandbox Tester Account on your iPhone / macOS device before the testing, as described here.

Please use the following cards to test your Apple Pay Integration on sandbox: