Google Pay: Drop In Guide

​

Show Universal Checkout

Google Pay is automatically presented to the customer when calling Primer.showUniversalCheckout.

try {
  await Primer.showUniversalCheckout(clientToken, {
    container: '#checkout-container',
    options,
    onCheckoutComplete({ payment }) {
      console.log('Checkout complete.', payment)
    },
  })
} catch (e) {
  // handle error
}

​

Customization

Check the Customization Guide to learn how to customize payment method buttons.

Additionally, you can style the Google Pay button by passing the following options:

const options = {
    /* Other options... */
    googlePay: {
        buttonType: 'long', // 'long' (default) | 'short'
        buttonColor: 'black', // 'default' (default) | 'black' | 'white',
    }
}

Capture billing address

By default, Google Pay does not capture the user’s billing address.

You can ask to capture the billing address by setting the option captureBillingAddress. The billing address is added to the client session before the payment is made.

const options = {
    /* Other options... */
    googlePay: {
        captureBillingAddress: true,
    }
}

​

Limitations

• Google Pay prevents the payment sheet from being presented inside an Android webview, whether it is your own, or within a third-party (e.g. Facebook browser). As a result, Google Pay cannot be made available in this type of browser.

​

Troubleshooting

The Google Pay button does not appear

Primer drop-in checkout runs a few checks to validate that the user can pay with Google Pay.

The Google Pay button does not appear if one of these conditions is met:

• Google Pay JS library fails to be downloaded. This usually comes from a network issue on the user side.
• Google Pay believes the browser is not supported. Under the hood, the SDK uses Google Pay’s function isReadyToPay to validate this.
• The country code or the currency code are missing from the client session.

​

Show Universal Checkout

Google Pay is automatically presented to the customer when calling Primer.instance.showUniversalCheckout.

class CheckoutActivity : AppCompatActivity() {
  private fun setupObservers() {
    viewModel.clientToken.observe(this) { clientToken ->
      showUniversalCheckout(clientToken)
    }
  }
  private fun showUniversalCheckout(clientToken: String) {
    Primer.instance.showUniversalCheckout(this, clientToken)
  }
}

​

Customization

Capture billing address

By default, Google Pay does not capture the user’s billing address.

You can ask to capture the billing address by setting the option captureBillingAddress. The billing address is added to the client session before the payment is made.

val settings = PrimerSettings(
    /* Other options... */
    paymentMethodOptions = PrimerPaymentMethodOptions(
            googlePayOptions = PrimerGooglePayOptions(captureBillingAddress = true)
    ),
)

Required Existing Payment Method

By default, Google Pay is presented to the user regardless of whether they have a supported card in their wallet.

You can now automatically hide Google Pay if the user’s wallet does not contain a supported card by setting existingPaymentMethodRequired to true.

val settings = PrimerSettings(
    /* Other options... */
    paymentMethodOptions = PrimerPaymentMethodOptions(
            googlePayOptions = PrimerGooglePayOptions(existingPaymentMethodRequired = true)
    ),
)

Collect email address

You can now collect user’s email address by setting emailAddressRequired to true.

val settings = PrimerSettings(
    /* Other options... */
    paymentMethodOptions = PrimerPaymentMethodOptions(
        googlePayOptions = PrimerGooglePayOptions(emailAddressRequired = true)
    ),
)

Collect shipping address and phone number

You can now collect user’s shipping address and phone number by setting shippingAddressParameters to PrimerGoogleShippingAddressParameters(phoneNumberRequired = true).

val settings = PrimerSettings(
    /* Other options... */
    paymentMethodOptions = PrimerPaymentMethodOptions(
        googlePayOptions = PrimerGooglePayOptions(
            shippingAddressParameters = PrimerGoogleShippingAddressParameters(phoneNumberRequired = true)
        )
    ),
)

Customize Google Pay Button Appearance

You can customize the Google Pay button’s appearance by setting the buttonOptions parameter within PrimerGooglePayOptions. This allows you to modify attributes such as the button’s type and theme.

val settings = PrimerSettings(
    /* Other options... */
    paymentMethodOptions = PrimerPaymentMethodOptions(
        googlePayOptions = PrimerGooglePayOptions(
            buttonOptions = GooglePayButtonOptions(
                buttonType = ButtonConstants.ButtonType.PAY,
                buttonTheme = ButtonConstants.ButtonTheme.DARK
            )
        )
    ),
)

For more details, refer to the Primer Google Pay Button Options documentation.

​

Show Universal Checkout

Google Pay is automatically presented to the customer when calling Primer.showUniversalCheckout.

const CheckoutScreen = async (props: any) => {
  const onUniversalCheckoutButtonTapped = async () => {
    try {
      await Primer.showUniversalCheckout(clientToken)
    } catch (err) {
      // handle error
    }
  }
}

​

Customization

Capture billing address

By default, Google Pay does not capture the user’s billing address.

You can ask to capture the billing address by setting the option isCaptureBillingAddress. The billing address is added to the client session before the payment is made.

let settings: PrimerSettings = {
    paymentMethodOptions: {
        /* Other options... */
        googlePayOptions: {
         isCaptureBillingAddressEnabled: true
        }
    },
};

Required Existing Payment Method

By default, Google Pay is presented to the user regardless of whether they have a supported card in their wallet.

You can now automatically hide Google Pay if the user’s wallet does not contain a supported card by setting isExistingPaymentMethodRequired to true.

let settings: PrimerSettings = {
    paymentMethodOptions: {
        /* Other options... */
        googlePayOptions: {
         isExistingPaymentMethodRequired: true
        }
    },
};

Collect email address

You can now collect user’s email address by setting emailAddressRequired to true.

let settings: PrimerSettings = {
    paymentMethodOptions: {
        /* Other options... */
        googlePayOptions: {
         emailAddressRequired: true
        }
    },
};

Collect shipping address and phone number

You can now collect user’s shipping address and phone number by setting shippingAddressParameters to { phoneNumberRequired: true }.

let settings: PrimerSettings = {
    paymentMethodOptions: {
        /* Other options... */
        googlePayOptions: {
         shippingAddressParameters: { phoneNumberRequired: true }
        }
    },
};

Customize Google Pay Button Appearance

You can customize the Google Pay button’s appearance by setting the buttonOptions parameter within IPrimerGooglePayOptions. This allows you to modify attributes such as the button’s type and theme.

let settings: PrimerSettings = {
    paymentMethodOptions: {
        /* Other options... */
        googlePayOptions: {
            buttonOptions: {
          buttonTheme: PrimerGooglePayButtonConstants.Themes.Dark,
          buttonType: PrimerGooglePayButtonConstants.Types.Checkout
        }
        }
    },
};

For more details, refer to the Primer Google Pay Button Options documentation.

​

Limitations

Google Pay is not compatible with iOS. The payment method button will not be presented.