Apple Pay and Google Pay are digital wallets that securely store 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 Apple Pay and Google Pay, credit card information is tokenized so it is not transmitted directly to the payee; only a verified token is sent, which the user authenticates on the device.

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

Surcharging and Apple Pay and Google Pay

Surcharging Apple Pay and Google Pay payment methods is not available. The PAN on a card is not exposed before a transaction and cannot be used to validate surcharging compliance (determining whether a transaction is credit or debit).

Because of this, Apple Pay and Google Pay are not available to merchants with surcharging enabled. On Stax-hosted and partner-hosted payment pages (including Stax.js integrations), the Apple Pay and Google Pay buttons are not displayed for surcharging-enabled merchants — no partner or merchant configuration change is needed, and the buttons reappear automatically if surcharging is later removed from the account. If a digital wallet payment is submitted to a surcharging-enabled merchant through the API, the request is rejected with an HTTP 422 response:

{
  "errors": [
    "Apple Pay and Google Pay are not available. Please use another payment method."
  ]
}

Merchants without surcharging enabled are unaffected, and card and ACH payments for surcharging-enabled merchants continue to work as usual.

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 are also available for card-present (CP) transactions for merchants who do not have surcharging enabled and are 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 the Configuring Apple Pay and Google Pay section.

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 that displays a payment flow using 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, customers will be able 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 is enabled for Apple Pay and Google Pay, Stax.js will 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 for Render Apple Pay and Google Pay.

A. By default, Stax.js 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 be charged as part of their request to tokenize, so it must be available before the payment buttons render. We do this programmatically by passing a price property as part of our StaxJs configuration, or by dynamically updating it with the StaxJs.setPrice(string) function.

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

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

C. (optional) Pass additional payload data.

Before the user clicks a button, you can optionally pass a transaction payload to Stax.js. using details.meta.

stax.on("digitalwallet_tokenize", function (details) {
  /* Send additional meta data
  
  details.meta = {
    reference: "ORDER-" + Date.now()., // Appears in receipts
    memo: "Digital wallet payment via custom integration",
    custom_field_1: "custom_value_1",
    custom_field_2: "custom_value_2",
    order_id: "12345",
    // Add any other custom fields you need
    };
  */
  stax
    .pay(details)

D. 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 }));