availability

See supported browsers and payment methods.

Before you get started

If you haven't already:

  • Review our Payment Request API Overview.
  • Make sure you have a fallback UI in place – such as Hosted Fields – in case the customer's browser doesn't support the Payment Request API.
  • Make sure your website is served over HTTPS (or localhost if testing in sandbox).

Our JavaScript PaymentRequestComponent is made to work in tandem with Google's Payment Request API reference. However, not all of the possible features and functionality are available through Braintree's implementation. If you have questions about what's available, please contact us.

Configure payment methods

Credit cards

If your merchant account is already configured to accept credit card payments, no other configuration is required.

Google Pay

In order to accept payments via Google Pay in sandbox or production, you will need to enable it in the Control Panel. As long as Google Pay is enabled, you complete the client-side integration, and the customer's browser supports it, Google Pay will be offered as a payment option.

If you already accept Android Pay, your account is already enabled to accept Google Pay. If not:

  1. Log into either your sandbox Control Panel or your production Control Panel
  2. Click on the gear icon in the top right corner
  3. Click Processing from the drop-down menu
  4. Scroll to the Payment Methods section
  5. Next to Google Pay, click the toggle to turn it on

If you already have Google Pay activated in your Control Panel, but need to get this payment method enabled for a particular merchant account, contact us.

PayPal via Google Pay

By default, all Google Pay transactions appear to be funded by cards and are processed like card transactions, even if the customer is using a PayPal account within Google Pay. However, if you have enabled PayPal payments in your Braintree integration, you can choose to identify when a customer is using a PayPal account within Google Pay and process those as PayPal transactions instead. To turn on this capability, contact us after you've enabled both PayPal and Google Pay in your Control Panel.

Load the component

Using direct links

If you're integrating with <script> tags, you can load the Payment Request component just like the required client component:

HTML
<script src="https://js.braintreegateway.com/web/3.48.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.48.0/js/payment-request.min.js"></script>

Using CommonJS (Browserify or Webpack)

You can require the Payment Request component just like the client component:

JavaScript
var client = require('braintree-web/client');
var paymentRequest = require('braintree-web/payment-request');

// ...

Initialize the component

Check browser capabilities and create Payment Request component

Check that window.PaymentRequest exists to ensure that Payment Request is supported and available in the browser.

JavaScript
if (window.PaymentRequest) {
  // This browser supports Payment Request
  // Display your Payment Request button
} else {
  // Browser does not support Payment Request
  // Set up Hosted Fields, etc.
}

Set up your Payment Request button

Add a button to your page that will trigger the Payment Request flow by creating a new Payment Request component.

note

The amount you specify in your client-side payment request object should reflect the actual amount you plan to authorize and submit for settlement. Transactions will still process in cases where the amount changes during order fulfillment.

var button = document.querySelector('#payment-request-button');

braintree.paymentRequest.create({
  client: clientInstance,
  googlePayVersion: 2
}, function (err, instance) {
  if (err) {
    // Handle errors from creating payment request instance
  }

  button.addEventListener('click', function (event) {
    var amount = '100.00';

    instance.tokenize({
      details: {
        total: {
          label: 'Total',
          amount: {
            currency: 'USD',
            value: amount
          }
        }
      }
    }, function (err, payload) {
      if (err) {
        // Handle errors from processing payment request
      }

      // Send payload.nonce to your server
    });
  });
});

Send the payment method nonce to your server

Like all Braintree SDK integrations, you will receive a payment method nonce when your customer successfully authorizes payment. Pass this nonce to your server, where you can use it to create a transaction.

If you've already integrated our SDKs to handle payment method nonces for other payment method types, you can generally reuse your existing implementation. See the reference for an example of a transaction sale call that will work with a payment method nonce associated with any payment method type.

important

Because each unique Google Pay transaction requires consent from the customer during the checkout flow, vaulting Google Pay payment methods for future transactions will result in declines and is not recommended. However, Google Pay cards can be used for recurring billing and split shipment transactions because the customer consents to future transactions during checkout. PayPal accounts from Google Pay cannot be vaulted.

See also