Set up standard payments

Set up standard payment options on your checkout page so your buyers can pay with debit and credit cards, PayPal, 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. If you are looking for a customized way to present credit and debit card fields, see our Set up advanced credit and debit card payments integration.
  • 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.

1. Add payment buttons

To accept payments on your website, add the PayPal JavaScript SDK code to your checkout page. You can also add payment buttons to a single page application.

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_SB_CLIENT_ID"> // Replace YOUR_SB_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_SB_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. Create JavaScript or server-side code to pass purchase variables, like amount: value, to the JavaScript SDK code. Your implementation varies based on the other systems and integrations you're using 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 code.
  5. (Optional) Handle creating and capturing an order on your server. You might need to make API calls directly from your server, rather than using the client-side functions that the JavaScript provides. Remove createOrder and captureOrder from the JavaScript and create server-side API calls.
  6. Refresh your webpage to see the payment buttons.

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