Integration Builder

JS SDK

Last updated:

Know before you code

Standard
Standard Checkoutallows you to offer a variety of payment options:
  • PayPal
  • Pay Later
  • Venmo
  • Debit and Credit through a PayPal-managed guest checkout
Advanced
Advanced Checkoutallows you to accept all of the Standard Checkout payment types as well as:
  • Direct Debit and Credit card processing
  • Customizable Payment Protection
  • Unbranded checkout, with customizable buttons and form fields
  • Region-specific alternative payments methods
Integration:
Front end language:
Back end language:

1

Select checkout options

Select the payment methods

These relevant payment methods will show up next to your PayPal button.

PayPalPayment using a PayPal account.

Choose a payment model

Process one-time payments using the JavaScript SDK or payments for fixed amounts at regular intervals using the Catalog Product API, Subscriptions API, and the JavaScript SDK

Choose your button layout

Choose between vertical or horizontal button layouts

Choose your button style

Choose between rectangular or pill-shaped buttons

2

Setup Your Code

Build your application and test in the sandbox

Standard HTML/JavaScript with NodeJS

HTML

  1. Create a folder named client.
  2. Inside of the client folder create two files: checkout.html and app.js. Copy paste the provided code snippets for these files.
      Optional: Customize your code.
  3. In the checkout.html file, replace test client ID in the SDK script tag with your own sandbox Business Account app client ID. These credentials are available in the Developer Dashboard.

NodeJS

  1. Create a folder named server.
  2. Create a file named server.js. Copy paste the code provided in the code snippets for this file.
  3. Create a .env file and pass the following variables:
    • PAYPAL_CLIENT_ID=YOUR_CLIENT_ID
    • PAYPAL_CLIENT_SECRET=YOUR_APP_SECRET
    • These credentials are available in the Developer Dashboard.
  4. Create a package.json file. Copy paste the contents of this sample package.json file into your own package.json file. This file defines the dependencies used inside the server.js file. The dependencies needed are:
  5. In your terminal, run npm install to install the project dependencies.
  6. Run the project by running npm start in your terminal.
  7. Navigate to http://localhost:8888/ to view the application.

3

Demo using sample credentials

Demo checkout as a payer and merchant

  1. In the Checkout Preview, select a payment button to demo checkout.
  2. Log in to the payer's sandbox account using pre-populated credentials.
  3. Select a payment method to start the transaction.
  4. Confirm that payment was successful by logging in to the merchant's sandbox account using the pre-populated credentials.
  5. On a successful transaction, the payment is shown in the merchant sandbox account.

Simulate successful and unsuccessful credit card capture.

Successful test transaction

Use the following card information. See more test cases here.

Negative test transaction

Use the following card information. See more test cases here.

4

Take your application live

Move your application to PayPal's live environment

  1. Ensure your application adheres to the PayPal Application Policies and Guidelines.
  2. Obtain your live credentials.
  3. Replace your test credentials in your integration with your live credentials.
  4. Update your PayPal endpoint.

Standard Checkout Preview

1
Was the integration builder helpful?