Google Pay (Web)
Google Pay lets a customer check out using a card already saved to their Google account, without typing card details into your form. The Google Pay button hands your site an encrypted token rather than a raw card number, so your systems aren't exposed to PCI scope for that data.
Important
Fat Zebra's own docs describe a Hosted Payment Page integration for Google Pay too, but their team confirmed this path isn't ready to rely on yet: their SDK support for showing wallet buttons inside the hosted page is still incomplete. Use the standalone integration in this guide instead.
Before Starting
- Nothing to enable in the ArtsPay dashboard: Google Pay is on by default for every merchant account, unlike Apple Pay.
- Get your
gatewayMerchantId(see Step 1 below). - For a production deployment, register a Google-issued
merchantIdby following Google's production deploy guidelines and agreeing to Google's terms of service. Not required for sandbox testing. - For testing, request access to Google's test-mode stub data group: Google Pay's test cards require a real Google account.
Download example code, grab one of our pre-built hosted payment pages in HTML, React, Vue or Next.js, with Node.js, Python, PHP or Ruby as thier back-ends, select below or explore the ArtsPay Github.
Step 1: Get your gatewayMerchantId
Email support@artspay.com and ask for it, or derive it yourself deterministically from your API token (The hex digest must be lowercase. Some languages emit uppercase hex by default, which will produce the wrong ID).
digest = OpenSSL::Digest::SHA256.hexdigest(api_token).downcasegateway_merchant_id = "#{username}-#{digest[0, 16]}"Step 2: Configure the gateway tokenization spec
When setting up the Google Pay PaymentDataRequest, point tokenizationSpecification at ArtsPay:
const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { gateway: 'fatzebra', gatewayMerchantId: '<your gatewayMerchantId>', },}Step 3: Render the button and request payment data
Follow Google's own Web integration checklist to render the button with google.payments.api.PaymentsClient and call loadPaymentData(). This part is entirely Google's SDK; ArtsPay only comes into play once you have the resulting payment token.
Step 4: Charge (or tokenize) the payment token
Send the token from paymentData.paymentMethodData.tokenizationData.token to your backend, then call Create a purchase using a wallet:
{ "amount": 1025, "currency": "AUD", "reference": "order_123", "wallet": { "type": "GOOGLE", "token": { "...": "the parsed JSON object from Google's tokenizationData.token" } }}To save the card for later instead of charging it immediately, use Tokenize a card with wallet credentials with the same wallet object.
Testing
Google Pay's test cards require a real Google account. Request access via the Google Pay test-mode stub data group. Set your Google Pay environment to match ArtsPay's:
| ArtsPay environment | Google Pay environment |
|---|---|
| Sandbox | ENVIRONMENT_TEST |
| Production | ENVIRONMENT_PRODUCTION |
Like Apple Pay, sandbox responses are cent-based: a request for $1.05 returns response code 05 (declined), letting you drive any outcome deterministically.
ArtsPay's API doesn't require a billing address to be sent with Google Pay transactions.
FAQ
Do I need to contact ArtsPay support to enable Google Pay?
No. It's on by default for every merchant account. You only need your gatewayMerchantId.
Where does gatewayMerchantId come from, and can it change?
It's deterministically derived from your API token and username. If your API token is ever rotated, the derived ID changes too, so regenerate it from the new token rather than hardcoding the old value.
Do I need to send a billing address?
No, the ArtsPay API doesn't require one for Google Pay transactions (this may change in future).
Can I use Google Pay for recurring or instalment payments?
Yes. Use the card_token returned from the customer's first Google Pay transaction for subsequent charges, following the same card-on-file rules as any other stored card. As with Apple Pay, acquirer support for recurring transactions varies.
Can I add this to the Hosted Payments Page instead of building a custom web integration?
Not currently. Fat Zebra's recommendation is to render the Google Pay button on your parent page, as in this guide, rather than inside the HPP/iframe — their SDK support for wallets inside the hosted page itself hasn't been completed yet.