Integrate PayPal buttons and Hosted Fields

Version CTA

This version of the JavaScript SDK integration guide for direct merchants is a legacy integration. Use version 2 for new integrations.

Expanded Checkout lets you offer the PayPal payment button and custom credit and debit card fields. This guide covers integrating the PayPal button, credit, and debit card payments. You can find more ways to extend your integration in our customization doc.

Once you integrate Expanded Checkout, you can also offer options like Pay Later, Venmo, and alternative payment methods with some additional configuration.

This integration guide follows the code in this GitHub sample.

Note: Discover Checkout's advanced features and unlock greater control over your checkout process by directly integrating with PayPal REST APIs. See Get started with PayPal REST API for more information about setting up your own custom integration.

Which integration to use

There are 2 versions of card payment integrations for direct merchants using the JavaScript SDK:

Recommended: Version 2 uses the PayPal-hosted CardFields component to accept and save cards without handling card information. PayPal handles all security and compliance issues associated with processing cards. The CardFields component is the recommended integration method and receives ongoing enhancements and improvements.
Version 1 is a legacy integration that uses the HostedFields component. This integration is no longer under active development and won’t receive further updates.

Other elements of the JavaScript SDK integration for direct merchants remain the same.

GitHub Codespaces are cloud-based developer containers that are ready right away. Use GitHub Codespaces to code and test your PayPal integration.

Integration video

Watch our video tutorial for this integration:

Know before you code

You need a developer account to get sandbox credentials

PayPal uses REST API credentials which you can get from the developer dashboard.
Client ID: Authenticates your account with PayPal and identifies an app in your sandbox.
Client secret: Authorizes an app in your sandbox. Keep this secret safe and don't share it

Dashboard

Read the guide

You need a combo of PayPal and third-party tools

JavaScript SDK: Adds PayPal-supported payment methods.
Orders REST API: Create, update, retrieve, authorize, and capture orders.
npm: Registry used to install the necessary third-party libraries.

You can use Postman to explore and test PayPal APIs.

1. Before you begin your integration

1Check your account setup for advanced card payments This integration requires a sandbox business account with the Advanced Credit and Debit Card Payments capability. Your account should automatically have this capability.

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

Log into the PayPal Developer Dashboard, toggle Sandbox, and go to Apps & Credentials.
In REST API apps, select the name of your app.
Go to Features > Accept payments.
Select the Advanced Credit and Debit Card Payments checkbox and select Save Changes.

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

2 Check 3D Secure requirements Add 3D Secure to reduce the chance of fraud and improve the payment experience by authenticating a card holder through their card issuer.

Visit our 3D Secure page to see if 3D Secure is required in your region and learn more about implementing 3D Secure in your app.

3 Set up npm One of the requirements to run this sample application is to have npm installed. For more info, visit npm's documentation.

Install third-party libraries Install the following third-party libraries to set up your integration. Here is a sample command to install them all at the same time:

npm install dotenv ejs express node-fetch

Select any of the links below to see more detailed installation instructions for each library:

Third-party libraries, Description
Third-party libraries	Description
Dotenv	This zero-dependency module separates your configuration and code by loading environment variables from a .env file into process.env.
ejs	These templates help you deliver HTML markup using plain JavaScript.
express	This lean Node.js web application framework supports web and mobile applications.
node-fetch	This function helps you make API requests, similar to window.fetch.

Verify package.json A package.json file has a list of the packages and version numbers needed for your app. You can share your package.json file with other developers so they can use the same settings as you.

The following snippet is an example of a package.json file for a PayPal integration. Compare this sample to the package.json in your project:

{
  "name": "@paypalcorp/advanced-integration",
  "version": "1.0.0",
  "description": "",
  "main": "YOUR-SERVER-NAME.js",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node YOUR-SERVER-NAME.js"
  },
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "dotenv": "^16.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.3",
    "node-fetch": "^3.2.1"
  }
}

Pass the name of your server file using main by replacing the default YOUR-SERVER-NAME.js on lines 5 and 9.
Use scripts.test and scripts.start to customize how your app starts up.

If you're having trouble with your app, try reinstalling your local library and package files using npm install.

If you're getting the node error below, you need to include "type": "module" in your package.json file. This line isn't automatically added when package.json is created:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension (Use node --trace-warnings ... to show where the warning was created)

See line 6 of the sample package.json file for an example.

Set up .env A .env file is a line-delimited text file that sets your local working environment variables. Use this .env file to securely pass the client ID and app secret for your app.

This code shows an example .env file. Rename .env.example to .env and replace the PAYPAL_CLIENT_ID and PAYPAL_CLIENT_SECRET with values from your app:

Note: View your PAYPAL_CLIENT_ID and PAYPAL_CLIENT_SECRET in your PayPal Developer Dashboard under "Apps & Credentials".

PAYPAL_CLIENT_ID="YOUR_CLIENT_ID_GOES_HERE"
PAYPAL_CLIENT_SECRET="YOUR_SECRET_GOES_HERE"

2. Integrate back end

This section explains how to set up your back end to integrate Expanded Checkout payments.

Back-end process

Your app creates an order on the back-end by making a call to the Create order endpoint of the Orders v2 API.
Your app makes a call to the Capture payment endpoint of the Orders v2 API to move the money when the buyer confirms the order.

Back-end code

The following example uses 2 files, /server/server.js and /server/views/checkout.ejs, to show how to set up the back end to integrate with Expanded Checkout.

/server/server.js

The /server/server.js file provides methods and functions for making the API calls and handling errors, and creates the endpoints that your app uses to:

Generate an access token to use PayPal APIs.
Create an order.
Capture payment for the order.
Simulate errors for negative testing.

You'll need to save the server.js file in a folder named /server.

/server/views/checkout.ejs

The /server/views/checkout.ejs file is an Embedded JavaScript (EJS) file that:

Generate an access token to use PayPal APIs.
Create an order.
Capture payment for the order.
Simulate errors for negative testing.

You'll need to save the checkout.ejs file in a folder named /server/views.

import express from "express";
import fetch from "node-fetch";
import "dotenv/config";

const { PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PORT = 8888 } = process.env;
const base = "https://api-m.sandbox.paypal.com";
const app = express();
app.set("view engine", "ejs");
app.set("views", "./server/views");
app.use(express.static("client"));

// parse post params sent in body in json format
app.use(express.json());

/**
 * Generate an OAuth 2.0 access token for authenticating with PayPal REST APIs.
 * See /api/rest/authentication
 */
const generateAccessToken = async () => {
  try {
    if (!PAYPAL_CLIENT_ID || !PAYPAL_CLIENT_SECRET) {
      throw new Error("MISSING_API_CREDENTIALS");
    }
    const auth = Buffer.from(
      PAYPAL_CLIENT_ID + ":" + PAYPAL_CLIENT_SECRET,
    ).toString("base64");
    const response = await fetch(`${base}/v1/oauth2/token`, {
      method: "POST",
      body: "grant_type=client_credentials",
      headers: {
        Authorization: `Basic ${auth}`,
      },
    });

    const data = await response.json();
    return data.access_token;
  } catch (error) {
    console.error("Failed to generate Access Token:", error);
  }
};

/**
 * Generate a client token for rendering the hosted card fields.
 * See https://developer.paypal.com/platforms/checkout/advanced/sdk/v1/#link-integratebackend
 */
const generateClientToken = async () => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v1/identity/generate-token`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Accept-Language": "en_US",
      "Content-Type": "application/json",
    },
  });

  return handleResponse(response);
};

/**
 * Create an order to start the transaction.
 * See /api/orders/v2/orders-create
 */
const createOrder = async (cart) => {
  // use the cart information passed from the front-end to calculate the purchase unit details
  console.log(
    "shopping cart information passed from the frontend createOrder() callback:",
    cart,
  );

  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders`;
  const payload = {
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: "100.00",
        },
      },
    ],
  };

  const response = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
    method: "POST",
    body: JSON.stringify(payload),
  });

  return handleResponse(response);
};

/**
 * Capture payment for the created order to complete the transaction.
 * See /api/orders/v2/orders-capture
 */
const captureOrder = async (orderID) => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders/${orderID}/capture`;

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "TRANSACTION_REFUSED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
  });

  return handleResponse(response);
};

async function handleResponse(response) {
  try {
    const jsonResponse = await response.json();
    return {
      jsonResponse,
      httpStatusCode: response.status,
    };
  } catch (err) {
    const errorMessage = await response.text();
    throw new Error(errorMessage);
  }
}

// render checkout page with client id & unique client token
app.get("/", async (req, res) => {
  try {
    const { jsonResponse } = await generateClientToken();
    res.render("checkout", {
      clientId: PAYPAL_CLIENT_ID,
      clientToken: jsonResponse.client_token,
    });
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.post("/api/orders", async (req, res) => {
  try {
    // use the cart information passed from the front-end to calculate the order amount detals
    const { cart } = req.body;
    const { jsonResponse, httpStatusCode } = await createOrder(cart);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to create order." });
  }
});

app.post("/api/orders/:orderID/capture", async (req, res) => {
  try {
    const { orderID } = req.params;
    const { jsonResponse, httpStatusCode } = await captureOrder(orderID);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to capture order." });
  }
});

app.listen(PORT, () => {
  console.log(`Node server listening at http://localhost:${PORT}/`);
});

/server/server.js expanded

This is a breakdown of the /server/server.js code sample.

Declare imports

This section of code imports the dependencies for your Node.js application:

import express from "express";
import fetch from "node-fetch";
import "dotenv/config";

Line 1 imports the Express.js framework to get started with creating a web server.
Line 2 imports a node-fetch dependency needed to make http requests to PayPal REST APIs.
Line 3 imports the dotenv library needed for loading sensitive data from environment variables, such as a PayPal client secret.

Set up port and server

This section of code collects the environment variables, sets up the port to run your server, and sets the base sandbox URL:

const { PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PORT = 8888 } = process.env;
const base = "https://api-m.sandbox.paypal.com";

Lines 7-10 start the express Node.js web application framework:

const app = express();
app.set("view engine", "ejs");
app.set("views", "./server/views");
app.use(express.static("client"));

Line 8 declares that the rendering engine uses Embedded JavaScript templates.

Generate client token

A client token uniquely identifies your payer. You need a client token for the payer so your app can use the hosted card fields. The following code sample creates a client token for you by making a POST call to the /v1/identity/generate-token endpoint:

/**
 * Generate a client token for rendering the hosted card fields.
 * See https://developer.paypal.com/platforms/checkout/advanced/sdk/v1/#link-integratebackend
 */
const generateClientToken = async () => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v1/identity/generate-token`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Accept-Language": "en_US",
      "Content-Type": "application/json",
    },
  });

  return handleResponse(response);
};

This code runs your app on localhost, using the port 8888 that you set up in line 5 of the API call:

app.listen(PORT, () => {
  console.log(`Node server listening at http://localhost:${PORT}/`);
});

Render checkout page

Set up your app's checkout page to load this section of code when it's rendered by your server:

// render checkout page with client id & unique client token
app.get("/", async (req, res) => {
  try {
    const { jsonResponse } = await generateClientToken();
    res.render("checkout", {
      clientId: PAYPAL_CLIENT_ID,
      clientToken: jsonResponse.client_token,
    });
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.post("/api/orders", async (req, res) => {
  try {
    // use the cart information passed from the front-end to calculate the order amount details
    const { cart } = req.body;
    const { jsonResponse, httpStatusCode } = await createOrder(cart);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to create order." });
  }
});

app.post("/api/orders/:orderID/capture", async (req, res) => {
  try {
    const { orderID } = req.params;
    const { jsonResponse, httpStatusCode } = await captureOrder(orderID);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to capture order." });
  }
});

Line 143 generates a client token by calling the generateClientToken() function.
Lines 144-147 render the checkout page, pass the clientId and clientToken to the page, and inject the value into the script tag.

Run createOrder()

This section of code defines a createOrder() callback function for the Create orders endpoint of the Orders v2 API. Call the function when the payment is submitted, for example, when the payer selects the PayPal button, or submits a card payment. See the /client/app.js section for more information.

This createOrder() callback returns a promise that contains the orderID. You can customize this callback for many use cases, such as a physical inventory for a cart, or a digital good with a fixed amount.

Important: To keep your integration secure, don't pass dollar amounts in your finished integration. Define your purchase_units payload on the server side and pass the cart array from the front-end to the server.

/**
 * Create an order to start the transaction.
 * See /api/orders/v2/orders-create
 */
const createOrder = async (cart) => {
  // use the cart information passed from the front-end to calculate the purchase unit details
  console.log(
    "shopping cart information passed from the frontend createOrder() callback:",
    cart,
  );

  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders`;
  const payload = {
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: "100.00",
        },
      },
    ],
  };

  const response = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
    method: "POST",
    body: JSON.stringify(payload),
  });

  return handleResponse(response);
};

Line 65 passes information from the cart into the createOrder function.
Line 72 checks that you have the correct access token.
Line 73 sets up the url for the API call.
Lines 74-84 pass the intent and purchase_units to an object called payload. This gets passed to the API call.
Lines 86-98 create an order by sending a POST request to the Create orders endpoint of the Orders v2 API, using accessToken, url, and the payload from lines 74-84.
Line 97 converts the payload information into JSON format and passes it into the body section of the request.

Negative testing for createOrder()

This section of the createOrder() function provides 3 negative testing opportunities behind content tags:

MISSING_REQUIRED_PARAMETER
PERMISSION_DENIED
INTERNAL_SERVER_ERROR

Remove the // from the beginning of a line to simulate that error. the createOrder() call will pass that line as a PayPal-Mock-Response header in the POST request to the Orders v2 API:

// Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
// https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
// "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'

Run captureOrder()

This section of code defines the captureOrder() function. Call the function to capture the order and move money from the payer's payment method to the seller:

/**
 * Capture payment for the created order to complete the transaction.
 * See /api/orders/v2/orders-capture
 */
const captureOrder = async (orderID) => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders/${orderID}/capture`;

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "TRANSACTION_REFUSED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
  });

  return handleResponse(response);
};

Line 107 passes the orderID from the request parameters into the createOrder function.
Line 108 checks that you have the correct access token.
Line 109 sets up the url for the API call, which includes the orderID.
Lines 111-122 capture an order by sending a POST request to the Capture payment endpoint of the Orders v2 API, using accessToken and url.

See /client/app.js in the next section for more details on capturing payments from the front-end.

Negative testing for captureOrder()

This section of the captureOrder() function provides 3 negative testing opportunities behind content tags:

INSTRUMENT_DECLINED
TRANSACTION_REFUSED
INTERNAL_SERVER_ERROR

Remove the // from the beginning of a line to simulate that error. The captureOrder() call will pass that line as a PayPal-Mock-Response header in the POST request to the Capture payment endpoint of the Orders v2 API:

// Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
// https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
// "PayPal-Mock-Response": '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "TRANSACTION_REFUSED"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'

Test server

Run npm start to confirm your setup is correct.

This command starts the server on localhost:8888. You can specify a port number by modifying line 4 in the sample /server/server.js file.

/server/views/checkout.ejs expanded

This breakdown focuses on key lines from the /server/views/checkout.ejs code sample.

Import style sheet

This section calls the JavaScript SDK that defines the PayPal buttons:

<link
  rel="stylesheet"
  type="text/css"
  href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"
/>

Lines 7-11 declare a sample CSS file for demonstration purposes. Replace these with styles that align with your brand using the CSS properties supported by this integration.
Optional: The JavaScript SDK has configurations that you can override, such as currency and intent.

Add PayPal button

Include the PayPal Checkout button before you request the credit card fields, or on the same page that you request this information. For more information, see Section 8, Required Use of PayPal Checkout, PayPal Credit, in the PayPal Online Card Payments Services Agreement.

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

Create your card form /docs/checkout/advanced/sdk/v1/

Create your card form

This section of code shows how to create the form fields and Submit button you need to take card payments:

<div class="card_container">
  <form id="card-form">
    <label for="card-number">Card Number</label>
    <div id="card-number" class="card_field"></div>
    <div style="display: flex; flex-direction: row">
      <div>
        <label for="expiration-date">Expiration Date</label>
        <div id="expiration-date" class="card_field"></div>
      </div>
      <div style="margin-left: 10px">
        <label for="cvv">CVV</label>
        <div id="cvv" class="card_field"></div>
      </div>
    </div>
    <label for="card-holder-name">Name on Card</label>
    <input
      type="text"
      id="card-holder-name"
      name="card-holder-name"
      autocomplete="off"
      placeholder="card holder name"
    />
    <div>
      <label for="card-billing-address-street">Billing Address</label>
      <input
        type="text"
        id="card-billing-address-street"
        name="card-billing-address-street"
        autocomplete="off"
        placeholder="street address"
      />
    </div>
    <div>
      <label for="card-billing-address-unit">&nbsp;</label>
      <input
        type="text"
        id="card-billing-address-unit"
        name="card-billing-address-unit"
        autocomplete="off"
        placeholder="unit"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-city"
        name="card-billing-address-city"
        autocomplete="off"
        placeholder="city"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-state"
        name="card-billing-address-state"
        autocomplete="off"
        placeholder="state"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-zip"
        name="card-billing-address-zip"
        autocomplete="off"
        placeholder="zip / postal code"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-country"
        name="card-billing-address-country"
        autocomplete="off"
        placeholder="country code"
      />
    </div>
    <br /><br />
    <button value="submit" id="submit" class="btn">Pay</button>
  </form>
  <p id="result-message"></p>
</div>

Lines 19-99 declare a card-form object with fields for card-number, expiration-date, cvv, card-holder-name, and billing address information. See the Orders v2 API for details about billing address fields and other parameters. For example, use the 2-character country code to test the billing address.
Line 100 declares a result-message object that displays the output of the resultMessage function from lines 107-110 of the /client/app.js file.
The fields in this example match up with fields from lines 145-169 of the Capture eligible payment code sample.

Import app.js

This code sample renders the hosted card fields for an eligible payment by importing the /client/app.js file that you created:

<script src="app.js"></script>

3. Integrate front end

This section explains how to set up your front end to integrate Expanded Checkout payments.

Front-end process

Your app displays the PayPal Checkout button and the card checkout form.
Your app calls server endpoints to create the order and capture payment. The specific method depends on whether the buyer uses the PayPal button or checkout form.

Front-end code

The /client/app.js file handles the client-side logic and defines how the PayPal front-end components connect with the back-end. Use this file to set up the PayPal checkout using the PayPal JavaScript SDK, and handle the payer's interactions with the PayPal checkout button.

You'll need to save the app.js file in a folder named /client:

async function createOrderCallback() {
  try {
    const response = await fetch("/api/orders", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // use the "body" param to optionally pass additional order information
      // like product ids and quantities
      body: JSON.stringify({
        cart: [
          {
            id: "YOUR_PRODUCT_ID",
            quantity: "YOUR_PRODUCT_QUANTITY",
          },
        ],
      }),
    });

    const orderData = await response.json();

    if (orderData.id) {
      return orderData.id;
    } else {
      const errorDetail = orderData?.details?.[0];
      const errorMessage = errorDetail
        ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
        : JSON.stringify(orderData);

      throw new Error(errorMessage);
    }
  } catch (error) {
    console.error(error);
    resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
  }
}

async function onApproveCallback(data, actions) {
  try {
    const response = await fetch(`/api/orders/${data.orderID}/capture`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const orderData = await response.json();
    // Three cases to handle:
    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
    //   (2) Other non-recoverable errors -> Show a failure message
    //   (3) Successful transaction -> Show confirmation or thank you message

    const transaction =
      orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
      orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
    const errorDetail = orderData?.details?.[0];

    // this actions.restart() behavior only applies to the Buttons component
    if (errorDetail?.issue === "INSTRUMENT_DECLINED" && !data.card && actions) {
      // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
      // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
      return actions.restart();
    } else if (
      errorDetail ||
      !transaction ||
      transaction.status === "DECLINED"
    ) {
      // (2) Other non-recoverable errors -> Show a failure message
      let errorMessage;
      if (transaction) {
        errorMessage = `Transaction ${transaction.status}: ${transaction.id}`;
      } else if (errorDetail) {
        errorMessage = `${errorDetail.description} (${orderData.debug_id})`;
      } else {
        errorMessage = JSON.stringify(orderData);
      }

      throw new Error(errorMessage);
    } else {
      // (3) Successful transaction -> Show confirmation or thank you message
      // Or go to another URL:  actions.redirect('thank_you.html');
      resultMessage(
        `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
      );
      console.log(
        "Capture result",
        orderData,
        JSON.stringify(orderData, null, 2),
      );
    }
  } catch (error) {
    console.error(error);
    resultMessage(
      `Sorry, your transaction could not be processed...<br><br>${error}`,
    );
  }
}

window.paypal
  .Buttons({
    createOrder: createOrderCallback,
    onApprove: onApproveCallback,
  })
  .render("#paypal-button-container");

// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message) {
  const container = document.querySelector("#result-message");
  container.innerHTML = message;
}

// If this returns false or the card fields aren't visible, see Step #1.
if (window.paypal.HostedFields.isEligible()) {
  // Renders card fields
  window.paypal.HostedFields.render({
    // Call your server to set up the transaction
    createOrder: createOrderCallback,
    styles: {
      ".valid": {
        color: "green",
      },
      ".invalid": {
        color: "red",
      },
    },
    fields: {
      number: {
        selector: "#card-number",
        placeholder: "4111 1111 1111 1111",
      },
      cvv: {
        selector: "#cvv",
        placeholder: "123",
      },
      expirationDate: {
        selector: "#expiration-date",
        placeholder: "MM/YY",
      },
    },
  }).then((cardFields) => {
    document.querySelector("#card-form").addEventListener("submit", (event) => {
      event.preventDefault();
      cardFields
        .submit({
          // Cardholder's first and last name
          cardholderName: document.getElementById("card-holder-name").value,
          // Billing Address
          billingAddress: {
            // Street address, line 1
            streetAddress: document.getElementById(
              "card-billing-address-street",
            ).value,
            // Street address, line 2 (Ex: Unit, Apartment, etc.)
            extendedAddress: document.getElementById(
              "card-billing-address-unit",
            ).value,
            // State
            region: document.getElementById("card-billing-address-state").value,
            // City
            locality: document.getElementById("card-billing-address-city")
              .value,
            // Postal Code
            postalCode: document.getElementById("card-billing-address-zip")
              .value,
            // Country Code
            countryCodeAlpha2: document.getElementById(
              "card-billing-address-country",
            ).value,
          },
        })
        .then((data) => {
          return onApproveCallback(data);
        })
        .catch((orderData) => {
          resultMessage(
            `Sorry, your transaction could not be processed...<br><br>${JSON.stringify(
              orderData,
            )}`,
          );
        });
    });
  });
} else {
  // Hides card fields if the merchant isn't eligible
  document.querySelector("#card-form").style = "display: none";
}

Understand the front-end code

This section explains critical parts of the front-end code sample.

/client/app.js expanded

This breakdown focuses on key lines from the /client/app.js code sample.

Create order

This code sample defines the createOrder() function:

async function createOrderCallback() {
  try {
    const response = await fetch("/api/orders", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // use the "body" param to optionally pass additional order information
      // like product ids and quantities
      body: JSON.stringify({
        cart: [
          {
            id: "YOUR_PRODUCT_ID",
            quantity: "YOUR_PRODUCT_QUANTITY",
          },
        ],
      }),
    });

    const orderData = await response.json();

    if (orderData.id) {
      return orderData.id;
    } else {
      const errorDetail = orderData?.details?.[0];
      const errorMessage = errorDetail
        ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
        : JSON.stringify(orderData);

      throw new Error(errorMessage);
    }
  } catch (error) {
    console.error(error);
    resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
  }
}

async function onApproveCallback(data, actions) {
  try {
    const response = await fetch(`/api/orders/${data.orderID}/capture`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const orderData = await response.json();
    // Three cases to handle:
    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
    //   (2) Other non-recoverable errors -> Show a failure message
    //   (3) Successful transaction -> Show confirmation or thank you message

    const transaction =
      orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
      orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
    const errorDetail = orderData?.details?.[0];

    // this actions.restart() behavior only applies to the Buttons component
    if (errorDetail?.issue === "INSTRUMENT_DECLINED" && !data.card && actions) {
      // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
      // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
      return actions.restart();
    } else if (
      errorDetail ||
      !transaction ||
      transaction.status === "DECLINED"
    ) {
      // (2) Other non-recoverable errors -> Show a failure message
      let errorMessage;
      if (transaction) {
        errorMessage = `Transaction ${transaction.status}: ${transaction.id}`;
      } else if (errorDetail) {
        errorMessage = `${errorDetail.description} (${orderData.debug_id})`;
      } else {
        errorMessage = JSON.stringify(orderData);
      }

      throw new Error(errorMessage);
    } else {
      // (3) Successful transaction -> Show confirmation or thank you message
      // Or go to another URL:  actions.redirect('thank_you.html');
      resultMessage(
        `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
      );
      console.log(
        "Capture result",
        orderData,
        JSON.stringify(orderData, null, 2),
      );
    }
  } catch (error) {
    console.error(error);
    resultMessage(
      `Sorry, your transaction could not be processed...<br><br>${error}`,
    );
  }
}

Line 40 calls your server's capture endpoint to capture the order.
Lines 58-97 declare how to handle the payment capture response.
Lines 59-79 declare what happens when the payer's instrument is declined.
Lines 79-90 declare what happens when the payment is successfully captured. When you're ready to go live, you can remove the alert and either show a success message or redirect the payer to another URL.
Lines 91-96 pass an error message to the console.

PayPal Button JavaScript

This section calls the JavaScript SDK that defines the PayPal buttons:

window.paypal
  .Buttons({
    createOrder: createOrderCallback,
    onApprove: onApproveCallback,
  })
  .render("#paypal-button-container");

Send results to user

This section declares a resultMessage function that shows a message to the user by passing data to the result-message HTML element container in line 100 of the /server/views/checkout.ejs:

// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message) {
  const container = document.querySelector("#result-message");
  container.innerHTML = message;

Lines 108-109 direct the message to the HTML element container.

Check for HostedFields eligibility

Hosted card fields use the JavaScript SDK to help non-PCI-compliant sellers save a payer's card data and create a token for future payments. During an eligible payment, the hosted fields show up in the payment experience and prompt the payer for consent to save their card data. For more information about hosted fields, see Hosted fields.

Note: You need to complete the account setup in sandbox to be eligible for testing hosted fields.

This code sample checks to see if a payment is eligible for hosted card fields. If not, the hosted card fields won't show up during the payment flow:

// If this returns false or the card fields aren't visible, see Step #1.
if (window.paypal.HostedFields.isEligible()) {
  // Renders card fields
  window.paypal.HostedFields.render(
  {...}
  } else {
  // Hides card fields if the merchant isn't eligible
  document.querySelector("#card-form").style = "display: none";
  }

You can modify this code to show a custom message for eligible or ineligible payments.

Render hosted card fields and create order

This code sample renders the hosted card fields for an eligible payment:

// Renders card fields
window.paypal.HostedFields.render({
  // Call your server to set up the transaction
  createOrder: createOrderCallback,
  styles: {
    ".valid": {
      color: "green",
    },
    ".invalid": {
      color: "red",
    },
  },
  fields: {
    number: {
      selector: "#card-number",
      placeholder: "4111 1111 1111 1111",
    },
    cvv: {
      selector: "#cvv",
      placeholder: "123",
    },
    expirationDate: {
      selector: "#expiration-date",
      placeholder: "MM/YY",
    },
  },
});

Line 117 creates the order by calling the createOrderCallback function.
Lines 118-125 define styles for the hosted card fields. You can change these styles as needed for your implementation.
Lines 126-139 define the selector and placeholder values for the input fields. You can edit this section as needed for your implementation, such as adding more fields. For more information about optional configurations, see Options in the JavaScript SDK reference.

Capture eligible payment

This code sample captures the payment when it is eligible for hosted card fields. Add this code to the PayPal button in /client/app.js, right after rendering the card fields:

.then((cardFields) => {
    document.querySelector("#card-form").addEventListener("submit", (event) => {
      event.preventDefault();
      cardFields
        .submit({
          // Cardholder's first and last name
          cardholderName: document.getElementById("card-holder-name").value,
          // Billing Address
          billingAddress: {
            // Street address, line 1
            streetAddress: document.getElementById(
              "card-billing-address-street",
            ).value,
            // Street address, line 2 (Ex: Unit, Apartment, etc.)
            extendedAddress: document.getElementById(
              "card-billing-address-unit",
            ).value,
            // State
            region: document.getElementById("card-billing-address-state").value,
            // City
            locality: document.getElementById("card-billing-address-city")
              .value,
            // Postal Code
            postalCode: document.getElementById("card-billing-address-zip")
              .value,
            // Country Code
            countryCodeAlpha2: document.getElementById(
              "card-billing-address-country",
            ).value,
          },
        })
        .then((data) => {
          return onApproveCallback(data);
        })
        .catch((orderData) => {
          resultMessage(
            `Sorry, your transaction could not be processed...<br><br>${JSON.stringify(
              orderData,
            )}`,
          );
        });
    });
  });

Line 140 sets up an event listener for when the payer submits an eligible card payment.
Lines 143-170 pass the hosted card field values, such as the cardholder's name and address, to the POST call in lines 128-131. Anything you pass into the submit is sent to the iframe that communicates with the Orders API. The iframe retrieves the data and sends it along to the POST call. See the Orders v2 API for details about billing address fields and other parameters. For example, use the 2-character country code to test the billing address.
Lines 171-173 call the onApproveCallback function from lines 38-97, which sends a POST call to /v2/checkout/orders/{id}/capture that captures the order using the orderId in the data object in /server/server.js.
Lines 174-178 pass an error message if the payment isn't successful.

Run front end integration

Run npm start to run your server.
Open your browser and navigate to localhost:8888.
When your server is running, proceed to the next section to test your integration.

4. Test integration

Before going live, test your integration in the sandbox environment.

Learn more about the following resources on the Card Testing page:

Use test card numbers to simulate successful payments for Expanded Checkout integrations.
Use rejection triggers to simulate card error scenarios.
Test 3D Secure authentication scenarios.
Test your integration by following these recommended use cases. See the Orders v2 API for details about billing address fields and other parameters. For example, use the 2-character country code to test the billing address.

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

5. Go live

If you have fulfilled the requirements for accepting Advanced Credit and Debit Card Payments for your business account, review the Move your app to production page to learn how to test and go live.

If this is your first time testing in a live environment, follow these steps:

Log into the PayPal Developer Dashboard with your PayPal business account.
Complete production onboarding so you can process card payments with your live PayPal business account.
Request Advanced Credit and Debit Card Payments for your business account.

Important: The code for the integration checks eligibility requirements, so the payment card fields only display when the production request is successful.

Next steps & customizations

Add security to your checkout integration, or create customizations for your audience.

Pay Later

Payers buy now and pay in installments.

Pay with Venmo

Add the Venmo button to your checkout integration.

Alternative payment methods

Accept local payment methods across the globe.

Apple Pay

Add Apple Pay as a payment button.

Security and customizations

Implement 3D Secure

Authenticate card holders through card issuers.

Capture payment

Captures payment for an order.

Refund a captured payment

Refund all or part of a captured payment.

Real-time account updater

Reduce declines by getting card updates from the issuer.

Version CTA

This version of the JavaScript SDK integration guide for direct merchants is a legacy integration. Use version 2 for new integrations.

How it works

Once you integrate Expanded Checkout, you can also offer options like Pay Later, Venmo, and alternative payment methods with some additional configuration.

This integration guide follows the code in this GitHub sample.

Which integration to use

There are 2 versions of card payment integrations for direct merchants using the JavaScript SDK:

Recommended: Version 2 uses the PayPal-hosted CardFields component to accept and save cards without handling card information. PayPal handles all security and compliance issues associated with processing cards. The CardFields component is the recommended integration method and receives ongoing enhancements and improvements.
Version 1 is a legacy integration that uses the HostedFields component. This integration is no longer under active development and won’t receive further updates.

Other elements of the JavaScript SDK integration for direct merchants remain the same.

GitHub Codespaces are cloud-based developer containers that are ready right away. Use GitHub Codespaces to code and test your PayPal integration.

Integration video

Watch our video tutorial for this integration:

Know before you code

You need a developer account to get sandbox credentials

PayPal uses REST API credentials which you can get from the developer dashboard.
Client ID: Authenticates your account with PayPal and identifies an app in your sandbox.
Client secret: Authorizes an app in your sandbox. Keep this secret safe and don't share it

Dashboard

Read the guide

You need a combo of PayPal and third-party tools

JavaScript SDK: Adds PayPal-supported payment methods.
Orders REST API: Create, update, retrieve, authorize, and capture orders.
npm: Registry used to install the necessary third-party libraries.

You can use Postman to explore and test PayPal APIs.

1. Before you begin your integration

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

Log into the PayPal Developer Dashboard, toggle Sandbox, and go to Apps & Credentials.
In REST API apps, select the name of your app.
Go to Features > Accept payments.
Select the Advanced Credit and Debit Card Payments checkbox and select Save Changes.

2 Check 3D Secure requirements Add 3D Secure to reduce the chance of fraud and improve the payment experience by authenticating a card holder through their card issuer.

Visit our 3D Secure page to see if 3D Secure is required in your region and learn more about implementing 3D Secure in your app.

3 Set up npm One of the requirements to run this sample application is to have npm installed. For more info, visit npm's documentation.

Install third-party libraries Install the following third-party libraries to set up your integration. Here is a sample command to install them all at the same time:

npm install dotenv ejs express node-fetch

Select any of the links below to see more detailed installation instructions for each library:

Third-party libraries, Description
Third-party libraries	Description
Dotenv	This zero-dependency module separates your configuration and code by loading environment variables from a .env file into process.env.
ejs	These templates help you deliver HTML markup using plain JavaScript.
express	This lean Node.js web application framework supports web and mobile applications.
node-fetch	This function helps you make API requests, similar to window.fetch.

Verify package.json A package.json file has a list of the packages and version numbers needed for your app. You can share your package.json file with other developers so they can use the same settings as you.

The following snippet is an example of a package.json file for a PayPal integration. Compare this sample to the package.json in your project:

{
  "name": "@paypalcorp/advanced-integration",
  "version": "1.0.0",
  "description": "",
  "main": "YOUR-SERVER-NAME.js",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node YOUR-SERVER-NAME.js"
  },
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "dotenv": "^16.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.3",
    "node-fetch": "^3.2.1"
  }
}

Pass the name of your server file using main by replacing the default YOUR-SERVER-NAME.js on lines 5 and 9.
Use scripts.test and scripts.start to customize how your app starts up.

If you're having trouble with your app, try reinstalling your local library and package files using npm install.

If you're getting the node error below, you need to include "type": "module" in your package.json file. This line isn't automatically added when package.json is created:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension (Use node --trace-warnings ... to show where the warning was created)

See line 6 of the sample package.json file for an example.

Set up .env A .env file is a line-delimited text file that sets your local working environment variables. Use this .env file to securely pass the client ID and app secret for your app.

This code shows an example .env file. Rename .env.example to .env and replace the PAYPAL_CLIENT_ID and PAYPAL_CLIENT_SECRET with values from your app:

Note: View your PAYPAL_CLIENT_ID and PAYPAL_CLIENT_SECRET in your PayPal Developer Dashboard under "Apps & Credentials".

PAYPAL_CLIENT_ID="YOUR_CLIENT_ID_GOES_HERE"
PAYPAL_CLIENT_SECRET="YOUR_SECRET_GOES_HERE"

2. Integrate back end

This section explains how to set up your back end to integrate Expanded Checkout payments.

Back-end process

Your app creates an order on the back-end by making a call to the Create order endpoint of the Orders v2 API.
Your app makes a call to the Capture payment endpoint of the Orders v2 API to move the money when the buyer confirms the order.

Back-end code

The following example uses 2 files, /server/server.js and /server/views/checkout.ejs, to show how to set up the back end to integrate with Expanded Checkout.

/server/server.js

The /server/server.js file provides methods and functions for making the API calls and handling errors, and creates the endpoints that your app uses to:

Generate an access token to use PayPal APIs.
Create an order.
Capture payment for the order.
Simulate errors for negative testing.

You'll need to save the server.js file in a folder named /server.

/server/views/checkout.ejs

The /server/views/checkout.ejs file is an Embedded JavaScript (EJS) file that:

Generate an access token to use PayPal APIs.
Create an order.
Capture payment for the order.
Simulate errors for negative testing.

You'll need to save the checkout.ejs file in a folder named /server/views.

import express from "express";
import fetch from "node-fetch";
import "dotenv/config";

const { PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PORT = 8888 } = process.env;
const base = "https://api-m.sandbox.paypal.com";
const app = express();
app.set("view engine", "ejs");
app.set("views", "./server/views");
app.use(express.static("client"));

// parse post params sent in body in json format
app.use(express.json());

/**
 * Generate an OAuth 2.0 access token for authenticating with PayPal REST APIs.
 * See /api/rest/authentication
 */
const generateAccessToken = async () => {
  try {
    if (!PAYPAL_CLIENT_ID || !PAYPAL_CLIENT_SECRET) {
      throw new Error("MISSING_API_CREDENTIALS");
    }
    const auth = Buffer.from(
      PAYPAL_CLIENT_ID + ":" + PAYPAL_CLIENT_SECRET,
    ).toString("base64");
    const response = await fetch(`${base}/v1/oauth2/token`, {
      method: "POST",
      body: "grant_type=client_credentials",
      headers: {
        Authorization: `Basic ${auth}`,
      },
    });

    const data = await response.json();
    return data.access_token;
  } catch (error) {
    console.error("Failed to generate Access Token:", error);
  }
};

/**
 * Generate a client token for rendering the hosted card fields.
 * See https://developer.paypal.com/platforms/checkout/advanced/sdk/v1/#link-integratebackend
 */
const generateClientToken = async () => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v1/identity/generate-token`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Accept-Language": "en_US",
      "Content-Type": "application/json",
    },
  });

  return handleResponse(response);
};

/**
 * Create an order to start the transaction.
 * See /api/orders/v2/orders-create
 */
const createOrder = async (cart) => {
  // use the cart information passed from the front-end to calculate the purchase unit details
  console.log(
    "shopping cart information passed from the frontend createOrder() callback:",
    cart,
  );

  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders`;
  const payload = {
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: "100.00",
        },
      },
    ],
  };

  const response = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
    method: "POST",
    body: JSON.stringify(payload),
  });

  return handleResponse(response);
};

/**
 * Capture payment for the created order to complete the transaction.
 * See /api/orders/v2/orders-capture
 */
const captureOrder = async (orderID) => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders/${orderID}/capture`;

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "TRANSACTION_REFUSED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
  });

  return handleResponse(response);
};

async function handleResponse(response) {
  try {
    const jsonResponse = await response.json();
    return {
      jsonResponse,
      httpStatusCode: response.status,
    };
  } catch (err) {
    const errorMessage = await response.text();
    throw new Error(errorMessage);
  }
}

// render checkout page with client id & unique client token
app.get("/", async (req, res) => {
  try {
    const { jsonResponse } = await generateClientToken();
    res.render("checkout", {
      clientId: PAYPAL_CLIENT_ID,
      clientToken: jsonResponse.client_token,
    });
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.post("/api/orders", async (req, res) => {
  try {
    // use the cart information passed from the front-end to calculate the order amount detals
    const { cart } = req.body;
    const { jsonResponse, httpStatusCode } = await createOrder(cart);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to create order." });
  }
});

app.post("/api/orders/:orderID/capture", async (req, res) => {
  try {
    const { orderID } = req.params;
    const { jsonResponse, httpStatusCode } = await captureOrder(orderID);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to capture order." });
  }
});

app.listen(PORT, () => {
  console.log(`Node server listening at http://localhost:${PORT}/`);
});

/server/server.js expanded

This is a breakdown of the /server/server.js code sample.

Declare imports

This section of code imports the dependencies for your Node.js application:

import express from "express";
import fetch from "node-fetch";
import "dotenv/config";

Line 1 imports the Express.js framework to get started with creating a web server.
Line 2 imports a node-fetch dependency needed to make http requests to PayPal REST APIs.
Line 3 imports the dotenv library needed for loading sensitive data from environment variables, such as a PayPal client secret.

Set up port and server

This section of code collects the environment variables, sets up the port to run your server, and sets the base sandbox URL:

const { PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PORT = 8888 } = process.env;
const base = "https://api-m.sandbox.paypal.com";

Lines 7-10 start the express Node.js web application framework:

const app = express();
app.set("view engine", "ejs");
app.set("views", "./server/views");
app.use(express.static("client"));

Line 8 declares that the rendering engine uses Embedded JavaScript templates.

Generate client token

/**
 * Generate a client token for rendering the hosted card fields.
 * See https://developer.paypal.com/platforms/checkout/advanced/sdk/v1/#link-integratebackend
 */
const generateClientToken = async () => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v1/identity/generate-token`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Accept-Language": "en_US",
      "Content-Type": "application/json",
    },
  });

  return handleResponse(response);
};

This code runs your app on localhost, using the port 8888 that you set up in line 5 of the API call:

app.listen(PORT, () => {
  console.log(`Node server listening at http://localhost:${PORT}/`);
});

Render checkout page

Set up your app's checkout page to load this section of code when it's rendered by your server:

// render checkout page with client id & unique client token
app.get("/", async (req, res) => {
  try {
    const { jsonResponse } = await generateClientToken();
    res.render("checkout", {
      clientId: PAYPAL_CLIENT_ID,
      clientToken: jsonResponse.client_token,
    });
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.post("/api/orders", async (req, res) => {
  try {
    // use the cart information passed from the front-end to calculate the order amount details
    const { cart } = req.body;
    const { jsonResponse, httpStatusCode } = await createOrder(cart);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to create order." });
  }
});

app.post("/api/orders/:orderID/capture", async (req, res) => {
  try {
    const { orderID } = req.params;
    const { jsonResponse, httpStatusCode } = await captureOrder(orderID);
    res.status(httpStatusCode).json(jsonResponse);
  } catch (error) {
    console.error("Failed to create order:", error);
    res.status(500).json({ error: "Failed to capture order." });
  }
});

Line 143 generates a client token by calling the generateClientToken() function.
Lines 144-147 render the checkout page, pass the clientId and clientToken to the page, and inject the value into the script tag.

Run createOrder()

/**
 * Create an order to start the transaction.
 * See /api/orders/v2/orders-create
 */
const createOrder = async (cart) => {
  // use the cart information passed from the front-end to calculate the purchase unit details
  console.log(
    "shopping cart information passed from the frontend createOrder() callback:",
    cart,
  );

  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders`;
  const payload = {
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: "100.00",
        },
      },
    ],
  };

  const response = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
    method: "POST",
    body: JSON.stringify(payload),
  });

  return handleResponse(response);
};

Line 65 passes information from the cart into the createOrder function.
Line 72 checks that you have the correct access token.
Line 73 sets up the url for the API call.
Lines 74-84 pass the intent and purchase_units to an object called payload. This gets passed to the API call.
Lines 86-98 create an order by sending a POST request to the Create orders endpoint of the Orders v2 API, using accessToken, url, and the payload from lines 74-84.
Line 97 converts the payload information into JSON format and passes it into the body section of the request.

Negative testing for createOrder()

This section of the createOrder() function provides 3 negative testing opportunities behind content tags:

MISSING_REQUIRED_PARAMETER
PERMISSION_DENIED
INTERNAL_SERVER_ERROR

Remove the // from the beginning of a line to simulate that error. the createOrder() call will pass that line as a PayPal-Mock-Response header in the POST request to the Orders v2 API:

// Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
// https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
// "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'

Run captureOrder()

This section of code defines the captureOrder() function. Call the function to capture the order and move money from the payer's payment method to the seller:

/**
 * Capture payment for the created order to complete the transaction.
 * See /api/orders/v2/orders-capture
 */
const captureOrder = async (orderID) => {
  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders/${orderID}/capture`;

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
      // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
      // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
      // "PayPal-Mock-Response": '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "TRANSACTION_REFUSED"}'
      // "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
    },
  });

  return handleResponse(response);
};

Line 107 passes the orderID from the request parameters into the createOrder function.
Line 108 checks that you have the correct access token.
Line 109 sets up the url for the API call, which includes the orderID.
Lines 111-122 capture an order by sending a POST request to the Capture payment endpoint of the Orders v2 API, using accessToken and url.

See /client/app.js in the next section for more details on capturing payments from the front-end.

Negative testing for captureOrder()

This section of the captureOrder() function provides 3 negative testing opportunities behind content tags:

INSTRUMENT_DECLINED
TRANSACTION_REFUSED
INTERNAL_SERVER_ERROR

// Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
// https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
// "PayPal-Mock-Response": '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "TRANSACTION_REFUSED"}'
// "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'

Test server

Run npm start to confirm your setup is correct.

This command starts the server on localhost:8888. You can specify a port number by modifying line 4 in the sample /server/server.js file.

/server/views/checkout.ejs expanded

This breakdown focuses on key lines from the /server/views/checkout.ejs code sample.

Import style sheet

This section calls the JavaScript SDK that defines the PayPal buttons:

<link
  rel="stylesheet"
  type="text/css"
  href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"
/>

Lines 7-11 declare a sample CSS file for demonstration purposes. Replace these with styles that align with your brand using the CSS properties supported by this integration.
Optional: The JavaScript SDK has configurations that you can override, such as currency and intent.

Add PayPal button

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

Create your card form /docs/checkout/advanced/sdk/v1/

Create your card form

This section of code shows how to create the form fields and Submit button you need to take card payments:

<div class="card_container">
  <form id="card-form">
    <label for="card-number">Card Number</label>
    <div id="card-number" class="card_field"></div>
    <div style="display: flex; flex-direction: row">
      <div>
        <label for="expiration-date">Expiration Date</label>
        <div id="expiration-date" class="card_field"></div>
      </div>
      <div style="margin-left: 10px">
        <label for="cvv">CVV</label>
        <div id="cvv" class="card_field"></div>
      </div>
    </div>
    <label for="card-holder-name">Name on Card</label>
    <input
      type="text"
      id="card-holder-name"
      name="card-holder-name"
      autocomplete="off"
      placeholder="card holder name"
    />
    <div>
      <label for="card-billing-address-street">Billing Address</label>
      <input
        type="text"
        id="card-billing-address-street"
        name="card-billing-address-street"
        autocomplete="off"
        placeholder="street address"
      />
    </div>
    <div>
      <label for="card-billing-address-unit">&nbsp;</label>
      <input
        type="text"
        id="card-billing-address-unit"
        name="card-billing-address-unit"
        autocomplete="off"
        placeholder="unit"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-city"
        name="card-billing-address-city"
        autocomplete="off"
        placeholder="city"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-state"
        name="card-billing-address-state"
        autocomplete="off"
        placeholder="state"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-zip"
        name="card-billing-address-zip"
        autocomplete="off"
        placeholder="zip / postal code"
      />
    </div>
    <div>
      <input
        type="text"
        id="card-billing-address-country"
        name="card-billing-address-country"
        autocomplete="off"
        placeholder="country code"
      />
    </div>
    <br /><br />
    <button value="submit" id="submit" class="btn">Pay</button>
  </form>
  <p id="result-message"></p>
</div>

Lines 19-99 declare a card-form object with fields for card-number, expiration-date, cvv, card-holder-name, and billing address information. See the Orders v2 API for details about billing address fields and other parameters. For example, use the 2-character country code to test the billing address.
Line 100 declares a result-message object that displays the output of the resultMessage function from lines 107-110 of the /client/app.js file.
The fields in this example match up with fields from lines 145-169 of the Capture eligible payment code sample.

Import app.js

This code sample renders the hosted card fields for an eligible payment by importing the /client/app.js file that you created:

<script src="app.js"></script>

3. Integrate front end

This section explains how to set up your front end to integrate Expanded Checkout payments.

Front-end process

Your app displays the PayPal Checkout button and the card checkout form.
Your app calls server endpoints to create the order and capture payment. The specific method depends on whether the buyer uses the PayPal button or checkout form.

Front-end code

You'll need to save the app.js file in a folder named /client:

async function createOrderCallback() {
  try {
    const response = await fetch("/api/orders", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // use the "body" param to optionally pass additional order information
      // like product ids and quantities
      body: JSON.stringify({
        cart: [
          {
            id: "YOUR_PRODUCT_ID",
            quantity: "YOUR_PRODUCT_QUANTITY",
          },
        ],
      }),
    });

    const orderData = await response.json();

    if (orderData.id) {
      return orderData.id;
    } else {
      const errorDetail = orderData?.details?.[0];
      const errorMessage = errorDetail
        ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
        : JSON.stringify(orderData);

      throw new Error(errorMessage);
    }
  } catch (error) {
    console.error(error);
    resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
  }
}

async function onApproveCallback(data, actions) {
  try {
    const response = await fetch(`/api/orders/${data.orderID}/capture`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const orderData = await response.json();
    // Three cases to handle:
    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
    //   (2) Other non-recoverable errors -> Show a failure message
    //   (3) Successful transaction -> Show confirmation or thank you message

    const transaction =
      orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
      orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
    const errorDetail = orderData?.details?.[0];

    // this actions.restart() behavior only applies to the Buttons component
    if (errorDetail?.issue === "INSTRUMENT_DECLINED" && !data.card && actions) {
      // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
      // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
      return actions.restart();
    } else if (
      errorDetail ||
      !transaction ||
      transaction.status === "DECLINED"
    ) {
      // (2) Other non-recoverable errors -> Show a failure message
      let errorMessage;
      if (transaction) {
        errorMessage = `Transaction ${transaction.status}: ${transaction.id}`;
      } else if (errorDetail) {
        errorMessage = `${errorDetail.description} (${orderData.debug_id})`;
      } else {
        errorMessage = JSON.stringify(orderData);
      }

      throw new Error(errorMessage);
    } else {
      // (3) Successful transaction -> Show confirmation or thank you message
      // Or go to another URL:  actions.redirect('thank_you.html');
      resultMessage(
        `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
      );
      console.log(
        "Capture result",
        orderData,
        JSON.stringify(orderData, null, 2),
      );
    }
  } catch (error) {
    console.error(error);
    resultMessage(
      `Sorry, your transaction could not be processed...<br><br>${error}`,
    );
  }
}

window.paypal
  .Buttons({
    createOrder: createOrderCallback,
    onApprove: onApproveCallback,
  })
  .render("#paypal-button-container");

// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message) {
  const container = document.querySelector("#result-message");
  container.innerHTML = message;
}

// If this returns false or the card fields aren't visible, see Step #1.
if (window.paypal.HostedFields.isEligible()) {
  // Renders card fields
  window.paypal.HostedFields.render({
    // Call your server to set up the transaction
    createOrder: createOrderCallback,
    styles: {
      ".valid": {
        color: "green",
      },
      ".invalid": {
        color: "red",
      },
    },
    fields: {
      number: {
        selector: "#card-number",
        placeholder: "4111 1111 1111 1111",
      },
      cvv: {
        selector: "#cvv",
        placeholder: "123",
      },
      expirationDate: {
        selector: "#expiration-date",
        placeholder: "MM/YY",
      },
    },
  }).then((cardFields) => {
    document.querySelector("#card-form").addEventListener("submit", (event) => {
      event.preventDefault();
      cardFields
        .submit({
          // Cardholder's first and last name
          cardholderName: document.getElementById("card-holder-name").value,
          // Billing Address
          billingAddress: {
            // Street address, line 1
            streetAddress: document.getElementById(
              "card-billing-address-street",
            ).value,
            // Street address, line 2 (Ex: Unit, Apartment, etc.)
            extendedAddress: document.getElementById(
              "card-billing-address-unit",
            ).value,
            // State
            region: document.getElementById("card-billing-address-state").value,
            // City
            locality: document.getElementById("card-billing-address-city")
              .value,
            // Postal Code
            postalCode: document.getElementById("card-billing-address-zip")
              .value,
            // Country Code
            countryCodeAlpha2: document.getElementById(
              "card-billing-address-country",
            ).value,
          },
        })
        .then((data) => {
          return onApproveCallback(data);
        })
        .catch((orderData) => {
          resultMessage(
            `Sorry, your transaction could not be processed...<br><br>${JSON.stringify(
              orderData,
            )}`,
          );
        });
    });
  });
} else {
  // Hides card fields if the merchant isn't eligible
  document.querySelector("#card-form").style = "display: none";
}

Understand the front-end code

This section explains critical parts of the front-end code sample.

/client/app.js expanded

This breakdown focuses on key lines from the /client/app.js code sample.

Create order

This code sample defines the createOrder() function:

async function createOrderCallback() {
  try {
    const response = await fetch("/api/orders", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // use the "body" param to optionally pass additional order information
      // like product ids and quantities
      body: JSON.stringify({
        cart: [
          {
            id: "YOUR_PRODUCT_ID",
            quantity: "YOUR_PRODUCT_QUANTITY",
          },
        ],
      }),
    });

    const orderData = await response.json();

    if (orderData.id) {
      return orderData.id;
    } else {
      const errorDetail = orderData?.details?.[0];
      const errorMessage = errorDetail
        ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
        : JSON.stringify(orderData);

      throw new Error(errorMessage);
    }
  } catch (error) {
    console.error(error);
    resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
  }
}

async function onApproveCallback(data, actions) {
  try {
    const response = await fetch(`/api/orders/${data.orderID}/capture`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const orderData = await response.json();
    // Three cases to handle:
    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
    //   (2) Other non-recoverable errors -> Show a failure message
    //   (3) Successful transaction -> Show confirmation or thank you message

    const transaction =
      orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
      orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
    const errorDetail = orderData?.details?.[0];

    // this actions.restart() behavior only applies to the Buttons component
    if (errorDetail?.issue === "INSTRUMENT_DECLINED" && !data.card && actions) {
      // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
      // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
      return actions.restart();
    } else if (
      errorDetail ||
      !transaction ||
      transaction.status === "DECLINED"
    ) {
      // (2) Other non-recoverable errors -> Show a failure message
      let errorMessage;
      if (transaction) {
        errorMessage = `Transaction ${transaction.status}: ${transaction.id}`;
      } else if (errorDetail) {
        errorMessage = `${errorDetail.description} (${orderData.debug_id})`;
      } else {
        errorMessage = JSON.stringify(orderData);
      }

      throw new Error(errorMessage);
    } else {
      // (3) Successful transaction -> Show confirmation or thank you message
      // Or go to another URL:  actions.redirect('thank_you.html');
      resultMessage(
        `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
      );
      console.log(
        "Capture result",
        orderData,
        JSON.stringify(orderData, null, 2),
      );
    }
  } catch (error) {
    console.error(error);
    resultMessage(
      `Sorry, your transaction could not be processed...<br><br>${error}`,
    );
  }
}

Line 40 calls your server's capture endpoint to capture the order.
Lines 58-97 declare how to handle the payment capture response.
Lines 59-79 declare what happens when the payer's instrument is declined.
Lines 79-90 declare what happens when the payment is successfully captured. When you're ready to go live, you can remove the alert and either show a success message or redirect the payer to another URL.
Lines 91-96 pass an error message to the console.

PayPal Button JavaScript

This section calls the JavaScript SDK that defines the PayPal buttons:

window.paypal
  .Buttons({
    createOrder: createOrderCallback,
    onApprove: onApproveCallback,
  })
  .render("#paypal-button-container");

Send results to user

This section declares a resultMessage function that shows a message to the user by passing data to the result-message HTML element container in line 100 of the /server/views/checkout.ejs:

// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message) {
  const container = document.querySelector("#result-message");
  container.innerHTML = message;

Lines 108-109 direct the message to the HTML element container.

Check for HostedFields eligibility

Note: You need to complete the account setup in sandbox to be eligible for testing hosted fields.

This code sample checks to see if a payment is eligible for hosted card fields. If not, the hosted card fields won't show up during the payment flow:

// If this returns false or the card fields aren't visible, see Step #1.
if (window.paypal.HostedFields.isEligible()) {
  // Renders card fields
  window.paypal.HostedFields.render(
  {...}
  } else {
  // Hides card fields if the merchant isn't eligible
  document.querySelector("#card-form").style = "display: none";
  }

You can modify this code to show a custom message for eligible or ineligible payments.

Render hosted card fields and create order

This code sample renders the hosted card fields for an eligible payment:

// Renders card fields
window.paypal.HostedFields.render({
  // Call your server to set up the transaction
  createOrder: createOrderCallback,
  styles: {
    ".valid": {
      color: "green",
    },
    ".invalid": {
      color: "red",
    },
  },
  fields: {
    number: {
      selector: "#card-number",
      placeholder: "4111 1111 1111 1111",
    },
    cvv: {
      selector: "#cvv",
      placeholder: "123",
    },
    expirationDate: {
      selector: "#expiration-date",
      placeholder: "MM/YY",
    },
  },
});

Line 117 creates the order by calling the createOrderCallback function.
Lines 118-125 define styles for the hosted card fields. You can change these styles as needed for your implementation.
Lines 126-139 define the selector and placeholder values for the input fields. You can edit this section as needed for your implementation, such as adding more fields. For more information about optional configurations, see Options in the JavaScript SDK reference.

Capture eligible payment

This code sample captures the payment when it is eligible for hosted card fields. Add this code to the PayPal button in /client/app.js, right after rendering the card fields:

.then((cardFields) => {
    document.querySelector("#card-form").addEventListener("submit", (event) => {
      event.preventDefault();
      cardFields
        .submit({
          // Cardholder's first and last name
          cardholderName: document.getElementById("card-holder-name").value,
          // Billing Address
          billingAddress: {
            // Street address, line 1
            streetAddress: document.getElementById(
              "card-billing-address-street",
            ).value,
            // Street address, line 2 (Ex: Unit, Apartment, etc.)
            extendedAddress: document.getElementById(
              "card-billing-address-unit",
            ).value,
            // State
            region: document.getElementById("card-billing-address-state").value,
            // City
            locality: document.getElementById("card-billing-address-city")
              .value,
            // Postal Code
            postalCode: document.getElementById("card-billing-address-zip")
              .value,
            // Country Code
            countryCodeAlpha2: document.getElementById(
              "card-billing-address-country",
            ).value,
          },
        })
        .then((data) => {
          return onApproveCallback(data);
        })
        .catch((orderData) => {
          resultMessage(
            `Sorry, your transaction could not be processed...<br><br>${JSON.stringify(
              orderData,
            )}`,
          );
        });
    });
  });

Line 140 sets up an event listener for when the payer submits an eligible card payment.
Lines 143-170 pass the hosted card field values, such as the cardholder's name and address, to the POST call in lines 128-131. Anything you pass into the submit is sent to the iframe that communicates with the Orders API. The iframe retrieves the data and sends it along to the POST call. See the Orders v2 API for details about billing address fields and other parameters. For example, use the 2-character country code to test the billing address.
Lines 171-173 call the onApproveCallback function from lines 38-97, which sends a POST call to /v2/checkout/orders/{id}/capture that captures the order using the orderId in the data object in /server/server.js.
Lines 174-178 pass an error message if the payment isn't successful.

Run front end integration

Run npm start to run your server.
Open your browser and navigate to localhost:8888.
When your server is running, proceed to the next section to test your integration.

4. Test integration

Before going live, test your integration in the sandbox environment.

Learn more about the following resources on the Card Testing page:

Use test card numbers to simulate successful payments for Expanded Checkout integrations.
Use rejection triggers to simulate card error scenarios.
Test 3D Secure authentication scenarios.
Test your integration by following these recommended use cases. See the Orders v2 API for details about billing address fields and other parameters. For example, use the 2-character country code to test the billing address.

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

5. Go live

If this is your first time testing in a live environment, follow these steps:

Log into the PayPal Developer Dashboard with your PayPal business account.
Complete production onboarding so you can process card payments with your live PayPal business account.
Request Advanced Credit and Debit Card Payments for your business account.

Important: The code for the integration checks eligibility requirements, so the payment card fields only display when the production request is successful.