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:
- https://your-domain.com/well-known/apple-developer-merchantid-domain-association
- Sandbox Verification File:
https://drive.google.com/file/d/1V9C4vr9UcqqCIh3-1MD35nQbid7TUeU1/view?usp=sharing - Production Verification File:
https://drive.google.com/file/d/1B5GO0Pg3-VuxoYZoCqfXskWu6uzMnt1j/view?usp=sharing
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);
};