Apple Pay

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.

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 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.

<!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 our library and Apple Pay
      window.onload = () => {
        PayEngine.ApplePay.configure({
          merchantId: merchantId,
          hmac: <HMAC>
          amount: amount,
          selector: "#button",
          buttonType: "buy", 
          buttonColor: 'black',
          //Remove the lines below if contact fields are not reqquired
          requiredShippingContactFields: [],
          requiredBillingContactFields: [],
          // 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 API
              submit(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 tokens
exports.charge = async function (req, res) {
    try{
        const response = await axios.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})
    }
}

To erquest billing and/or shipping contact information associated with Apple Wallet please include the options in the requiredShippingContactFields and requiredBillingContactFields arrays.

"requiredShippingContactFields": [
    "postalAddress",
    "name",
    "phoneticName",
    "phone",
    "email"
]

You will receive the customer's name when you request postalAddress. If you don't need the customer's address, you can request the name contact field directly.

"requiredBillingContactFields": [
    "postalAddress"
]

You will receive the postal address as well as the user's name after the user authorizes the transaction.

The source of the information may be the user's Me contact card, the back of credit card in Wallet, or may be entered by the user directly into the payment sheet.

Sample Token Response

{
  "merchantId": "<YOUR MID>",
  "metadata": {
    "billingContact": {
      "addressLines": ["123 Main Street"],
      "administrativeArea": "TX",
      "country": "United States",
      "countryCode": "US",
      "familyName": "Doe",
      "givenName": "John",
      "locality": "Houston",
      "postalCode": "88065",
      "subAdministrativeArea": "",
      "subLocality": ""
    }
  },
  "token": "pe_sandbox_**************"
}

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 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.

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"

PreviousRegistering a cloud connected device NextApple Pay in your native app

Last updated 23 days ago