Payment Request API

Setup and Integrationanchor

availability

See supported browsers and payment methods.

Before you get startedanchor

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 methodsanchor

Credit cardsanchor

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

Google Payanchor

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 Payanchor

To accept PayPal payments via Google Pay, make sure you have enabled both PayPal and Google Pay in the Control Panel.

Load the componentanchor

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

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

Using CommonJS (Browserify or Webpack)anchor

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

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

// ...

Initialize the componentanchor

Check browser capabilities and create Payment Request componentanchor

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

  1. 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 buttonanchor

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.

  1. Callbacks
  2. Promises
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 serveranchor

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