Upgrade your Checkout integration

If you have an Express Checkout or PayPal Checkout integration, PayPal recommends upgrading to Expanded Checkout using the JavaScript SDK.

The JavaScript SDK has the following benefits:

Visit the Eligibility page to learn more about the countries, currencies, and card brands that Expanded Checkout supports.

Getting started

Integrate Expanded Checkout to present custom credit and debit card fields to your payers so they can pay with PayPal, debit and credit cards, Pay Later options, Venmo, and alternative payment methods, using your site's branding.

1. Review current integration

Your current integration determines whether you need to gather information to integrate with Expanded Checkout. Select Paypal Checkout or Express Checkout:

2. Set up your sandbox

Sign up for a developer account

You need a PayPal developer account to get sandbox credentials.

Get your credentials

Follow this onboarding document to get a client ID, client secret, access token, and sandbox account credentials:

Set up your sandbox account

This integration requires a sandbox business account with the Expanded Credit and Debit Card Payments capability. Your sandbox business account should automatically have this capability.

To confirm that Expanded Credit and Debit Card Payments are enabled for you, check your sandbox business account as follows:

Note: If you created a sandbox business account through sandbox.paypal.com, and the Expanded Credit and Debit Card Payments status for the account is disabled, complete the sandbox onboarding steps.

Integrate Expanded Checkout

Before beginning your integration, you need to set up your development environment. See the preceding Getting started section for details.

1. Set up front end

Set up your front end for Expanded Checkout. Select PayPal Checkout or Express Checkout:

<script src="https://www.paypal.com/sdk/js?currency=USD&client-id=YOUR_SANDBOX_CLIENT_ID"></script>

<script src="https://www.paypal.com/sdk/js?currency=USD&client-id=YOUR_SANDBOX_CLIENT_ID&components=buttons,card-fields"></script>

2. Create and render card fields and payment buttons

Set up your front end to use PayPal card fields and start accepting credit and debit card payments. Select PayPal**Checkout** or **Express Checkout**:

<div id="paypal-button-container"></div>
<script>
  paypal.Buttons({
    // Button configuration and event handlers
  }).render('#paypal-button-container');
</script>

<div id="paypal-button-container"></div>
<div class="card-fields-container">
  <div id="card-fields" class="card-fields"></div>
  <button id="card-fields-submit">Submit</button>
</div>
<script>
  paypal.Buttons({
    // Button configuration and event handlers
  }).render('#paypal-button-container');
  paypal.CardFields({
    createOrder: function() {
      return fetch('/create-order', {
        method: 'post'
      }).then(function(res) {
        return res.json();
      }).then(function(orderData) {
        return orderData.id; // Use the order ID to create the order
      });
    }
  }).render('#card-fields'); // Render the card fields into #card-fields
  // Handle the submit button for card fields
  document.getElementById('card-fields-submit').addEventListener('click', function() {
    paypal.CardFields().submit().then(function(result) {
      alert('Payment authorized');
    }).catch(function(err) {
      console.error('Payment authorization failed:', err);
      alert('Payment authorization failed');
    });
  });
</script>

Expanded Checkout card fields and payment buttons example

For a more detailed example, see Integrate PayPal buttons and Card Fields.

3. Set up server-side processing

You may need to set up server-side processing for your integration. Select PayPal Checkout or Express Checkout:

4. Fine-tune your checkout experience

See Customize your buyers' experience to configure the details of your integration.

5. Test integration

Before going live, test your integration in the sandbox environment. Learn more about card testing, simulating successful payments using test card numbers and generating card error scenarios using rejection triggers.

Note: Use the credit card generator to generate test credit cards for sandbox testing.

Test the following use cases before going live:

PayPal Payment

Test a purchase as a payer:

Confirm the money reached the business account:

Card payment

6. Go live

Follow this checklist to take your application live:

See Move your app to production for more details.