View Source

Using the Apple Pay widget for the IPS Assist payments

General information

The Apple Pay widget enables customers to use the Apple Wallet to pay in the online store without redirecting to external payment pages and without entering bank card details.

Apple Pay is supported on iOS and macOS devices.

By sight, the widget is presented in the form of an Apple Pay button, the process of authorization and payment of the order is started by clicking on this button.

Procedure for payment via widget

The customer selects products on the website of the online store.
The online store transfers the order data to the widget.
The customer clicks the Apple Pay button.
A pop-up window appears on the device with connected Apple Pay, where the customer can select one of the cards added to the Apple Pay mobile app before.
The customer selects the card and confirms the payment on the device with a password, TouchID or FaceID.
Apple Pay creates an encrypted package with a token.
The widget receives an Apple Pay token package.
The widget transfers an encrypted packet with a token and payment data to the IPS Assist.
The IPS Assist decrypts the packet with the token and payment data.
The IPS Assist makes payment through the processing of the settlement bank.
The IPS Assist returns the results of payment to the online store site.
The online store displays the payment result for the customer.

List of actions for organizing of payments using the widget

To organize the payment, you must perform the following preparatory steps:

fill out a request for connecting Apple Pay payment to IPS Assist;
register in Apple;
create a certificate in your Personal account IPS Assist;
sign the received certificate;
upload the signed certificate in your Personal account IPS Assist;
prepare the pages of the online store for payment;
- use of the https protocol on the page with the widget and support for the TLS protocol version 1.2 are mandatory;
- the domain must have a valid SSL certificate.

Deployment of the widget on the online store page

To deploy a widget on an online store page, do the following:

place the widget on the payment page of the online store;
customize the widget;
check the possibility of payment using the widget;
- transfer the order parameters;
- receive and process the payment result.

Description of the widget

The widget is an HTML code and a JS script that you need to place and configure on the payment page of your online store.

Widget installation

In that place of the online store page where you plan to place the Apple Pay payment button, you need to add the following code:

<button id="apple-pay-button"></button>

You can specify the color, type and size of the button. Examples of button types and their description are available on the site https://developer.apple.com/design/human-interface-guidelines/apple-pay/overview/buttons-and-marks/.

To customize the appearance of the button, you must add a description of the style in the tag <head></head>.

<style>
  #apple-pay-button {
    display: none;
    background-color: black;
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-size: 100% 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    width: 100%;
    height: 44px;
    padding: 10px 0;
    border-radius: 10px;
  }
</style>

For more information on customizing the appearance of the button, see https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons.

Order parameters transfer

After clicking on the Apple Pay button on the page of the online store, an applePaySession session is created in which you need to transfer the order parameters.

The order amount and currency of the order, as well as supported card types, should be passed as order parameters.

    Const currency = $('#currency').val(); // currency
    Const paymentRequest = {
      countryCode: region.toUpperCase(),
      currencyCode: currency.toUpperCase(),
      total: {
        label: 'Your label', // payment name
        amount: $('#amount').val() //order amount
      },
      supportedNetworks:['masterCard', 'visa'],
      merchantCapabilities: [ 'supports3DS' ] //supported cards
    };
Const applePaySession = new window.ApplePaySession(1, paymentRequest);