Overview

This solution integrates the Apple Pay payment method button into your own payment page, and displays the payment method gallery for the customer to choose from. When “Apple Pay” is selected, the system handles the rest of payment flow automatically.

1. Validate Apple Pay Compatibility

1. Add code to prevent the Apple Pay button from being presented on devices that do not support Apple Pay or Apple devices, or that do not have a card in the vault.
   
   Apple provides ApplePaySession methods to validate Apple Pay compatibility on the site before the page loads.
   Examples of relevant ApplePaySession methods:

   • supportsVersion – Detects whether a web browser supports a particular Apple Pay version.
   • canMakePayments – Indicates whether the device supports Apple Pay.
   • canMakePaymentsWithActiveCard – Indicates whether the device supports Apple Pay and whether the user has an active card in their Wallet.

   For details, see the ApplePaySession class documentation on the Apple Pay JavaScript API site: https://developer.apple.com/reference/applepayjs/applepaysession.
   For example, add this code to validate for Apple Pay compatibility:

   if (window.ApplePaySession) {
       var merchantIdentifier = 'example.com.store';
       var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
       promise.then(function (canMakePayments) {
           if (canMakePayments) {
           } // Display Apple Pay Buttons here… });
       });
   }

2. Now use this structure to prevent the Apple Pay button from being presented on devices that do not support it.

2. Add the Apple Pay Button to Your Payment Page

1. Add the Apple Pay button to your payment page and include the following attributes in the tag:
   • For a fixed amount option (final transaction amount does not change):

     <button id="apple-pay-button" 
     trxStatus="<function_to_call_when_transaction_completes>">Pay</button>

   • For an open amount option:

     <button id="apple-pay-button" 
     trxPromoCode="AQ15Z" trxAmount="15" 
     trxStatus="<function_to_call_when_transaction_completes>">Pay</button>

     trxPromoCode is an optional parameter

     For details, see the ApplePaySession class documentation on the Apple Pay JavaScript API site: https://developer.apple.com/reference/applepayjs/applepaysession.

2. Include the following code in your payment page (link to the Nuvei live/production environment):

   <script>
    src = "https://secure.safecharge.com/ppp/purchase.do?
    time_stamp=[time_stamp] & currency=[currency] 
    & total_amount = [total_purchase_amount] 
    & item_name_X = [X_digit_ > 0;_name_of_the_item] 
    & item_amount_X = [X_digit_ > 0;_total_amount_to_pay_for_item_X] 
    & item_quantity_X = [X_digit_ > 0;_number_of_item_X] 
    & version = 3.0.0 & merchant_id = [your_merchant_ID] 
    & merchant_site_id = [your_merchant_site_ID] 
    & country = [country] & checksum = [calculated_checksum] 
    & openState = js & payment_method = ppp_ApplePay ">
   </script>

   The specific parameters related to Apple Pay are:
   &openState=js&payment_method=ppp_ApplePay

3. After the button is in place, load Nuvei JS.
   • The script looks for the button and attaches a function handle to it.
   • On button submission, the Nuvei handler triggers the sleeve.
   • Nuvei performs the following:
     • An identity check.
     • Retrieves the Apple Pay encrypted information from the device.
     • Makes the deposit transaction.
     • Calls the function_to_call_when_transaction_completes with the transaction result.

Congratulations! You have successfully completed the integration steps!

You can now test your Apple Pay implementation in the Apple Pay Sandbox environment using the test card details provided.

For details, see the Apple Pay Integration Testing topic.