Enable Apple Pay on the Web for users in Safari on Apple devices with sufficient security features.

🚧
Please check for Apple Pay availability on your customers device before attempting to load this module. You may encounter errors if used in a non-supported device.

Add the Apple Pay Module to your checkout

After you have set up the Comcarde JavaScript Client, you can add the apple-pay pluggable module to your checkout page.

<script src="https://sandbox-assets.comcarde.com/web/v2/js/apple-pay.min.js"></script>

https://assets.comcarde.com/web/v2/js/apple-pay.min.js

Next, insert a placeholder element to your page and give it a unique ID so the apple-pay module can populate it with an Apple Pay button, for example:

<div id="apple-pay-button" onclick="processApplePayPayment()"></div>

The onclick event is a JavaScript method that will initiate the payment, as shown below. Apple enforces this to be a user's interaction.

Finally, add the Apple Pay functionality to your Comcarde JavaScript Client:

comcarde.client.create(
  {
    authorization: clientApiKey, // your client API Key
  },
  function (clientErr, clientInstance) {
    /*
     * Optional (but recommended): A conditional statement to ensure the users browser
     * supports Apple Pay: i.e Safari only
     * The SDK will throw a non-breaking validation error within an unsupported browser
     * without this conditional, and show a short message in the place where the Apple
     * Pay button would render.
     *
     * See Checking for Apple Pay Availability -
     * https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability
     */
    if (window.ApplePaySession) {
      comcarde.applePay
        .create({
          client: clientInstance,
          button: {
            container: 'apple-pay-button', // unique identifier of your button element
            style: 'black',
            type: 'buy'
          },
        })
        .then(function (applePayClientModule) {
          processApplePayPayment = function () {
            // <- the onclick method from the apple pay button placeholder
            applePayClientModule
              .startSession(
                {
                  label: 'Example Industries LLC', // Your merchant/trading name
                  type: 'final', // Always "final" 
                  amount: '10.00', // Transaction amount
                  currencyCode: 'GBP' // Currency code for the transaction. If null defaults to retail channel configuration value.
                },
                function (comcardeSingleUseToken, ApplePaySession) {
                  // onpaymentauthorized

                  /*
                   * Send comcardeSingleUseToken to your server to be used as an
                   * Apple Pay Payment Instrument in a payment request.
                   */
                  console.log('applePay token: ' + comcardeSingleUseToken)

                  /*
                   * Finally, update the ApplePaySession with the outcome of the server
                   * side payment request. This completes the payment authorization with
                   * a result.
                   */
                  ApplePaySession.completePayment(
                    serverPaymentSuccess
                      ? ApplePaySession.STATUS_SUCCESS
                      : ApplePaySession.STATUS_FAILURE
                  )
                }
              )
              .then(function (applePayPaymentRequest) {
                applePayClientModule
                  .session(applePayPaymentRequest)
                  .then(function (applePaySession) {
                    applePaySession.onerror = function (applePaySessionError) {
                      // TODO: Handle the applePaySessionError Event
                      console.error(applePaySessionError)
                    }
                    applePaySession.oncancel = function (
                      applePaySessionCancelled
                    ) {
                      // TODO: Handle the applePaySessionCancelled Event
                      console.warn(applePaySessionCancelled)
                    }
                  })
                  .catch(function (applePayClientModuleSessionError) {
                    // TODO: Handle the applePayClientModuleSessionError
                    console.error(applePayClientModuleSessionError)
                  })
              })
              .catch(function (applePayClientError) {
                // TODO: Handle the applePayClientError
                console.error(applePayClientError)
              })
          }
        })
        .catch(function (applePayClientModuleError) {
          // TODO: Handle the applePayClientModuleError
          console.error(applePayClientModuleError)
        })
    }
  }
)

👍
Use our GET Apple Pay Token Metadata endpoint to decrypt transaction data. You'll get instant access to payment details and BIN lookup metadata derived from the customer’s DPAN

Apple Pay Create Method

The Apple Pay .create() method expects an object as shown below:

...
comcarde.applePay.create({
   client: clientInstance,
   button: {
      container: 'apple-pay-button',
      style: 'black',
      type: 'buy'
   }
});
...

The object has both required and optional parameters, as detailed below:

client (required): This is an instance of the comcarde client used in all optional payment modules.
button (required): This is an object that will tell the SDK how and where you want the button to render
button.container (required): This is the id attribute of the element you wish to have the Apple Pay button render into. This should match the id attribute of the HTML placeholder element you added earlier.
button.style (optional): This is the style type of button you wish to support. Accepted options are:
- black (default)
- white
- white-with-line
button.type (optional): This is the type of button you want to use. The accepted options are:
- plain
- add-money
- book
- buy (default)
- check-out
- contribute
- donate
- order
- reload
- rent
- set-up
- subscribe
- support
- tip
- top-up

Apple Pay Start Session Method

The Apple Pay .startSession() method will initiate a new Apple Pay session:

...
applePayClientModule.startSession(
  {
    label: 'Example Industries LLC', // Your merchant/trading name
    type: 'final', // Always "final" 
    amount: '10.00', // Transaction amount
    currencyCode: 'GBP' // Currency code for the transaction. If null defaults to retail channel configuration value.
                }
...

label (required): Your merchant legal or trading name, as known by the customer
type (required): Set to final.
amount (required): A decimal representation of the total checkout price (for example, 10.00)
currencyCode: The currency you wish to process the transaction in. Provided in ISO 4217 alphabetic code format. E.g. GBP, EUR, USD.

📘
If omitted from the method currencyCode will default to the value set in your retail channel configuration.