PayPal works differently to other payment gateways supported in the Chec Platform in that it redirects the user off-site to PayPal in order to complete the transaction.

You can build support for PayPal into your custom checkouts easily, here's a quick guide:

Step 1 - Create PayPal checkout for authorization

To use PayPal as a payment method in Commerce.js, you need to add the field payment[paypal][action] = "authorize" to the checkout.capture() API request:

Request:

POST /checkout/{token}

commerce.checkout.capture('{checkout_token_id}', {
line_items: {
item_7RyWOwmK5nEa2V: {
quantity: 1,
},
},
customer: {
firstname: 'John',
lastname: 'Doe',
email: 'buyer@example.com',
},
shipping: {
name: 'John Doe',
country: 'US',
street": '123 Fake St',
town_city: 'San Francisco',
county_state: 'CA',
postal_zip_code: 94103',
},
fulfillment: {
shipping_method: 'ship_7RyWOwmK5nEa2V',
},
billing: {
name: 'John Doe',
country: 'US',
street: '123 Fake St',
town_city: 'San Francisco',
county_state: 'CA',
postal_zip_code: 94103,
},
payment: {
gateway: 'paypal',
paypal: {
action: 'authorize',
},
},
})
.then((resp) => {
// Successful response
})
.catch((error) => {
// Error handler
});


Commerce.js will respond with the data required for you to redirect your customers to PayPal in order to complete the transaction.

Response example:

{
"payment_redirect": true,
"gateway": "paypal",
"approval_url": "https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-1UB873725N080641H",
"payment_id": "PAY-51028384J84281644LGFZXJQ",
"experience_profile_id": "TXP-3SD921203P6940911",
"payment_token": "EC-1UB873725N080641H"
}


Step 2 - Create PayPal Checkout

Next, use the payment_id from the response above to generate a PayPal Express Checkout using PayPal's Checkout.js.

You can choose which ever flow works best for you, here's one example:

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button"></div>
<script>
paypal.Button.render({
env: 'production', // Or 'sandbox',
commit: true, // Show a 'Pay Now' button
payment: function() {
return 'PAY-51028384J84281644LGFZXJQ' // The payment ID from earlier

},
onAuthorize: function(data, actions) {
// Handler if customer DOES authorize payment (this is where you get the payment_id & payer_id you need to pass to Chec)
},
onCancel: function(data, actions) {
// Handler if customer does not authorize payment
}
},
'#paypal-button'
);
</script>
</body>

If the customer approves the order, Checkout.js will return payerID & the paymentID.

Step 3 - Capture the PayPal Payment & Order

Finally, add the payerID & paymentID to the Commerce.js checkout.capture() call, and change the PayPal action from "authorize" to "capture".

commerce.checkout.capture('{checkout_token_id}', {
line_items: {
item_7RyWOwmK5nEa2V: {
quantity: 1,
},
},
customer: {
firstname: 'John',
lastname: 'Doe',
email: 'buyer@example.com',
},
shipping: {
name: 'John Doe',
country: 'US',
street": '123 Fake St',
town_city: 'San Francisco',
county_state: 'CA',
postal_zip_code: 94103',
},
fulfillment: {
shipping_method: 'ship_7RyWOwmK5nEa2V',
},
billing: {
name: 'John Doe',
country: 'US',
street: '123 Fake St',
town_city: 'San Francisco',
county_state: 'CA',
postal_zip_code: 94103,
},
payment: {
gateway: 'paypal',
paypal: {
action: 'capture',
payment_id: 'PAY-51028384J84281644LGFZXJQ',
payer_id: 'VE57TQRTVER5Y',
},
},
})
.then((resp) => {
// Successful response
})
.catch((error) => {
// Error handler
});

The response from this final call to Commerce.js checkout.capture() will be the completed order receipt.

Did this answer your question?