Create a Sandbox Contact Us

Apple Pay Hosted Checkout Sample Code

  1. Let's define a helper object with all necessary components:

    const apRequest = {
    buttonOptions: {
        buttonContainer: "ap-container",
        buttonColor: APButtonColor.black,
        buttonType: APButtonType.pay
    },
    totalAmount: null,
    taxAmt: null,
    shippingMethod: null,
    creditType: null,
    getTransactionInfo: function (taxAmt, shippingMethod, creditType) {
        try {
            this.shippingMethod = shippingMethod || this.shippingMethod || {
                        "label": "Free Shipping",
                        "amount": "0.00",
                        "type": "final"
                    };
            this.taxAmt = roundToNumber(taxAmt, 4) || this.taxAmt || 0.07;
            this.creditType = creditType || this.creditType;
            const amt = getAmount();
            const lineItems = [
                {
                    "label": "Subtotal",
                    "type": "final",
                    "amount": amt
                },
                this.shippingMethod
            ];
            if (this.creditType === "credit") {
                lineItems.push({
                    "label": "Credit Card Fee",
                    "amount": roundTo(0.0275*amt, 2),
                    "type": "final"
                });
            }
            lineItems.push({
                "label": "Estimated Tax",
                "amount": roundTo(this.taxAmt*amt, 2),
                "type": "final"
            });
            let totalAmt = 0;
            lineItems.forEach((item) => {
                totalAmt += parseFloat(item.amount)||0;
            });
            totalAmt = roundTo(totalAmt, 2);
            this.totalAmount = totalAmt;
            
            return {
                'lineItems': lineItems,  
                total: {
                        type:  'final',
                        label: 'Total',
                        amount: totalAmt,
                    }
            };                        
        } catch (err) {
            console.error("getTransactionInfo error ", exMsg(err));
        }
    },  
    onGetTransactionInfo: function () {
        try {
            return this.getTransactionInfo();
        } catch (err) {
            console.error("onGetTransactionInfo error ", exMsg(err));
        }
    },  
    onGetShippingMethods: function()  {
        return [
            {
                label: 'Free Shipping',
                amount: '0.00',
                identifier: 'free',
                detail: 'Delivers in five business days',
            },
            {
                label: 'Express Shipping',
                amount: '5.00',
                identifier: 'express',
                detail: 'Delivers in two business days',
            },
        ];
    },
    onShippingContactSelected: function(shippingContact) {
        const self = this;
        return new Promise((resolve, reject) => {
            try {
                console.log("shippingContact", JSON.stringify(shippingContact));
                let taxAmt = 0.1;
                const newShippingMethods = [
                    {
                        label: 'Free Shipping',
                        amount: '0.00',
                        identifier: 'free',
                        detail: 'Delivers in five business days',
                    }                                
                ];
                if (shippingContact && shippingContact.administrativeArea) {
                    if (shippingContact.administrativeArea === "NY") {
                        taxAmt = 0.0875;
                        newShippingMethods.push(
                                {
                                    label: 'Overnight Shipping',
                                    amount: '10.00',
                                    identifier: 'overnight',
                                    detail: 'Delivers in one business days',
                                }
                            );
                    } else if (shippingContact.administrativeArea === "NJ") {
                        taxAmt = 0.07;
                        newShippingMethods.push(
                            {
                                label: 'Express Shipping',
                                amount: '5.00',
                                identifier: 'express',
                                detail: 'Delivers in two business days',
                            }
                        );
                    }
                }
                const resp = self.getTransactionInfo(taxAmt, newShippingMethods[0]);
                resp.shippingMethods = newShippingMethods;
                resolve(resp);                            
            } catch (err) {
                const apErr = {
                    code: "-101",
                    contactField: "",
                    message: exMsg(err)
                }
                console.error("onShippingContactSelected error.", exMsg(err));
                reject({errors: [err]});
            }
        })                
    },
    onShippingMethodSelected: function(shippingMethod) {
        const self = this;
        return new Promise(function (resolve, reject) {
            try {
                console.log("shippingMethod", JSON.stringify(shippingMethod));
                const resp = self.getTransactionInfo(null, shippingMethod);
                resolve(resp);                            
            } catch (err) {
                const apErr = {
                    code: "-102",
                    contactField: "",
                    message: exMsg(err)
                }
                console.error("onShippingMethodSelected error.", exMsg(err));
                reject({errors: [err]});
            }
        })                
    },
    onPaymentMethodSelected: function(paymentMethod) {
        const self = this;
        return new Promise((resolve, reject) => {
            try {
                console.log("paymentMethod", JSON.stringify(paymentMethod));
                const resp = self.getTransactionInfo(null, null, paymentMethod.type);
                resolve(resp);                            
            } catch (err) {
                const apErr = {
                    code: "-102",
                    contactField: "",
                    message: exMsg(err)
                }
                console.error("onPaymentMethodSelected error.", exMsg(err));
                reject({errors: [err]});
            }
        })                
    },
    validateApplePayMerchant: function () {
        return new Promise((resolve, reject) => {
            try {
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "https://api.cardknox.com/applepay/validate");
                xhr.onload = function () {
                    if (this.status >= 200 && this.status < 300) {
                        console.log("validateApplePayMerchant", JSON.stringify(xhr.response));
                        resolve(xhr.response);
                    } else {
                        console.error("validateApplePayMerchant", JSON.stringify(xhr.response), this.status);
                        reject({
                            status: this.status,
                            statusText: xhr.response
                        });
                    }
                };
                xhr.onerror = function () {
                    console.error("validateApplePayMerchant", xhr.statusText, this.status);
                    reject({
                        status: this.status,
                        statusText: xhr.statusText
                    });
                };
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send();
            } catch (err) {
                setTimeout(function () { console.log("getApplePaySession error: " + exMsg(err)) }, 100);
            }
        });
    },
    onValidateMerchant: function() {
        return new Promise((resolve, reject) => {
            try {
                this.validateApplePayMerchant()
                .then((response) => {
                    try {
                        console.log(response);
                        resolve(response);
                    } catch (err) {
                        console.error("validateApplePayMerchant exception.", JSON.stringify(err));
                        reject(err);
                    }
                })
                .catch((err) => {
                    console.error("validateApplePayMerchant error.", JSON.stringify(err));
                    reject(err);
                });    
            } catch (err) {
                console.error("onValidateMerchant error.", JSON.stringify(err));
                reject(err);
            }
        });
    },
    authorize: function(applePayload, totalAmount) {
        return new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://<your domain>/<path to handle authorization>");
            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
                });
            };
            const data = {
                amount: totalAmount,
                payload: applePayload
            };
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(data));
        });
    },
    onPaymentAuthorize: function(applePayload) {
        return new Promise((resolve, reject) => {
            try {
                this.authorize(applePayload, this.totalAmount)
                .then((response) => {
                    try {
                        console.log(response);
                        const resp = JSON.parse(response);
                        if (!resp)
                            throw "Invalid response: "+ response;
                        if (resp.xError) {
                            throw resp;
                        }
                        resolve(response);
                    } catch (err) {
                        throw err;
                        // reject(err);
                    }
                })
                .catch((err) => {
                    console.error("authorizeAPay error.", JSON.stringify(err));
                    apRequest.handleAPError(err);
                    reject(err);
                });    
            } catch (err) {
                console.error("onPaymentAuthorize error.", JSON.stringify(err));
                apRequest.handleAPError(err);
                reject(err);
            }
        });
    },
    onPaymentComplete: function(paymentComplete) {
        if (paymentComplete.response) { //Success
            const resp = JSON.parse(paymentComplete.response);
            if (resp.xRefNum) {
                setTimeout(function(){ console.log("Thank you for your order:("+resp.xRefNum+")")}, 100);
            } else {
                setTimeout(function(){ console.log("Thank you for your order.")}, 100);
            }
        } else if (paymentComplete.error) {
            console.error("onPaymentComplete", exMsg(paymentComplete.error));
            handleAPError(paymentComplete.error);
        }                        
    },
    handleAPError: function(err) {
        if (err && err.xRefNum) {
            setTimeout(function(){ alert("There was a problem with your order:("+err.xRefNum+")")}, 100);
        } else {
            setTimeout(function(){ alert("There was a problem with your order:"+exMsg(err))}, 100);
        }
    },
    initAP: function() {
        return {
            buttonOptions: this.buttonOptions,
            merchantIdentifier: "<Your Apple Merchant ID>",
            requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
            requiredShippingContactFields: ['postalAddress', 'name', 'phone', 'email'],
            onGetTransactionInfo: "apRequest.onGetTransactionInfo",
            onGetShippingMethods: "apRequest.onGetShippingMethods",
            onShippingContactSelected: "apRequest.onShippingContactSelected",
            onShippingMethodSelected: "apRequest.onShippingMethodSelected",
            onPaymentMethodSelected: "apRequest.onPaymentMethodSelected",
            onValidateMerchant: "apRequest.onValidateMerchant",
            onPaymentAuthorize: "apRequest.onPaymentAuthorize",
            onPaymentComplete: "apRequest.onPaymentComplete",
            onAPButtonLoaded: "apRequest.apButtonLoaded",
            isDebug: true
        };
    },
    apButtonLoaded: function(resp) {
        if (!resp) return;
        if (resp.status === iStatus.success) {
            showHide(this.buttonOptions.buttonContainer, true);
            showHide("lbAPPayload", true);
        } else if (resp.reason) {
            console.log(resp.reason);
        }
    }
}

  2. Let’s enable Apple Pay for the website:

    document.addEventListener("DOMContentLoaded", function(event) { 
    .....
    ckApplePay.enableApplePay({
        initFunction: 'apRequest.initAP',
        amountField: 'amount'
    });
    .....
}

  3. To see the full solution please click here.

Last updated