Apple Pay Web Integration

<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>

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";
    }
}

.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);
}

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

/**
 * 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}));
    });
}

@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());
    }
}

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

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));
    });
}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));
    });
}