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 CRYPTOGRAM_3DS only, it renders the Google Pay button.
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/web-components

import "@mediquo/web-components/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.

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 method: CRYPTOGRAM_3DS only (no PAN_ONLY / SCA step-up on backend).