checkout

Integrate PayPal Checkout Using the Braintree SDK

Integrate PayPal Checkout using the Braintree SDK to create and execute PayPal and credit card payments from native mobile apps. You can use the Braintree SDK for client and server integrations instead of integrating directly with the PayPal REST APIs.

Integration steps

The Braintree SDK integration includes these steps:

  1. Set up your client
    • Load the Braintree SDK.
    • Add your credentials.
    • Call PayPal to set up the payment.
    • Call your server to process the payment.
  2. Set up your server to call the Braintree SDK
    • Initialize the Braintree SDK.
    • Set up the payment.
    • Process the payment.

1. Set up your client

In this step, you set up your client to call your server.

Load the Braintree SDK

Download and install the Braintree SDK.

Add your credentials

Note: To integrate PayPal Checkout using the Braintree SDK, you use PayPal developer test account and credentials. If you don't already have a PayPal test account, see Create sandbox test accounts.

Set up the client option to call your server to fetch the Braintree client tokens. This acts as the credential for the button to set up payments.

Set up your client

Follow the Braintree documentation to set up your client for JavaScript SDK, iOS, or Android. Then continue with the steps on this page to set up and execute the payment.

Set up the payment

When your client is set up:

  1. Add a payment callback function to the button. When a buyer clicks the button, it calls this function.
  2. In the payment callback function, call actions.payment.create() to set up the payment.
  3. Return res.id from the response, with the Payment ID returned from your server.

Note: For available options, see Set up a payment in the Integration Guide.

Execute the payment

  1. Add an onAuthorize callback function to the button. This will be automatically called after the buyer authorizes the payment on PayPal.
  2. In the onAuthorize callback, call actions.payment.tokenize() to tokenize the payment and return a nonce
  3. Call your server with the nonce, to execute the payment
<div id="paypal-button"></div>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
  paypal.Button.render({
    braintree: braintree,
    // Add your credentials:
    // 1. Call your server to generate Braintree client tokens for each env
    client: {
      sandbox:    paypal.request.get('/my-api/client-token?env=sandbox'),
      production: paypal.request.get('/my-api/client-token?env=production')
    },
    // Set up the payment:
    // 1. Add a payment callback
    payment: function (data, actions) {
      // 2. Call actions.payment.create
      return actions.payment.create({
        payment: {
          transactions: [{
            amount: {
              total: '1.00',
              currency: 'USD'
            }
          }]
        }
      });
    },
    // Execute the payment:
    // 1. Add an onAuthorize callback
    onAuthorize: function (data, actions) {
      // 2. Call Braintree to tokenize the payment
      return actions.payment.tokenize()
        .then(function (data) {
          // 3. Call your server to execute the payment
          return paypal.request.post('/my-api/execute', {
            nonce: data.nonce
          });
        });
    }
  }, '#paypal-button');
</script>

2. Set up your server to call the Braintree SDK

In this step, you set up your server to call the Braintree SDK to set up and execute the payment.

Initialize the Braintree SDK

  1. Import the Braintree SDK module.
  2. Set up a gateway using your Braintree access token.
  3. Set up a URL to return a client token to the browser.

Note: For more information about generating a Braintree client token on different platforms and languages, see Generate a client token in the Braintree documentation.

Execute the payment

  1. Set up a URL to handle requests from the client. This URL is called by the client when the buyer approves the payment on PayPal.
  2. Get the nonce from the request body.
  3. Set up the parameters to execute the payment, including the nonce.
  4. Call the Braintree gateway to execute the payment.
  5. Return a success response to the client.

Note: For more information about processing a Braintree nonce on the server-side for different platforms, see Create a transaction in the Braintree documentation.

// Initialize the Braintree SDK:
// 1. Import the Braintree SDK module
var braintree = require('braintree');
var express = require('express');
express()
  // 3. Set up a URL to return a client token to the browser
  .get('/my-api/client-token', function (req, res) {
    // 2. Set up a gateway using your Braintree access token
    var gateway = braintree.connect({
      accessToken: (req.query.env === 'production')
        ? 'BRAINTREE_PRODUCTION_ACCESS_TOKEN'
        : 'BRAINTREE_SANDBOX_ACCESS_TOKEN'
    });

    gateway.clientToken.generate({}, function (err, response) {
      res.json(response.clientToken);
    });
  })
  // Execute the payment:
  // 1. Set up a URL to handle requests from the PayPal button
  .post('/my-api/execute-payment/', function (req, res) {
    // 2. Get the nonce from the request body
    var nonce = req.body.nonce;
    // 3. Set up the parameters to execute the payment
    var saleRequest = {
      amount: '13.37',
      paymentMethodNonce: nonce,
      options: {
        submitForSettlement: true
      }
    };
    // 4. Call the Braintree gateway to execute the payment
    gateway.transaction.sale(saleRequest, function (err, result) {
      if (err || !result.success) {
        return res.status(500).json({ status: 'error' });
      }
      // 5. Return a success response to the client
      return res.status(200)
        .json({ status: 'success', id: result.transaction.id });
    });
  })
  .listen(3000, function () {
    console.log('Server listening at http://localhost:3000/');
  });
  // Run `node ./server.js` in your terminal

Note: This example code uses Node.js, but you can use any web platform or language to call the PayPal API. To install node, see Node.js Downloads.

Next

To test and deploy your integration, see Test and go live in the Braintree documentation.

Feedback

Have feedback?

Let us know.