On this page
No Headings
Last updated: June 16, 2026
Use this guide if your integration uses a single-page application to accept payments, built on a library or framework such as React, Vue, or Angular.
This feature modifies an existing PayPal Checkout integration and uses the following:
PayPal uses the following REST API credentials, which you can get from the developer dashboard:
You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.
The JavaScript SDK shows your payer's available payment methods on your checkout page.
Set up the PayPal checkout for your application by using the JavaScript SDK and handling the payer's interactions with the PayPal checkout button. Place the following script tag in your index.html page based on how you plan to render payment buttons, so the paypal object is available when you need it in the checkout flow. You can render the payment buttons either immediately, or after user action, navigation, or other page change:
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID">
</script><script defer src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID">
</script>Note: This sample code is optimized for JavaScript performance. To learn more about how to optimize the JavaScript SDK, see JavaScript SDK performance optimization.
Copy the sample request and modify it as follows:
YOUR_CLIENT_ID with your client ID.USD for currency. To learn more about the default values, see the JavaScript SDK script configuration.Add payment buttons to your single-page application's library or framework:
const PayPalButton = paypal.Buttons.driver("react", {
React,
ReactDOM
});Choose your JavaScript library or framework:
The React samples are separated into a component implementation and a functional implementation.
import React from "react";
import ReactDOM from "react-dom"
const PayPalButton = paypal.Buttons.driver("react", {
React,
ReactDOM
});
class YourComponent extends React.Component {
createOrder(data) {
// Order is created on the server and the order id is returned
return fetch("/my-server/create-paypal-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer ACCESS-TOKEN",
"PayPal-Partner-Attribution-Id": "BN-CODE",
"PayPal-Auth-Assertion": "AUTH-ASSERTION-JWT",
},
// use the "body" param to optionally pass additional order information
// like product skus and quantities
body: JSON.stringify({
cart: [{
sku: "YOUR-PRODUCT-STOCK-KEEPING-UNIT",
quantity: "YOUR-PRODUCT-QUANTITY",
}, ],
}),
})
.then((response) => response.json())
.then((order) => order.id);
}
onApprove(data) {
// Order is captured on the server
return fetch("/my-server/capture-paypal-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
orderID: data.orderID
})
})
.then((response) => response.json());
}
render() {
return ( <
PayPalButton createOrder = {
(data, actions) => this.createOrder(data)
}
onApprove = {
(data, actions) => this.onApprove(data)
}
/>
);
}
}Test in the PayPal sandbox.
Move from PayPal's production environment to go live.