Apple Pay

Apple Pay provides an easy and secure way to make payments in iOS, iPadOS, watchOS apps and in Safari. With Face ID, Touch ID and double-clicking Apple Watch, users can effortlessly and safely provide all the needed information for their payment and shipping purposes.

Guidelines

If you want to add Apple Pay as a payment method on your website, you have two ways to do it:

  • Integrate our payment widget on your website.

  • Place the Apple Pay button on your website yourself, obtain the configuration for it from us, and then process the payment using our endpoint with the data received from Apple Pay. This method will be described in more detail below

Placing the Apple Pay button yourself
Step 1
Create an order using the Create order by ID endpoint. This step is optional,but it will help you obtain a configuration object with filled-in transaction info.

Step 2

Obtain the configuration for the Apple Pay button using the Get payment config endpoint and the orderId you have received in the Step 1

Step 3
Create a payment session when user presses the Apple Pay button. In the session,a request will be sent to your server,using the event handler function onvalidatemerchant that will execute a request to Create new Apple Pay payment session endpoint on our API server using the merchant credentials. If the execution of the request is successful,an object will be received that needs to be passed to the function session.completeMerchantValidation. When the validation of the payment session is successfully , the wallet with a list of available saved bank cards will be opened on the user's device.

Step 4
The user selects a bank card and confirms the payment by entering a PIN code or using Face ID, for example. In the event handler for onpaymentauthorized, the object event.payment will be available. Send the payment object to your server, which will execute a request to Create payment by ID endpoint on our API server using the merchant credentials.

Examples

Example of order configuration

// Create order and get orderId
const orderId = "o-81xxxxef-8xx2-1xxf-axx4-e1xxxxxxxxc9";

// Get the configuration object from your server, which will obtain this config from our API server using a security token and the orderId.
// Here is hardcoded example of the configuration object
const config = {
  apiVersion: "6",
  paymentRequest: {
    merchantCapabilities: ["supports3DS"],
    supportedNetworks: [
      "amex",
      "chinaUnionPay",
      "discover",
      "interac",
      "masterCard",
      "privateLabel",
      "visa",
      "jcb",
      "cartesBancaires",
      "eftpos",
      "electron",
      "maestro",
      "vPay",
      "elo",
      "mada",
    ],
    countryCode: "US",
    requiredBillingContactFields: ["email", "name"],
    applicationData: "1242773295400000111",
    total: {
      type: "final",
      label: "Demo (Card is not charged)",
      amount: "402.00",
    },
    currencyCode: "KZT",
  },
};

Example of creating a payment session

var applePayButton = document.getElementById("apple-pay-button");
applePayButton.addEventListener("click", function (e) {
  if (!window.ApplePaySession) {
    console.error("Apple Pay session is not available");
    return;
  }
  if (window.ApplePaySession.canMakePayments) {
    // Show button
  }

  e.preventDefault();

  var request = Object.assign({}, config.paymentRequest);
  var session = new ApplePaySession(config.apiVersion, request);

  session.onvalidatemerchant = function (event) {
    validateApplePayMerchant(session, event);
  };
  session.onpaymentauthorized = function (event) {
    applePayPaymentAuthorized(session, request, event);
  };
  session.oncancel = function () {
    cancel(session);
  };

  session.begin();
});

Example of handling the events onvalidatemerchant and onpaymentauthorized

async function validateApplePayMerchant(session, event) {
  const response = await fetch(yourServerUrlValidationEndpoint, {
    method: "POST",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      url: event.validationURL,
      orderId: orderId,
    }),
  });

  if (!response.ok) {
    session.abort();
    return;
  }

  const json = await response.json();
  session.completeMerchantValidation(json);
}

async function applePayPaymentAuthorized(session, request, event) {
  const response = await fetch(yourServerPaymentProcessingResponse, {
    method: "POST",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: toBase64(JSON.stringify(payment)),
  });

  if (!response.ok) {
    session.completePayment(ApplePaySession.STATUS_FAILURE);
    return;
  }

  session.completePayment(ApplePaySession.STATUS_SUCCESS);
}

function toBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte)
  ).join("");
  return btoa(binString);
}