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 that runs your site's code is the 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

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

<div id="paypal-button">
<script>
  (function () {
    paypal.Button.render({
      env: 'production', // Or 'sandbox',
      payment: function (data, actions) {
      // You'll configure this in the following steps.
      },
        onAuthorize: function (data, actions) {
          return actions.redirect();
        },
        onCancel: function (data, actions) {
          return actions.redirect();
        },
        onError: function (error) {
          // You will want to handle this differently
          return alert(error);
        }
    }, '#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 order 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.orderID parameter to your server.
  6. Show the buyer a confirmation message.

Example

Tip: See an example of the button function in the PayPal Demo code.

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

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

<script>
  paypal.Button.render({
    env: 'sandbox', // Or 'production'
    // 1. Add a payment callback
    payment: function(data, actions) {
      // 2. Make a request to your server
      return actions.request.post('/my-api/create-order/')
        .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/capture-payment/', {
        OrderID: data.orderID,
      })
        .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 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 v2/checkout/orders REST API with your credentials and your payment details to create an order ID.
  4. Return the order 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 orderID from the request body.
  7. Call /v2/checkout/orders/{order_id}/capture. Pass any updated values, such as total, shipping, and tax.
  8. Return a success response to your client.

Example

var express = require('express');
var request = require('request');

// 1. Add your credentials: 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-order/', function(req, res) {
    // 3. Call /v2/checkout/orders to set up the payment
    request.post(PAYPAL_API + '/v2/checkout/orders', {
      auth: {
        user: CLIENT,
        pass: SECRET
      },
      body: {
        intent: 'sale',
        payer: {
          payment_method: 'paypal'
        },
        transactions: [{
          amount: {
            total: '5.99',
            currency: 'USD'
          }
        }],
        redirect_urls: {
          return_url: 'https://example.com',
          cancel_url: 'https://example.com'
        }
      },
      json: true
    }, function (err, response) {
        if (err) {
          console.error(err);
          return res.sendStatus(500);
        }

        // 4. Return the order 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/capture-payment/', function(req, res) {
    // 6. Get the order ID from the request body.
    var OrderID = req.body.id;

    // 7. Call /v2/checkout/orders to finalize the payment.
    request.post(PAYPAL_API + '/v2/checkout/orders/' + orderID + '/capture', {
      auth: {
        user: CLIENT,
        pass: SECRET
      },
      body: {
        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