Checkout
Use the PayPal JavaScript SDK to create your checkout experience on your site. With the SDK, buyers can pay with PayPal using Smart Payment Buttons.
Smart Payment Buttons
Smart Payment Buttons automatically present the most relevant payment types to your buyers using methods like PayPal Credit, credit card payments, iDEAL, Bancontact, Sofort, and other payment types.
To render the Smart Payment Buttons, pass your client ID as a query parameter to the PayPal Javascript SDK. To run test transactions, pass your sandbox client ID.
<script src="https://www.paypal.com/sdk/js?client-id=Client-ID&merchant-id=Merchant-ID¤cy=USD&intent=capture" data-partner-attribution-id="BN-Code"></script>
<div id="paypal-button-container"></div>
<script>paypal.Buttons().render('#paypal-button-container');</script>
- Pass the merchant ID of the seller you're facilitating a payment for in the
merchant-id
query parameter. - To receive revenue attribution, set
data-partner-attribution-id
to your partner attribution ID. - Set
intent
tocapture
to immediately capture funds.
For the buttons to work, you must implement the createOrder
and onApprove
functions when rendering the buttons.
<script src="https://www.paypal.com/sdk/js?client-id=Client-ID&merchant-id=Merchant-ID¤cy=USD&intent=capture" data-partner-attribution-id="BN-Code"></script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return fetch('/my-server/create-order', {
method: 'POST'
}).then(function(res) {
return res.json();
}).then(function(data) {
return data.id;
});
},
onApprove: function(data, actions) {
return fetch('/my-server/handle-approve/' + data.orderID, {
method: 'POST'
}).then(function(res){
if (!res.ok) {
alert('Something went wrong');
}
});
}
}).render('#paypal-button-container');
</script>
createOrder
is called when the buyer clicks on one of the Smart Payment Buttons. This function must return an order ID to render the checkout flow. In this example,createOrder
calls your server to get the order ID.onApprove
is called when the buyer approves the order. This happens when the buyer successfully completes the checkout flow. In this example,onApprove
calls your server to immediately capture the order.
Additional features
See the following links to add features and functionality to your Smart Payment Buttons integration:
- Customize the SDK
- Customize the Buttons
- Update an Order
- Standard Card Fields
- Alternative Payment Methods