Apple Pay

How to Set Up with Apple Pay

In order to accept payments via Apple Pay on the web, you will need to register any domains that you plan to use with Apple.

To verify the ownership of your domain:

1. Host the below verification file at your domain in the following location:

2. Register your domain

JavaScript SDK

You will need to include the following script tags to load EdgePay’s JS library:

SandBox

<script 
type="text/javascript" src="https://js.edgepayportal.com/2.0.0/js/sandbox/client.min.js"></script>

Production

<script 
type="text/javascript" src="https://js.edgepayportal.com/2.0.0/js/prod/client.min.js"></script>

Initialization

Show the Apple Pay button:

You will need to check that the window.ApplePaySession class exists to ensure that Apple Pay is supported and available in the browser. After that you will also need to check that the device is capable of making Apple Pay payments by using the canMakePayments() method.

if (window.ApplePaySession) {
                if (ApplePaySession.canMakePayments()) {
                    $(".apple-pay-button").show();
                }
            }

Request Payment Authorization and get EdgePay Pivot token:

Once the Apple Pay button is clicked create an Apple Pay Session using EdgePay’s Payment Request object:

var paymentRequestResponse = await EdgePay.applePay.getPaymentRequest();
                if (!paymentRequestResponse.success) {
                    alert("Error when creating Payment Request" + "Error: " + JSON.stringify(paymentRequestResponse));
                    return;
                }
 
                paymentRequestResponse.paymentRequest.total = {
                    "label": "Demo (Card is not charged)",
                    "type": "final",
                    "amount": 1.00
                };
 
                // Create ApplePaySession
                const session = new ApplePaySession(3, paymentRequestResponse.paymentRequest);

Use the EdgePay’s validate merchant method to complete Apple’s merchant validation process:

session.onvalidatemerchant = async event => {
                    // VALIDATE MERCHANT
                    EdgePay.applePay.validateMerchant({
                        requestPayLoad: {
                            validationURL: event.validationURL,
                            displayName: 'My Store Name'
                        },
                        onSuccess: function (response) {
                            session.completeMerchantValidation(response.merchantSession);
                        },
                        onError: function (error) {
                            console.log(error);
                        }
                    });
                };

Get an EdgePay Pivot token after receiving the Apple Pay payment token:

session.onpaymentauthorized = event => {
                    //Get an EdgePay Pivot token on payment authorized
                    EdgePay.applePay.getToken({
                        paymentToken: event.payment.token,
                        onSuccess: function (response) {
                            submitSale(response.tokenID, "apple");
                        },
                        onError: function (error) {
                            console.log(error);
                        }
                    });
 
                    // DEFINE ApplePayPaymentAuthorizationResult
                    const result = {
                        "status": ApplePaySession.STATUS_SUCCESS
                    };
                    session.completePayment(result);
                };