Apple Pay Module

Enable payments using Apple Pay on the Web for users using the Safari browser on Apple devices with sufficient security features.

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

Add the Apple Pay Module to your App

After you have set up the Comcarde JavaScript Client, you can add the apple-pay module to your website source.

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

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

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 Apple Pay functionality to your Comcarde JavaScript Client:

comcarde.client.create(
  {
    authorization: client - api - key, // 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 identifer of your button element
            style: 'black',
            type: 'buy',
          },
        })
        .then(function (applePayClientModule) {
          processApplePayPayment = function () {
            // <- the onclick method from the apple pay button placeholder
            applePayClientModule
              .startSession(
                {
                  // cannot be empty
                  label: 'A short order description',
                  // type should always be final
                  type: 'final',
                  // String of the total amount to be charged, must be greater than 0.00
                  amount: '10.00',
                },
                function (comcardeSingleUseToken, ApplePaySession) {
                  // onpaymentauthorized

                  /*
                   * send comcardeSingleUseToken to your server to be used as a applePay
                   * 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)
        })
    }
  }
)

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 to 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 wish the 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: 'A Shortened Order Description',
  type: 'final',
  amount: '10.00'
}
...

label (required): A quick description of what is being purchased.
- This is displayed to the end user as part of their checkout experience in Apple Pay
type (required): This should be set to final and not changed
amount (required): A decimal representation of the total checkout price (for example, 10.25)
- This is displayed to the end user as part of their checkout experience in Apple Pay