Google Pay React

HTML

<script src="https://unpkg.com/@google-pay/button-react@latest/dist/index.umd.js"></script>

<div id="app"></div>

CSS

.buttons > * {
  margin: 4px;
}

React

function App() {
	const paymentRequest = {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['MASTERCARD', 'VISA'],
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'example',
            gatewayMerchantId: 'exampleGatewayMerchantId',
          },
        },
      },
    ],
    merchantInfo: {
      merchantId: '12345678901234567890',
      merchantName: 'Demo Merchant',
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '100.00',
      currencyCode: 'USD',
      countryCode: 'US',
    },
  };
  
  function handleLoadPaymentData(paymentData) {
  	console.log('load payment data', paymentData);
  }
  
	return (
  	<div className="buttons">
      <GooglePayButton
        paymentRequest={paymentRequest}
        onLoadPaymentData={handleLoadPaymentData}
        />
      <GooglePayButton
        buttonType="short"
        paymentRequest={paymentRequest}
        onLoadPaymentData={handleLoadPaymentData}
        />
      <GooglePayButton
        buttonColor="white"
        paymentRequest={paymentRequest}
        onLoadPaymentData={handleLoadPaymentData}
        />
      <GooglePayButton
        buttonType="short"
        buttonColor="white"
        paymentRequest={paymentRequest}
        onLoadPaymentData={handleLoadPaymentData}
        />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))