partners

Create a Checkout Button

Create a Checkout button to set up and execute a payment inside your checkout flow. You will use the checkout.js JavaScript code to enable the payment button.

Note: Your site is the client and the server on which your site's code is housed is referred to as your server.

Integration steps

  1. Add a PayPal Checkout button to your site.
  2. Set up your client to call your server.
  3. Set up your server to call the PayPal API

Add a PayPal Checkout button to your site

On the page you want to render the PayPal Checkout button, add the following HTML:

<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
  paypal.Button.render({
    // Configure environment
    env: 'sandbox',
    client: {
      sandbox: 'demo_sandbox_client_id',
      production: 'demo_production_client_id'
    },
    // Customize button (optional)
    locale: 'en_US',
    style: {
      size: 'small',
      color: 'gold',
      shape: 'pill',
    },

    // Enable Pay Now checkout flow (optional)
    commit: true,

    // Set up a payment
    payment: function(data, actions) {
      return actions.payment.create({
        transactions: [{
          amount: {
            total: '0.01',
            currency: 'USD'
          }
        }]
      });
    },
    // Execute the payment
    onAuthorize: function(data, actions) {
      return actions.payment.execute().then(function() {
        // Show a confirmation message to the buyer
        window.alert('Thank you for your purchase!');
      });
    }
  }, '#paypal-button');

</script>

Set up your client to call your server

Set up a call for your client to call your server to authorize funds and execute the payment.

  1. Add a payment callback function to the button. This is called when a buyer clicks the button.
  2. In the payment callback function, call actions.request.post() with your server URL.
  3. Return res.id from the response with the payment ID returned from your server.
  4. Add an onAuthorize callback function to the button. This is called after the buyer authorizes the payment on PayPal.
  5. In the onAuthorize callback, call actions.request.post() with your server URL and pass the data.paymentID and data.payerID parameters to your server.
  6. Show the buyer a confirmation message.
<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<div id="paypal-button"></div>

<script>
  paypal.Button.render({
    env: 'sandbox', // Or 'production'
    // Set up the payment:
    // 1. Add a payment callback
    payment: function(data, actions) {
      // 2. Make a request to your server
      return actions.request.post('/my-api/create-payment/')
        .then(function(res) {
          // 3. Return res.id from the response
          return res.id;
        });
    },
    // 4. Add an onAuthorize callback
    onAuthorize: function(data, actions) {
      // 5. Make a request to your server
      return actions.request.post('/my-api/execute-payment/', {
        paymentID: data.paymentID,
        payerID:   data.payerID
      })
        .then(function(res) {
          // 6. Show the buyer a confirmation message.
        });
    }
  }, '#paypal-button');
</script>

Set up your server to call the PayPal API

Add your REST API credentials to your server and configure it to call the PayPal API to set up and execute payments.

  1. In the CLIENT and SECRET variables, add your sandbox credentials, your client ID and secret.
  2. Set up a URL to handle requests from your client. This URL is called by your client when the buyer clicks the PayPal button.
  3. Call the /v1/payments/payment REST API with your credentials and your payment details to create an payment ID.
  4. Return the payment ID to your client as JSON.
  5. Set up a URL to handle requests from your client. This URL is called by your client when the buyer approves the payment on PayPal.
  6. Get the paymentID and the payerID from the request body.
  7. Call /v1/payments/payment/{payment_id}/execute. Pass any updated values, such as total, shipping, and tax.
  8. Return a success response to your client.
var express = require('express');
var request = require('request');
// 1. Add your credentials:
// Add your client ID and secret
var CLIENT =
  'AUJoKVGO3q1WA1tGgAKRdY6qx0qQNIQ6vl6D3k7y64T4qh5WozIQ7V3dl3iusw5BwXYg_T5FzLCRguP8';
var SECRET =
  'EOw8LNwDhM7esrQ3nHfzKc7xiWnJc83Eawln4YLfUgivfx1LGzu9Mj0F5wlarilXDqdK9Q5aHVo-VGjJ';
var PAYPAL_API = 'https://api.sandbox.paypal.com';
express()
  // 2. Set up a URL to handle requests from the PayPal button
  .post('/my-api/create-payment/', function(req, res)
  {
    // 3. Call /v1/payments/payment to set up the payment
    request.post(PAYPAL_API + '/v1/payments/payment',
    {
      auth:
      {
        user: CLIENT,
        pass: SECRET
      },
      body:
      {
        intent: 'sale',
        payer:
        {
          payment_method: 'paypal'
        },
        transactions: [
        {
          amount:
          {
            total: '5.99',
            currency: 'USD'
          }
        }],
        redirect_urls:
        {
          return_url: 'https://www.mysite.com',
          cancel_url: 'https://www.mysite.com'
        }
      },
      json: true
    }, function(err, response)
    {
      if (err)
      {
        console.error(err);
        return res.sendStatus(500);
      }
      // 4. Return the payment ID to the client
      res.json(
      {
        id: response.body.id
      });
    });
  })
  // 5. Set up a URL to handle requests from the PayPal button.
  .post('/my-api/execute-payment/', function(req, res)
  {
    // 6. Get the payment ID and the payer ID from the request body.
    var paymentID = req.body.paymentID;
    var payerID = req.body.payerID;
    // 7. Call /v1/payments/payment/PAY-XXX/execute to finalize the payment.
    request.post(PAYPAL_API + '/v1/payments/payment/' + paymentID +
      '/execute',
      {
        auth:
        {
          user: CLIENT,
          pass: SECRET
        },
        body:
        {
          payer_id: payerID,
          transactions: [
          {
            amount:
            {
              total: '10.99',
              currency: 'USD'
            }
          }]
        },
        json: true
      },
      function(err, response)
      {
        if (err)
        {
          console.error(err);
          return res.sendStatus(500);
        }
        // 8. Return a success response to the client
        res.json(
        {
          status: 'success'
        });
      });
  }).listen(3000, function()
  {
    console.log('Server listening at http://localhost:3000/');
  });
// Run `node ./server.js` in your terminal

Next

Feedback