Set up standard payments

Integrate PayPal Checkout for online payments

SDKCurrentLast updated: July 20th 2021, @ 7:23:17 am


Set up standard payment options on your checkout page so your buyers can pay with PayPal, debit and credit cards, Pay Later options, Venmo, and alternative payment methods.

Not a developer? Use a pre-built solution to build your checkout experience.

Know before you code

  • This integration sets up online payment options using the PayPal JavaScript SDK, which presents relevant payment options to your buyers.
  • Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:

    • Your client ID
    • Your personal and business sandbox accounts
  • Use your client ID when adding payment options to your website. Use your sandbox accounts when testing the checkout options.
  • (UK merchants) 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.

How it works

How the PayPal Checkout integration works

  1. You add the payment buttons to your web page.
  2. Your buyer clicks a button.
  3. The button calls the PayPal Orders API to set up a transaction.
  4. The button launches the PayPal Checkout experience.
  5. The buyer approves the payment.
  6. The button calls the PayPal Orders API to finalize the transaction.
  7. You show a confirmation message to your buyer.

1. Add payment buttons

To accept payments on your website, add the PayPal JavaScript SDK code to your checkout page.

Sample JavaScript SDK code

This sample code adds payment buttons to your website that capture the payment immediately. If you plan to make API calls from your server, see the server-side instructions that follow this sample code.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
  </head>

  <body>
    <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"> // Replace YOUR_CLIENT_ID with your sandbox client ID
    </script>

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

    <!-- Add the checkout buttons, set up the order and approve the order -->
    <script>
      paypal.Buttons({
        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: '0.01'
              }
            }]
          });
        },
        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name);
          });
        }
      }).render('#paypal-button-container'); // Display payment options on your web page
    </script>
  </body>
</html>

Add and modify the code

  1. Copy the sample JavaScript SDK code and paste it into the code of your checkout page. This sample code is optimized for JavaScript performance. To learn more about this and other optimization considerations, see JavaScript SDK performance optimization.
  2. In the SDK code, replace YOUR_CLIENT_ID with your client ID.
  3. Explicitly pass parameters to override the default values the PayPal JavaScript SDK uses. Review the JavaScript SDK reference to learn about these default values. Example: currency defaults to USD.
  4. JavaScript SDK has createOrder and onApprove callbacks that have actions that you can use to call Orders REST API to set up and capture payments.
  5. (Optional) You can also create and capture an order on your server. Within createOrder and onApprove, call your server-side using the Fetch API to retrieve a token or capture a payment. Within createOrder, return the Order ID (or EC token) generated from your server-side code.

    Important: For extra security, validate that the order details are correct (including cart amount).

  6. Your implementation can vary depending on other systems and integrations you use to manage inventory and order details. Refer to the Orders REST API to learn more about the values you can pass as you build your integration.
  7. (Optional) Customize the look and feel of your buttons.
  8. Refresh your webpage to see the payment buttons.

Tips:

  • Feature the PayPal button on all pages that initiate checkout. Also show PayPal alongside other acceptance marks – including split tender and buy online, pickup in-store – giving it equal prominence and function.
  • When redirected back to your site from PayPal, your buyer should be able to pay and complete their order in no more than two steps.

Step result

Payment buttons display on your website. You can now test purchases.

2. Test purchases

Test a PayPal purchase in the sandbox to see the checkout user experience and also how money moves from the buyer’s account to your account. You'll test all the buttons in your integration before you go live.

Test a purchase as a buyer

  1. On your checkout page, select the PayPal button.
  2. Log in using your personal sandbox account login information.
  3. In the checkout page, notice the purchase amount. USD is the default currency.

    Tip: You can customize the PayPal JavaScript SDK by adding a different currency code to the PayPal JavaScript SDK. See the currency codes.

  4. Complete a purchase with the PayPal balance.
  5. Select OK to close the message.

Confirm that the money left the buyer account

  1. Log in to https://sandbox.paypal.com using your personal sandbox account login information that you used to complete the purchase. Your personal sandbox account is the buyer account.
  2. In Recent Activity, confirm that the money has left the buyer’s account.
  3. Log out of the account.

Confirm that the money moved to the merchant account

  1. Log in to https://sandbox.paypal.com using your business sandbox account login information.
  2. In Recent Activity, confirm that the money, minus any fees, are received by the merchant’s account.
  3. Log out of the account.

Next steps

See also

Integration options

Reference