Nefarious Plastic Mannequins

    @google-pay/button-react
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    Google Pay React button

    This is the React component for the Google Pay button.

    Installation

    npm install @google-pay/button-react

    Example usage

    <GooglePayButton
      environment="TEST"
      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',
        },
      }}
      onLoadPaymentData={paymentRequest => {
        console.log('load payment data', paymentRequest);
      }}
    />

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

    Try it out on StackBlitz, or see it in action with a React sample store (source code).

    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".

    buttonLocale

    string

    Optional.

    This ISO 639-1 code represents the desired button language.

    Supported locales include en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk, and zh.

    Default value is determined by the browser/operating system locale.

    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

    "book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "long" | "short"

    Optional.

    Displays 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".

    className

    string

    Optional.

    The CSS class name to apply to the element.

    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.

    style

    CSSProperties

    Optional.

    The CSS style attributes to apply to the element.

    Callbacks

    Callback Arguments Remarks

    onCancel

    reason

    Invoked when a user cancels or closes the Google Pay payment sheet.

    onClick

    event

    Invoked when the Google Pay button is clicked, before the payment sheet is displayed.

    Display of the payment sheet can be prevented by calling event.preventDefault().

    onError

    reason

    Invoked when an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet.

    onLoadPaymentData

    paymentData

    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.

    onPaymentAuthorized

    paymentData

    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

    intermediatePaymentData

    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

    result

    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.

    Note that when existingPaymentMethodRequired is true, you will need to inspect both result.isReadyToPay and result.paymentMethodPresent to determine if the user isReadyToPay and has a paymentMethodPresent. Alternatively, result.isButtonVisible can be used to determine whether or Google Pay button will be displayed.

    existingPaymentMethodRequired is taken into account with result.isButtonVisible.

    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.

    Install

    npm i @google-pay/button-react

    DownloadsWeekly Downloads

    4,747

    Version

    3.0.0

    License

    Apache-2.0

    Unpacked Size

    92.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • google-wombot