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 our Support team.

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. Navigate to Settings > Processing > Google Pay
  3. Click the toggle

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 our Support team.

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
Copy
Copied
<script src="https://js.braintreegateway.com/web/3.34.1/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.34.1/js/payment-request.min.js"></script>

Using CommonJS (Browserify or Webpack)

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

JavaScript
Copy
Copied
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
Copy
Copied
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.

Callbacks Promises
Copy
Copied
var button = document.querySelector('#payment-request-button');

braintree.paymentRequest.create({
  client: clientInstance
}, 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 can be used for recurring billing and split shipment transactions because the customer consents to future transactions during checkout.

See also

Still have questions?

If you can’t find an answer, contact our Support team