Apple Pay

PayEngine supports partners in enabling Apple Pay as a payment method in their application.

To test Apple Pay in our sandbox environment, configure your sandbox wallet according to Apple's testing guidelines.

Enabling Apple Pay for your account

Please contact your PayEngine support representative to enable Apple Pay for your account.

Once Apple Pay support is enabled in your account, you can proceed with the merchant domain verification process to enable Apple Pay for your merchant. Please note that Apple Pay requires domain verification for each merchant. Step 1 - Select merchant from your partner portal and go to settings

Step 2 - Select Add Domain from the Apple Pay Section

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.

Using Apple Pay in your Web Application

For native app integration, please contact your PayEngine assigned solution engineer for further implementation details

To use Apple Pay in your web application, PayEngine must first verify the domain as described in the previous section.

PayEngine simplifies presenting Apple Pay during the checkout process in your web application. If you are already using PayEngine's JS library, you only need to call an additional function to display the Apple Pay button.

To learn more about PayEngine JS library please see our guide

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apple Pay Demo</title>
    <script src="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>
    <div id="button"></div>
    <script>
      const merchantId = "<Your Mercchant ID>";
      const amount = 10.00;

      //--> Send data to your backend after receving Apple Pay Token
      const submit = (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 PayEngine library and Apple Pay
      window.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 PayEngine ccsale API
              submit(response.token);
            } else {
              //Handle Apple Pay Authorization Error
            }
          },
        });
      };
    </script>
  </body>
</html>

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: <Your Merchant ID>,
  hmac: <HMAC>,
  amount: <Amount You want to charge i>,
  selector: "#applePayButton", 
  buttonType: "pay", 
  buttonColor: "default",
  callback: async function (response, error) {
    if (!error) {
        //Call Your backend server to execute PayEngine sale API
      );
      // Process saleResponse as per your business needs
    } 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.

buttonType: 'buy', // "add-money" | "buy" | "book" | "check-out" | "continue" | "contribute" | "donate" | "order" | "pay" | "plain" | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up'
buttonColor: 'default', // "default" | "black" | "white"

Last updated