Skip to main content
Version: 6.14

Google Pay

Overview​

Renders a Google Pay button for eligible devices/browsers and orchestrates the Google Pay flow. Designed to be used within justifi-modular-checkout.

Usage​

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>justifi-google-pay</title>

<script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.13.0/dist/webcomponents/webcomponents.esm.js"></script>

<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.13.0/dist/webcomponents/webcomponents.js"
></script>

</head>

<body>
<justifi-modular-checkout
  auth-token="authToken"
  checkout-id="ch_123"
>
  <justifi-google-pay />
  <justifi-checkout-summary />
</justifi-modular-checkout>
</body>
</html>

Props, Events & Methods​

NameTypeRequiredDefaultDescription
environment"PRODUCTION" | "TEST"No—If not provided, the environment will be determined by the account mode: 'test' or 'live'.
merchant-display-namestringNo"JustiFi Checkout"
use-native-payment-requestbooleanNofalseSet to true when embedding inside an Android WebView so the iframe uses the
W3C Payment Request API (native Google Pay sheet) instead of pay.js's
loadPaymentData popup, which Google blocks in WebViews (OR_BIBED_15).

Events​

  • googlePayStarted: Fires when the user clicks the Google Pay button, immediately before the payment sheet opens.
  • googlePayCompleted: Fires when payment completes; includes success status, payment method ID, card network, and card details (last 4 digits).
  • googlePayCancelled: Fires when the user dismisses the Google Pay sheet.

Event Payloads​

googlePayCompleted (success)

{
  success: true,
  paymentMethodId: "pm_xxx",  // JustiFi payment method ID
  cardNetwork: "VISA",        // Card network (VISA, MASTERCARD, etc.)
  cardDetails: "1234"         // Last 4 digits
}

googlePayCompleted (error)

{
  success: false,
  error: {
    code: "PAYMENT_FAILED",
    message: "Error description"
  }
}

Flow​

  1. Component checks device/browser eligibility for Google Pay
  2. If eligible, Google Pay button renders
  3. User clicks button → googlePayStarted fires → Google Pay sheet opens
  4. User completes payment → googlePayCompleted event fires with paymentMethodId
  5. Modular checkout automatically completes the checkout

Theming & Layout​

  • Styling is intentionally limited to keep Google Pay compliance.
  • Button renders at 48px height, 100% width.
PartDescriptionDOM target
::part(skeleton)—