Package Exports

@google-pay/button-element

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@google-pay/button-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: 'stripe',
          },
        },
      },
    ],
    merchantInfo: {
      merchantId: '12345678901234567890',
      merchantName: 'Demo Merchant',
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '100.00',
      currencyCode: 'USD',
      countryCode: 'US',
    },
    shippingAddressParameters: {},
  };
  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 JSFiddle.

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': 'stripe'
          }
        }
      }
    ],
    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 JSFiddle.

Other examples

Additional examples included:

Svelte

Documentation

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

Properties

Property	Type	Remarks
buttonColor	`"default" \| "black" \| "white"`	Optional. `"default"`/`"black"` buttons are suitable to be used on light colored backgrounds, with `"white"` being appropriate for dark colored backgrounds. Default value `"default"`.
buttonSizeMode	`"static" \| "fill"`	Optional. `"static"` buttons will be sized according to the translated `buttonType`. `"fill"` buttons will be styled according the the element's size. Use this mode when resizing the button with CSS `width` and `height` properties. Default value `"static"`.
buttonType	`"buy" \| "plain" \| "donate" \| "long" \| "short"`	Optional. `"buy"` and `"donate"` display their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The `"plain"` button only displays the Google Pay logo. `"long"` and `"short"` button types have been renamed to `"buy"` and `"plain"`, but are still valid button types for backwards compatability. Default value `"buy"`.
environment	`"TEST" \| "PRODUCTION"`	Required. The Google Pay environment to target. Note: in the `"TEST"` environment, fake payment credentials are returned. In order to use the `"PRODUCTION"` environment, your website must be registered with Google Pay. This can be done through the Google Pay Business Console.
existingPaymentMethodRequired	`boolean`	Optional. When set to `true` (and `environment` is `Production`), the Google Pay button will only be displayed if the user already has an existing payment that they can use to make a purchase. Default value `false`.
paymentRequest	`PaymentDataRequest`	Required. Request parameters that define the type of payment information requested from Google Pay. See `PaymentDataRequest` reference for more information.

Callbacks/events

Callback	Remarks
onCancel cancelCallback	Invoked when a user cancels or closes the Google Pay payment sheet. Also raised as event `"cancel"`.
onError errorCallback	Invoked an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet. Also raised as event `"error"`.
onPaymentAuthorized paymentAuthorizedCallback	Invoked when a user chooses a payment method. This callback should be used to validate whether or not the payment method can be used to complete a payment. This would be typically used to perform pre-authorization to ensure that the card is valid and has sufficient funds. Note that in order to use this callback `paymentRequest.callbackIntents` must include `PAYMENT_AUTHORIZATION`. See payment authorization reference for more information.
onPaymentDataChanged paymentDataChangedCallback	Invoked when payment the user changes payment data options including payment method, shipping details, and contact details. This callback can be used to dynamically update `transactionInfo` when payment details, shipping address, or shipping options change. Note that in order to use this callback `paymentRequest.callbackIntents` must include either `SHIPPING_ADDRESS` or `SHIPPING_OPTION`. See payment data changed reference for more information.
onReadyToPayChange readyToPayChangeCallback	Invoked when the user's `isReadyToPay` state changes. This callback can be used to change the application's behaviour based on whether or not the user is ready to pay. Also raised as event `"readytopaychange"`.
onLoadPaymentData loadPaymentDataCallback	Invoked when a user has successfully nominated payment details. This callback receives the `PaymentData` response which includes the `PaymentMethodData` that can be sent to supported payment processors. Also raised as event `"loadpaymentdata"`.

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.