Overview

The Static Apply Pay Button solution integrates the ‘Apple Pay’ button into a payment-method gallery for the customer. If the ‘Apple Pay’ button is selected, the system handles the rest of the payment flow automatically.

1. Validate Apple Pay Compatibility

1. Add code to prevent the ‘Apple Pay’ button from being displayed 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.
   • applePayCapabilities – Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet that qualifies for web payments.

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

2. Add the Apple Pay Button to Your Payment Page

1. Add the Apple Pay button to the 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 the 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 include the following:
   &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.

Testing

Test the Apple Pay implementation in the Apple Pay Sandbox environment using the test card details provided.