We connect payment via Apple Pay on the site

Now, including on our website, and in ivi applications, there is a clear tendency to increase the audience on mobile devices. The share of purchases made on the Internet from mobile devices is also growing. In contrast to the desktop, in addition to traditional payment options, mobile payment systems are available, for example, Apple Pay , Android Pay , Samsung Pay . These systems can be used not only for payment in terminals accepting bank cards, but also for payment in applications and on websites.

We started the implementation of mobile payments with the ivi web version and chose the mobile site and the Apple Pay system.

Apple Pay is Apple’s mobile payment system that allows mobile devices to make payments in stores and on the Internet. The user binds the card to the phone, and then, when paying, only payment confirmation with a fingerprint or digital code is required.

In this article I will talk about using the Apple Pay JS library.

The library is designed to use Apple Pay on sites. Apple Pay JS API supported on:

• iOS starting from version 10 in the Safari browser and iPhone models that support contactless payments (SE and older than 6);
  
• macOS from version 10.12 in the Safari browser on computers with Touch ID or with an iPhone or Apple Watch connected to confirm payments.
  

In order to accept payments via Apple Pay on the site, you will need:

• Apple Developer Account
  
• HTTPS on a page using Apple Pay;
  
• Choose the payment gateway with which you will work. We use Payture services .
  

Next, you need to register a Merchant ID, create Merchant Identity Certificate and Payment Processing Certificate and verify the domains on which Apple Pay will be used. The description of the process is in the instructions from Payture.

• Merchant ID - Merchant ID representing it on Apple Pay;
  
• Payment Processing Certificate - a certificate used to transfer payment data on the side of the payment gateway. Apple Pay servers use the public key of this certificate to encrypt billing information. The private key is used to decrypt data during the payment;
  
• Merchant Identity Certificate - TLS certificate used to confirm merchant data and authorize payment sessions through Apple servers. A billing session is created when the payment process is initialized. The certificate is used only on the site side.
  

It is worth paying attention to the fact that during verification you need to specify the fully qualified domain name, i.e. the domain mask cannot be specified.

After all the preparatory work, you can proceed with the integration of Apple Pay on the site. The integration process consists of 3 main parts:

• Creating a payment session, displaying a payment dialog and processing payment session events. It uses the Apple Pay JS API;
  
• Verification of the payment session. This is required so that Apple Pay can make sure that the request comes from a registered seller. It is realized on a backend;
  
• Making a payment through a payment gateway and ending a payment session.
  

Create a billing session

Before showing the payment button through Apple Pay, you need to check whether Apple Pay is available on the device. It is implemented like this:

if (window.ApplePaySession) {
   //Apple Pay JS API доступно
}

Next, using the Apple Pay JS API, you can check whether the user has active cards tied to Apple Pay. 2 methods canMakePaymentsand are provided canMakePaymentsWithActiveCard. The first one checks only the fact of Apple Pay support, the second one in addition allows you to find out if there is at least 1 card tied to Apple Pay.

At our place, for example, these checks are used in order to decide to show the payment button via Apple Pay above the other payment methods or below them. If there are no added cards, the Set Up Apple Pay button is displayed, by clicking the button the phone settings with the Wallet section are opened. As a result, the user leaves the site, and the payment process should not be interrupted, so the button is located under the main types of payment and is not even visible without a scroll of the screen.

Payment pages for customized and non-customized Apple Pay:



Once the button is displayed on the page, you can create a payment session to display the payment dialog. A session can only be created by explicit user action. By clicking on the button you need to execute the following code:

const paymentRequest = {
   total: {
       label: 'ivi.ru',
       amount: 50
   },
   countryCode: 'RU',
   currencyCode: 'RUB',
   merchantCapabilities: ['supports3DS'],
   supportedNetworks: ['masterCard', 'visa']
};
const applePaySession = new window.ApplePaySession(1, paymentRequest);

The example shows the minimum set of properties for the ApplePayPaymentRequest object . To display more detailed information about the purchase, you need to use other properties of this object.

To process payment session events, at least the following methods must be implemented:

• onvalidatemerchanttriggered when opening an Apple Pay payment form. In the handler of this event, it is required to verify the payment session. The verification process is described below;
  
• onpaymentauthorizedtriggered when a user confirms a payment on an Apple Pay payment form using Touch ID, Face ID or code. A payment token is available here, which must be transferred to a payment gateway to make a payment;
  

After creating the object, ApplePaySessionyou need to call the begin method to display the payment dialog:

applePaySession.begin();

As a result, the user will see the following:


When a form is shown, an event is triggered onvalidatemerchant. In order to continue the payment, we are implementing the next step.

Payment Session Verification

A onvalidatemerchantfield comes in the event parameter validationURL. From this backend, you need to send data signed with a Merchant Identity Certificate.

applePaySession.onvalidatemerchant = (event) => {
   // отправляем запрос на валидацию сессии
   performValidation(event.validationURL)
       .done(
           (merchantSession) => {
               // завершаем валидацию платежной сессии
           this.applePaySession.completeMerchantValidation(merchantSession);
           }
       ).fail(
       () => {
           this.applePaySession.abort();
           // показ сообщения об ошибке и т.п.
       }
   );
};

The method performValidationreturns the promise from the validation request. The handler of this request is on our side, the implementation is this: a post request is sent to the URL from the onvalidatemerchant event parameter.

The request body contains json:

{
    "merchantIdentifier": "MERCHANT_IDENTIFIER",
    "domainName": "HOST",
    "displayName": "DISPLAY_NAME"
}

The parameters MERCHANT_IDENTIFIER and DISPLAY_NAME are taken from the development account (they were set up at the very beginning), and HOST is the domain from which payment is made.

The request must be signed with a Merchant Identity Certificate. Json will come in the answer, it also needs to be returned. After receiving this response, we call the method for the payment session completeMerchantValidation.

The session verification process has been completed, now the user needs to confirm the payment with a finger or code. After that, the event is triggered onpaymentauthorized. We pass to the stage of the payment.

Payment

The event parameter onpaymentauthorizedcontains an object with a payment token, which must be transferred to the payment gateway. All information contained in the token is described in the documentation .

Once the payment is completed, we complete the payment on the client side.

applePaySession.completePayment(success);

in success you need to pass one of 2 statuses window.ApplePaySession.STATUS_SUCCESSor window.ApplePaySession.STATUS_FAILURE.

This completes the payment process through Apple Pay. You can read more about Apple Pay JS in the official documentation .