Editing Openai/69111a25-dab4-8000-8929-8d5e16a9da88 (section)

=== Replace YOUR_STRIPE_PUBLISHABLE_KEY with your Stripe publishable key (test). Serve this on HTTPS (required by Google Pay in production; for local dev use localhost and http is OK for testing). ===

<syntaxhighlight lang="html"><!-- index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Google Pay + Stripe Test</title>
  <script async src="https://pay.google.com/gp/p/js/pay.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
  <button id="googlePayButton">Pay with Google Pay (TEST)</button>

<script>
const stripePublishableKey = "YOUR_STRIPE_PUBLISHABLE_KEY"; // test publishable key
const stripe = Stripe(stripePublishableKey);

const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});

// PaymentDataRequest (gateway = "stripe")
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

const allowedCardNetworks = ["VISA","MASTERCARD","AMEX","DISCOVER"];
const allowedCardAuthMethods = ["PAN_ONLY","CRYPTOGRAM_3DS"];

// Tokenization spec for stripe gateway in test
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'stripe',
    'stripe:publishableKey': stripePublishableKey,
    'stripe:version': '2020-08-27' // set a supported stripe API version
  }
};

const cardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  },
  tokenizationSpecification: tokenizationSpecification
};

const paymentDataRequest = Object.assign({}, baseRequest, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPrice: '10.00',
    currencyCode: 'USD'
  },
  merchantInfo: {
    merchantName: 'Example, Inc.'
  },
  emailRequired: true
});

document.getElementById('googlePayButton').addEventListener('click', async () => {
  try {
    const paymentData = await paymentsClient.loadPaymentData(paymentDataRequest);
    // paymentData contains paymentMethodData.tokenizationData.token (gateway token)
    const token = paymentData.paymentMethodData.tokenizationData.token;
    // Send token to your server to create/confirm a Stripe PaymentIntent
    const res = await fetch('/charge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json'},
      body: JSON.stringify({
         token: token,
         amount: 1000,
         currency: 'usd',
         description: 'Test charge via Google Pay (stripe)'
      })
    });
    const json = await res.json();
    if (res.ok) {
      alert('Payment success: ' + JSON.stringify(json));
    } else {
      alert('Payment failed: ' + JSON.stringify(json));
    }
  } catch (err) {
    console.error('Google Pay failed', err);
    alert('Google Pay cancelled or failed: ' + err.statusMessage || err);
  }
});
</script>
</body>
</html>

</syntaxhighlight>

Notes:
* environment: 'TEST' forces use of Google test cards. Use only for integration verification.
* The response's token will be a Stripe-compatible gateway token if your tokenization spec is correct.
* Save this file as index.html, serve it, click the button to get the Google Pay flow in the browser.