Enable Apple Pay as a payment method for your merchants
To test Apple Pay in our sandbox environment, configure your sandbox wallet according to Apple's testing guidelines.
Enabling Apple Pay for your merchants
Please contact your support representative to enable Apple Pay for your account.
Once Apple Pay support is enabled in your account, please follow the below steps
Step 1 - Select merchant from your partner portal and go to settings
Step 2 - Select Add Domain from the Apple Pay Section to start the merchant domain verification process. Please note that Apple Pay requires domain verification for each merchant.
Apple Pay Domain Verification Screen
Step 3 - Download the verification certificate from the Add Domain screen. After properly hosting the certificate file, select the "The file has been uploaded" checkbox and click the Add Domain button. If everything is correct, the domain will be verified and added to the merchant's account.
Apple Pay - Add Domain Screen
Using Apple Pay in your Web Application
For native app integration, please contact your assigned solution engineer for further implementation details
To use Apple Pay in your web application, the system must first verify the domain as described in the previous section.
This platform simplifies presenting Apple Pay during the checkout process in your web application. If you are already using the JS library, you only need to call an additional function to display the Apple Pay button.
To learn more about JS library, please see our guide.
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8" /> <metahttp-equiv="X-UA-Compatible"content="IE=edge" /> <metaname="viewport"content="width=device-width, initial-scale=1.0" /> <title>Apple Pay Demo</title> <scriptsrc="https://console.payengine.co/js/1.0.0/embed.js?key=<your public key>"async></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js" integrity="sha512-m2ssMAtdCEYGWXQ8hXVG4Q39uKYtbfaJL5QMTbhl2kc6vYyubrKHhr6aLLXW4ITeXSywQLn1AhsAaqrJl8Acfg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head> <body> <h4>Apple Pay</h4> <divid="button"></div> <script>constmerchantId="<Your Mercchant ID>";constamount=10.00;//--> Send data to your backend after receving Apple Pay Tokenconstsubmit= (token) => { axios.post("<Your Back End Application>/api/charge", { merchant_id: merchantId, data: { cardToken: token, transactionAmount:String(amount), }, } ).then((resp) => {//Handle Response from your backend }).catch((err) => {//Handle Error from your backend }); };//--> Example of our library and Apple Paywindow.onload= () => {PayEngine.ApplePay.configure({ merchantId: merchantId, hmac: <HMAC> amount: amount, selector: "#button", buttonType: "buy", buttonColor: 'black', // This function called to provide result of Apple Pay Authorization callback: function (response, error) {if (!error) {//Handle Success here. Typically call your backend to call the card sale APIsubmit(response.token); } else {//Handle Apple Pay Authorization Error } }, }); }; </script></body></html>
// Credit Card Sale// Note that this call is not changed and can pass in Apple Pay Token just like Credit card tokensexports.charge=asyncfunction (req, res) {try{constresponse=awaitaxios.post(PayEngine_Server +"/api/payment/sale", {"merchant_id":req.body.merchantID,"data": {"transactionAmount":req.body.amount,"cardToken":req.body.token,"currencyCode":"USD" } }, { headers: {'Content-type':'application/json','Accept':'text/plain','Authorization':'Basic '+ secret_key } })console.log(response)res.json(response.data) }catch(error){res.json({error:error.response?.data ?? error}) }}
Presenting the Apple Pay button
As demonstrated in the example above, you can present Apple Pay as an option in your client app by calling the ApplePay.configure function.
Please note that you need to provide the amount before calling this method. In a production environment, you also need to provide an HMAC value, similar to any other web component in your application.
PayEngine.ApplePay.configure({ merchantId: <YourMerchantID>, hmac: <HMAC>, amount: <AmountYouwanttochargei>, selector: "#applePayButton", buttonType: "pay", buttonColor: "default", callback: async function (response, error) {if (!error) {//Call Your backend server to execute sale API } else {// Handle error here } },});
Customizing Apple Pay button
You can customize the label and color of your Apple Pay Button by providing buttonType and buttonColor attributes in Apple Pay configuration object.