availability

The Payment Request API is available in beta. 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 either localhost (for local development) or HTTPS. If your website is served over HTTP, the Payment Request tokenization will fail.

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.

Pay with Google

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

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

  1. Log into either your sandbox Control Panel or your production Control Panel
  2. Navigate to Settings > Processing > Pay with Google
  3. Click the toggle

If you already have Pay with Google 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.26.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.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
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.

JavaScript
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 Pay with Google transaction requires consent from the customer during the checkout flow, vaulting Pay with Google payment methods for future transactions will result in declines and is not recommended. However, Pay with Google 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.