Your First Integration
Integrate PayPal Checkout to accept payments swiftly and securely. Whether you're building an HTML page or a dynamic React application, this guide helps you get up and running.
Overview
PayPal Checkout leverages the Orders v2 API to create and manage transactions. By integrating PayPal Checkout, you provide users with a seamless payment experience using their PayPal accounts.
Prerequisites
Ensure you have the following:
- A PayPal account.
- A Sandbox App created in the Developer Dashboard.
- A Client ID and Secret.
- HTML
- React
HTML is ideal for static websites or quick prototypes.
1. Add the PayPal script
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
Replace YOUR_CLIENT_ID with your sandbox client ID.
2. Add PayPal buttons
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '10.00' // Replace with your amount
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
</script>
For React applications, use the PayPal React SDK.
1. Install PayPal React SDK
npm install @paypal/react-paypal-js
2. Wrap your application
import { PayPalScriptProvider } from "@paypal/react-paypal-js";
function App() {
return (
<PayPalScriptProvider options={{ "client-id": "YOUR_CLIENT_ID" }}>
<MyCheckout />
</PayPalScriptProvider>
);
}
3. Add PayPal buttons
import { PayPalButtons } from "@paypal/react-paypal-js";
function MyCheckout() {
return (
<PayPalButtons
createOrder={(data, actions) => {
return actions.order.create({
purchase_units: [{
amount: {
value: "10.00"
}
}]
});
}}
onApprove={(data, actions) => {
return actions.order.capture().then((details) => {
alert(`Transaction completed by ${details.payer.name.given_name}`);
});
}}
/>
);
}
Next steps
After setting up the basic integration:
- Test your integration with PayPal sandbox accounts.
- Implement environment detection logic to determine if the environment is sandbox or production.
- Move order creation and capture to your backend for enhanced security. Creating orders on the client side is only recommended for prototyping.
- Integrate webhooks to monitor payment status and handle asynchronous events.