Google Pay Custom Element

HTML

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

<google-pay-button></google-pay-button>
<google-pay-button button-type="short"></google-pay-button>
<google-pay-button button-color="white"></google-pay-button>
<google-pay-button button-type="short" button-color="white"></google-pay-button>

JavaScript

const buttons = document.querySelectorAll('google-pay-button');

for (const button of buttons) {
  button.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',
    },
  };

  button.addEventListener('loadpaymentdata', event => {
    console.log('load payment data', event.detail);
  });
}