Apple Pay Web Integration

1. Include a <div> tag with the class apple-pay-button and an onclick event associated with the div.
2. When the DOMContentLoaded Event is fired (this typically happens when the web page is loaded), check whether ApplePaySession.canMakePayments is true.
3. After the value is determined to true, enable the button class.

The code snippets below show an example of how this can be done.

HTML Snippet

<div class="apple-pay">
    <h2> Buy with Apple&nbsp;Pay </h2>
    <p>
        Compatible browsers will display an Apple&nbsp;Pay button below.
    </p>
    <div class="apple-pay-button" onclick="applePayButtonClicked()"></div>
</div>

JavaScript Snippet

document.addEventListener('DOMContentLoaded', () => {
    if (window.ApplePaySession) {
    if (ApplePaySession.canMakePayments) {
        showApplePayButton();
    }
}
});

function showApplePayButton() {
    HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
    const buttons = document.getElementsByClassName("apple-pay-button");
    for (let button of buttons) {
        button.className += " visible";
    }
}

CSS Snippet

.apple-pay {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    visibility: hidden;
    display: inline-block;
    width: 200px;
    min-height: 30px;
    border: 1px solid black;
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-size: 100% calc(60% + 2px);
    background-repeat: no-repeat;
    background-color: white;
    background-position: 50% 50%;
    border-radius: 5px;
    padding: 0px;
    margin: 5px auto;
    transition: background-color .15s;
}

.apple-pay-button.visible {
    visibility: visible;
}

.apple-pay-button:active {
    background-color: rgb(152, 152, 152);
}

After all the above code snippets are put together, the Apple Pay web button displays. An example is shown below.

After the user clicks the Buy with Apple Pay button, you must create an Apple Pay session with the necessary order data.

After the session is initiated, define the session.onvalidatemerchant method from Apple JS API. In this method, do a server-to-server call on a validationURL (this will be generated from Safari browser) with a payload (an example is below).

After the success message comes back, use this response on session.completeMerchantValidation(response). To see how this works, please go through the code snippet provided below.

The value of validationURL can be chosen from the values listed below, based on the environment. For example, for sandbox testing, configure the iCloud account to the sandbox tester section. Based on this setup, the Safari browser will give us apple-pay-gateway-cert.apple.com as the validationURL.

validationURL values provided by Apple

For production environment:
        17.171.78.7      apple-pay-gateway-nc-pod1.apple.com
        17.171.78.71     apple-pay-gateway-nc-pod2.apple.com
        17.171.78.135    apple-pay-gateway-nc-pod3.apple.com
        17.171.78.199    apple-pay-gateway-nc-pod4.apple.com
        17.171.79.12     apple-pay-gateway-nc-pod5.apple.com
        17.141.128.7     apple-pay-gateway-pr-pod1.apple.com
        17.141.128.71    apple-pay-gateway-pr-pod2.apple.com
        17.141.128.135   apple-pay-gateway-pr-pod3.apple.com
        17.141.128.199   apple-pay-gateway-pr-pod4.apple.com
        17.141.129.12    apple-pay-gateway-pr-pod5.apple.com
        17.171.78.9      apple-pay-gateway-nc-pod1-dr.apple.com
        17.171.78.73     apple-pay-gateway-nc-pod2-dr.apple.com
        17.171.78.137    apple-pay-gateway-nc-pod3-dr.apple.com
        17.171.78.201    apple-pay-gateway-nc-pod4-dr.apple.com
        17.171.79.13     apple-pay-gateway-nc-pod5-dr.apple.com
        17.141.128.9     apple-pay-gateway-pr-pod1-dr.apple.com
        17.141.128.73    apple-pay-gateway-pr-pod2-dr.apple.com
        17.141.128.137   apple-pay-gateway-pr-pod3-dr.apple.com
        17.141.128.201   apple-pay-gateway-pr-pod4-dr.apple.com
        17.141.129.13    apple-pay-gateway-pr-pod5-dr.apple.com 
For sandbox testing only:
        17.171.85.7      apple-pay-gateway-cert.apple.com

Payload for merchant validation

{
        "merchantIdentifier": "B7...D8",
        "domainName:"www.xxx",
        "displayName":"merchant.com.xxxxxxxxx"
}

JavaScript snippet for merchant validation

/**
 * Apple Pay Logic
 * Our entry point for Apple Pay interactions.
 * Triggered when the Apple Pay button is pressed
 */
function applePayButtonClicked() {   
    const paymentRequest = {
        countryCode: 'US',
        currencyCode: 'USD',
        shippingMethods: [
             {
                 label: 'Standard Shipping',
                 amount: '5.00',
                 identifier: 'free',
                 detail: 'Delivers in five business days',
             },
            {
                label: 'Priority Shipping(3-5 Days)',
                amount: '10.00',
                identifier: 'priority',
                detail: 'Delivers in three business days',
            },
             {
                 label: 'Express Shipping',
                 amount: '20.00',
                 identifier: 'express',
                 detail: 'Delivers in two business days',
             },
         ],

        lineItems: [
            {
                label: ‘This is a line item label’,
                amount: ‘0.00’,
            }
        ],

        total: {
            label: 'This is the total Amount',
            amount: ‘0.99’,
        },

        
	 supportedNetworks:[ 'amex', 'discover', 'masterCard', 'visa'],
        merchantCapabilities: [ 'supports3DS'],

    };

    const session = new ApplePaySession(1, paymentRequest); 

/**
 * Merchant Validation
 * We call our merchant session endpoint, passing the URL to use
 */
 session.onvalidatemerchant = (event) => {
    const validationURL = event. ValidationURL;    
    getApplePaySession(validationURL).then(function(response) {
         session.completeMerchantValidation(response);
    });
};

}
/**
* Server to Server call to apple for response used to validate *merchant
*/

function getApplePaySession(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/session/create');
        xhr.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                resolve(JSON.parse(xhr.response));
            } else {
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };      

	 xhr.onerror = function () {
            reject({
                status: this.status,
                statusText: xhr.statusText
            });
        };

        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify({validationUrl: url}));
    });
}

Java code snippet for server-to-server call to Apple for response used to validate merchant

@RequestMapping(value = "api/session/create", method = RequestMethod.POST)
public String generateSession(String validationURL) throws KeyStoreException, IOException, CertificateException, NoSuchAlgorithmException, KeyManagementException, UnrecoverableKeyException, JSONException {

    String keyStoreFile = "tls//DEMOUS-STORE-MERCHANT-PRIVATE-KEY.p12";
    String keyStorePassword = "password";
    String uri = validationURL;

    ClassLoader classLoader = Thread.currentThread().getContextClassLoader();


    KeyStore clientStore = KeyStore.getInstance("PKCS12");
    clientStore.load(new FileInputStream(classLoader.getResource(keyStoreFile).getFile()), keyStorePassword.toCharArray());

    KeyManagerFactory kmf = KeyManagerFactory.getInstance(KeyManagerFactory.getDefaultAlgorithm());
    kmf.init(clientStore, keyStorePassword.toCharArray());
    KeyManager[] kms = kmf.getKeyManagers();    
    SSLContext sslContext = null;
    sslContext = SSLContext.getInstance("TLS");
    sslContext.init(kms, null, new SecureRandom());    HttpsURLConnection.setDefaultSSLSocketFactory(sslContext.getSocketFactory());
    URL url = new URL(uri);
    HttpsURLConnection urlConn = (HttpsURLConnection) url.openConnection();
    urlConn.setDoOutput(true);
    urlConn.setDoInput(true);
    urlConn.setRequestProperty("Content-Type", "application/json");
    urlConn.setRequestProperty("Accept", "application/json");
    urlConn.setRequestMethod("POST");
    JSONObject cred   = new JSONObject();
    cred.put("merchantIdentifier","B7...D8");
    cred.put("domainName", "www.xxx");
    cred.put("displayName", "xxx");

    OutputStreamWriter wr = new OutputStreamWriter
                                      (urlConn.getOutputStream());
    wr.write(cred.toString());
    wr.flush();
    StringBuilder sb = new StringBuilder();
    int HttpResult = urlConn.getResponseCode();
    if (HttpResult == HttpURLConnection.HTTP_OK) {
        BufferedReader br = new BufferedReader(
                new InputStreamReader(urlConn.getInputStream(), "utf-8"));
        String line = null;
        while ((line = br.readLine()) != null) {
            sb.append(line + "\n");
        }
        br.close();
	return sb.toString();
    } else {        
	return urlConn.getResponseMessage());
    }
}

The response will be something like the following example.

{
        "epochTimestamp": 1502127006708,
        "expiresAt": 1502134206708,
        "merchantSessionIdentifier": "90BBDED6D37D450198ABEB1E6175F9DA_916523AAED1343F5BC5815E12BEE9250AFFDC1A17C46B0DE5A943F0F94927C24",
        "nonce": "4ca739fe",
        "merchantIdentifier": "85B3D63087D5C2F993C7D16C1BF2FF4E878B668A556378E4408202C70F88CB97",
        "domainName": "www.demo-webstore.radial.com",
        "displayName": "DEMOUS",
        "signature": "308006092a864886f70d010702a0803080020101310f300d06096086480165030402010500308006092a864886f70d0107010000a0803…..
"
        }

After the merchant validation is completed in step 2, the Apple payment sheet will be shown on the Macbook and the connected iPhone. Note that the Apple Macbook and iPhone should be logged into the same iCloud account. Below are screenshots of examples.

Macbook payment sheet

IPhone payment sheet waiting for touch impression

IPhone payment sheet after touch impression and processing

IPhone payment sheet after successful processing

After the merchant is validated and touchID is validated, the next step is to capture the payment object (the encrypted token, as in the example below) from the Apple Pay event and pass it to the payment processor to process the authorization.

session.onpaymentauthorized = (event) => {    
    // Send payment for processing...
    const payment = event.payment;  

    authorize(payment.token).then(function(response) {
        if(response.match(/status=.error./)) {
            console.log("an error occured!");
            console.log(response);
            return session.abort();
        }

        session.completePayment(ApplePaySession.STATUS_SUCCESS);
        $('#complete_checkout_apple_pay').submit();
    });

}; 
function authorize(token) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/authorize');
        var orderData = orderPayload(); // custom method to fetch order data
        token.epsOrderData = orderData;
        xhr.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                resolve(xhr.response);
            } else {
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };
        xhr.onerror = function () {
            reject({
                status: this.status,
                statusText: xhr.statusText
            });
        };
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(token));
    });
}