Apple Pay and Google Pay are digital wallets that securely stores a virtual token version of a debit and credit card, so consumers don’t need to enter card details or carry a physical card to make payments. In the case of Apple Pay and Google Pay, the credit card information is tokenized so that the card information is not transmitted directly to the payee, only a verified token, which the user authenticates on the device.

Customer information, including address information, is sent by Apple and Google, where Address Verification Service (AVS) is performed to validate customer details.

Surcharging and Apple Pay and Google Pay

Surcharging Apple Pay and Google Pay payment methods is not available. The PAN of a card is not exposed before a transaction and cannot validate surcharging compliance (determining credit vs. debit). If a customer pays a surcharging-enabled merchant with a digital wallet. The card will be treated as a non-surcharged transaction, and standard CNP rates configured within the account will apply.

Partners with Apple or Google Pay

Apple Pay and Google Pay are supported for non-recurring card not present (CNP) transactions for merchants that do not have surcharging enabled in Stax Pay’s Invoicing, Payment Links, Online Shopping Cart, and Stax.js payment flows. Apple Pay and Google Pay is also available for card present (CP) transactions for merchants that do not have surcharging enabled and using our semi-integrated terminal offerings. Transactions can still be voided and refunded as usual; however, their payment methods are not saved for future use on the merchant device.

Enabling Apple Pay and Google Pay

Apple Pay requires a signature file to be accessible on the payment site. Apple Pay also requires that Merchants be listed to use Apple Pay. To set up Apple Pay complete the following. For Google Pay, continue to Configuring Apple Pay and Google Pay.

Adding the Digital Signature file

Download the digital signature file from https://app.staxpayments.com/.well-known/apple-developer-merchantid-domain-association and paste it to the payment site location,

HTTPS://[merchantOrPartnerDomain]/.well-known/apple-developer-merchantid-domain-association where the [merchantOrPartnerDomain] is the URL of the payment site.

Copy the digital signature file to each domain displaying a payment flow with Stax JS or a white-labelled version of Stax Pay.

Adding Merchants to be able to use Apple Pay

Once the digital signature file is in the correct folder and accessible, determine which merchants and their IDs you would like to enable for Apple Pay.
Contact Customer or Partner Success and provide the following:
- The Merchant IDs you’d like to be enabled to use Apply Pay.
- Each payment domain that a merchant can use. For example, provide your payments page, https://pay.example.com.
Partner Success will add the merchants to Apple Pay and will contact you when Apple Pay is configured. Note: For additional information on Apple Pay digital signature file, see https://developer.apple.com/documentation/applepaywebmerchantregistrationapi/preparing_merchant_domains_for_verification.

Once digital wallets are enabled, it will be available for customers to pay via online payments.

For more information on how Apple Pay and Google Pay can be configured inside Stax Pay, review this Support Article.

Configuring Apple Pay and Google Pay

After a merchant account has been enabled for Apple Pay and Google Pay, Stax.js will be able to support these payments.

📘
Note: Creating a Stax sandbox will subscribe you to receive emails from Stax. You can opt out later.

On your HTML page, provide containers to Render Apple Pay and Google Pay in the HTML of the page.

A. By default, StaxJs will attempt to render each payment button in divs with the IDs “pay-with-apple” and “pay-with-google.”

<div class="group">
	<div id="pay-with-google"/></div>
	<div id="pay-with-apple"/></div>
</div>

Provide the total payment amount to Apple Pay and Google Pay.

A. Apple and Google Pay require the total price to charge as part of their request to tokenize, so it must be available before the payment buttons render. We do this programmatically by passing in a price property as part of our StaxJs configuration or by dynamically updating it through the Staxjs.setPrice(string) function.

const stax = new StaxJS(YourWebPaymentsToken, 
  {price:"1.00"}
  );

B. (optional) Attach a Handler to the digitalwallet_tokenize event.

C. In the following example, the event listens for the tokenized event and submits the details to our web payments service. You can insert your own logic here.


     const changePrice = function (e) ‹

          if (e &&  e-target && e. target. value) {

                stax setPrice(e.target.value);

           }

     };

     const priceinput = document.getElementById("'codepen-price");

     priceInput.addEventListener ("change", changePrice);

     priceInput.dispatchEvent (new Event("change", { bubbles: true }));