Set up payment buttons

Use the PayPal JavaScript SDK to set up payment buttons to move money from buyers to sellers on your website.

On this page

Know before you code

  • You must be an approved partner to use this integration.
  • You must complete seller onboarding before you use this integration.
  • You must have an access token.
  • To run test transactions, set client-id to your sandbox client ID.
  • Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal. For more information, contact business customer support through paypal.com or by calling 0800 358 7929.

Step 1: Add payment buttons to accept payments

Add the following PayPal JavaScript SDK code in a script tag on your webpage to render payment buttons.

<script src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID"></script>

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

<script>
  paypal.Buttons({
    createOrder: function (data, actions) {
      return fetch('/my-server/create-order', {
        method: 'POST'
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        return data.id;
      });
    },
    onApprove: function (data, actions) {
      return fetch('/my-server/capture-order/' + data.orderID, {
        method: 'POST'
      }).then(function(res) {
        if (!res.ok) {
          alert('Something went wrong');
        }
      });
    }
  }).render('#paypal-button-container');
</script>

You must include the createOrder and onApprove functions for the buttons to work.

  • createOrder is called when the buyer clicks on one of the payment buttons. This function must return an order ID to render the checkout flow. In this example, createOrder calls your server to get the order ID.
  • onApprove is called when the buyer approves the order. This happens when the buyer successfully completes the checkout flow. In this example, onApprove calls your server to make a capture order call.

Step 2: Set up your server to create an order

When your buyer clicks one of the payments buttons, the buttons call your server to create an order. To set up your server to create an order, copy the following code and modify it.

Sample request

curl -v -X POST https://api.sandbox.paypal.com/v2/checkout/orders \
 -H 'Content-Type: application/json' \
 -H 'Authorization: Bearer Access-Token' \
 -H 'PayPal-Partner-Attribution-Id: BN-Code' \
 -d '{
 "intent": "CAPTURE",
 "purchase_units": [{
   "amount": {
     "currency_code": "USD",
     "value": "100.00"
   },
   "payee": {
     "email_address": "seller@example.com"
   },
   "payment_instruction": {
     "disbursement_mode": "INSTANT",
     "platform_fees": [{
       "amount": {
         "currency_code": "USD",
         "value": "25.00"
       }
     }]
   }
 }]
}'
var express = require('express');
var request = require('request');

express()
    .post('/my-server/create-order', function(req, res) {
        request.post('https://api.sandbox.paypal.com/v2/checkout/orders', {
            headers: {
                Content-Type: "application/json",
                Authorization: "Bearer Access-Token",
                PayPal-Partner-Attribution-Id: BN-Code
            },
            body: {
                "intent": "CAPTURE",
                "purchase_units": [{
                    "amount": {
                        "currency_code": "USD",
                        "value": "100.00"
                    },
                    "payee": {
                        "email_address": "seller@example.com"
                    },
                    "payment_instruction": {
                        "disbursement_mode": "INSTANT",
                        "platform_fees": [{
                            "amount": {
                                "currency_code": "USD",
                                "value": "25.00"
                            }
                        }]
                    }
                }],
            },
            json: true
        }, function (err, response, body) {
            if (err) {
                console.error(err);
                return res.sendStatus(500);
            }
            res.json({
                id: body.id
            });
        });
    });

Modify the code

After you copy the sample request, modify the following:

  • Change BN-Code to your PayPal Partner Attribution ID.
  • Use the purchase_units/payee object to specify the end receiver of the funds.
  • Use the purchase_units/payment_instruction/disbursement_mode field to specify when funds should be disbursed to the payee upon calling capture order. To hold these funds before disbursing to the seller, see the Delay disbursements guide.
  • Use the purchase_units/payment_instruction/platform_fees array to specify fees for the order.

Step 3: Set up your server to capture an order

When your buyer approves the order by completing the checkout flow, the payment buttons call your server to capture the order. To set up your server to capture the order, copy the following code and modify it.

Sample request

curl -v -k -X POST https://api.paypal.com/v2/checkout/orders/5O190127TN364715T/capture \
 -H 'PayPal-Request-Id: 7b92603e-77ed-4896-8e78-5dea2050476a' \
 -H 'Authorization: Bearer Access-Token' \
 -H 'Content-Type: application/json' \
 -d '{}'
var express = require('express');
var request = require('request');

express()
     .post('/my-server/capture-order/:id', function(req, res) {
         var OrderID = req.params.id;
         request.post('https://api.sandbox.paypal.com/v2/checkout/orders/' + OrderID + '/capture', {
             headers: {
                 Content-Type: "application/json",
                 Authorization: "Bearer Access-Token",
             }
         }, function (err, response, body) {
             if (err) {
                 console.error(err);
                 return res.sendStatus(500);
             }

             res.json({
                 status: 'success'
             });
         });
     });

Modify the code

After you copy the sample request, modify the following:

  • Change Access-Token to your access token.

Note: Orders cannot be captured until the status of the order is set to APPROVED. The order status is set to APPROVED when the buyer successfully completes the checkout flow.

Next steps

  • Handle funding failures - Add JavaScript SDK code to check for a funding failure then restart the OnApprove function so your buyer can select a new funding source.

  • Customize the integration — Pass query parameters and script parameters in the SDK script tag to help PayPal decide the optimal funding sources and buttons to show to your buyers.