mq-google-pay-checkout

Google Pay checkout for top-level pages on checkout.mediquo.com. Uses the Google Pay JS SDK with Global Payments gateway tokenization.

<mq-google-pay-checkout> handles Google Pay on top-level pages. The host page must load the Google Pay JS SDK before mounting the element. The component calls isReadyToPay, renders Google's official pay button, captures the gateway token via loadPaymentData, authorizes it with the backend, and emits the same outcome events as <mq-checkout>.

Use it from the checkout shell at /google-pay, or mount it directly in your own top-level page.

How it works

The host loads the Google Pay JS SDK (script-src + CSP must allow pay.google.com).
You pass merchant-id (Google Pay merchant id), gateway-merchant-id (Global Payments / Realex merchant id), session-id (backend order_id), and payment request metadata.
<mq-google-pay-checkout> authenticates (api-key + token).
After isReadyToPay with PAN_ONLY + CRYPTOGRAM_3DS, it renders the Google Pay button. The component waits for an async-loaded pay.js instead of failing when it is still in flight.
On click: loadPaymentData → POST /payments/v1/google-pay/authorize with tokenizationData.token → outcome events.

There is no merchant-validation step (unlike Apple Pay). Google Pay merchant and gateway configuration live in the checkout shell env vars.

Dependencies

Does not require <mq-theme-provider> — the button uses Google's SDK styling.

Does not require <mq-query-client-provider> or <mq-socket-provider>.

Does require the host to load the Google Pay JS SDK. The component never injects third-party scripts.

Installation

npm install @mediquo/elements

import "@mediquo/elements/mq-google-pay-checkout";

Usage

<script async src="https://pay.google.com/gp/p/js/pay.js"></script>

<mq-google-pay-checkout
  env="production"
  api-key="<your-api-key>"
  token="<your-token>"
  locale="es_ES"
  merchant-id="<google-pay-merchant-id>"
  gateway-merchant-id="<global-payments-merchant-id>"
  merchant-name="MediQuo"
  session-id="<order-id>"
  amount="29.99"
  currency="EUR"
  country="ES"
  label="Consulta"
></mq-google-pay-checkout>

Attributes

Name	Type	Required	Description
`env`	`string`	No	`"development"` → Google Pay `TEST`; `"production"` → `PRODUCTION`.
`api-key`	`string`	Yes	MediQuo API key.
`token`	`string`	Yes	MediQuo user token.
`locale`	`string`	No	`es_ES`, `en_US`, `pt_PT`, `de_DE`, `ca_ES`. Default `es_ES`.
`merchant-id`	`string`	Yes	Google Pay merchant identifier.
`gateway-merchant-id`	`string`	Yes	Global Payments gateway merchant id for tokenization.
`merchant-name`	`string`	No	Display name on the Google Pay sheet. Falls back to `label`.
`session-id`	`string`	Yes	Backend order id (`order_id`).
`amount`	`string`	Yes	Decimal string for the total.
`currency`	`string`	Yes	ISO 4217 code (e.g. `EUR`).
`country`	`string`	Yes	ISO 3166-1 alpha-2 code (e.g. `ES`).
`label`	`string`	Yes	Line item label.

Events

Event	Detail	Description
`payment-success`	`{ sessionId: string; reference: string }`	Payment authorized.
`payment-denied`	`{ sessionId: string }`	Backend rejected the payment (HTTP 400 or `status: denied`).
`payment-error`	`{ reason: "auth" \| "unsupported" \| "authorize" \| "cancelled" }`	Auth failure, unsupported device, authorization failure, or user cancelled. `unsupported` also fires when the availability check fails, so the host can fall back to card instead of waiting for a payment that cannot happen.

Platform requirements

Top-level page on checkout.mediquo.com (or another origin registered in Google Pay & Wallet Console).
Host must load Google Pay JS and configure CSP for pay.google.com.
Auth methods: PAN_ONLY + CRYPTOGRAM_3DS. CRYPTOGRAM_3DS alone only matches device-tokenized cards, so isReadyToPay resolves to false on every desktop browser and on Android without a card in Google Wallet — which surfaced as "Google Pay no está disponible". PAN_ONLY covers cards stored in the Google Account.