@google-pay/button-element

Google Pay web component button

This is the web component for the Google Pay button. This component can be used in standard HTML websites as well as websites built with many popular JavaScript frameworks.

Note that React and Angular developers should use the @google-pay/button-react and @google-pay/button-angular versions of this component.

Installation

npm install @google-pay/button-element

Example usage: HTML website

<div id="buttons">
  <google-pay-button environment="TEST" button-type="short" button-color="black"></google-pay-button>
</div>
<script type="module">
  import './node_modules/@google-pay/button-element/dist/index.js';

  const button = document.querySelector('google-pay-button');
  button.paymentRequest = {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['MASTERCARD', 'VISA'],
          billingAddressRequired: true,
        },
        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);
  });
</script>

More HTML examples can be found in the examples folder of this repository.

Try it out on StackBlitz.

Example usage: Vue website

<google-pay-button
  environment="TEST"
  button-type="buy"
  button-color="black"
  v-bind:paymentRequest.prop="{
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD']
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'example',
            gatewayMerchantId: 'exampleGatewayMerchantId'
          }
        }
      }
    ],
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '100.00',
      currencyCode: 'USD',
      countryCode: 'US'
    }
  }"
  v-on:loadpaymentdata="onLoadPaymentData"
  v-on:error="onError"
></google-pay-button>

More Vue examples can be found in the examples folder of this repository.

Try it out on StackBlitz.

Example usage: Svelte website

<google-pay-button
  environment="TEST"
  button-type="buy"
  button-color="black"
  paymentRequest={{
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD'],
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'example',
            gatewayMerchantId: 'exampleGatewayMerchantId',
          },
        },
      },
    ],
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '100.00',
      currencyCode: 'USD',
      countryCode: 'US',
    },
  }}
  on:loadpaymentdata={event => {
    console.log('load payment data', event.detail);
  }}
></google-pay-button>

More Svelte examples can be found in the examples folder of this repository.

Try it out on StackBlitz (note: limited browser support).

Documentation

Visit the Google Pay developer site for more information about integrating Google Pay into your website.

Properties

Callbacks/events

About this package

Note that this folder does not contain a package.json file. The package.json file is generated during the build process using the package-template.json where the version number is read from the package.json file defined in the root of this repository.