Please find a dedicated section to help you create your Production or Sandbox Paypal account : Create PayPal Production and sandbox accounts |
PayPal is one of the world’s most popular digital wallets, enabling users to pay quickly and securely online using their stored payment methods. With over 400 million users globally, PayPal supports transactions in multiple currencies and provides a trusted checkout experience across devices and platforms.
supports PayPal through all major integration types – giving merchants the flexibility to design their ideal checkout experience while benefiting from PayPal’s global reach.
Before integrating PayPal with , merchants must first complete the necessary setup within their PayPal account. These steps are essential for linking your PayPal merchant profile with
.
supports PayPal across all three integration types:
Use Create checkout session to redirect customers to a Hosted Payment Page where PayPal will appear as a payment option.
For a redirect-style integration, call Create payment with:
{
...
"paymentMethods": {
"type": "PAYPAL",
"integrationType": "HOSTED"
}
} |
.
Customers will be redirected to PayPal to complete the payment.
Unlike typical Direct integration, PayPal Smart Button follows a custom integration flow. Refer to the detailed instructions below to implement it correctly. |
|
Customer proceeds to checkout.
Your frontend loads the PayPal Smart Button. See below sample code for your reference to embed the Paypal's Smart Button on your checkout page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<!-- Replace <PayerID> with your value, available under your PayPal account -->
<!-- Replace <Currency> with the currency which should be used, e.g., EUR -->
<!-- When going live, replace client-id with the live client-id provided by Computop -->
<!-- When going live, replace data-partner-attribution-id with the live data-partner-attribution-id provided by Computop -->
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=ARCsDK7xBFxa5pnGxk8qvB0STB07fyi_yHDRrb5al6gxahj73Pxg9X2l7onP9J2IN-LqcVJojys94FLK&merchant-id=<PayerID>¤cy=<Currency>&disable-funding=giropay,sofort,sepa,card&intent=capture" data-partner-attribution-id="Computop_PSP_PCP_Test"></script>
<!-- Initialize and show PayPal button -->
<script type="text/javascript">
let mid = "YOUR MERCHANTID";
let orderId = null;
let payId = null;
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
createOrder: function (data, actions) {
// This is a sample endpoint path. Replace '/api/create-paypal-order' with your own backend URL.
// When the PayPal button is clicked, this frontend function calls your backend.
// Your backend should then:
// 1. Call Computop Paygate to initiate a PayPal transaction,
// 2. Retrieve and return the OrderId and PayId generated by Computop,
// 3. Respond to this frontend with that data.
return fetch('/api/create-paypal-order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ merchantId: mid })
})
.then(res => res.json())
.then(response => {
orderId = response.orderId;
payId = response.payId;
return orderId; // Return this to PayPal
});
},
onApprove: function (data, actions) {
buildAndSubmitForm();
},
onCancel: function (data, actions) {
buildAndSubmitForm("cancel");
},
onError: function (data, actions) {
buildAndSubmitForm();
}
}).render('#paypal-button-container');
// Call cbPayPal.aspx to continue sequence. The endpoint will then forward to urls.return from the REST call
function buildAndSubmitForm(userAction) {
var requestData = "MerchantId=" + mid + "&PayId=" + payId + "&OrderId=" + orderId;
// Build an invisible form and submit it to prevent preflight requests
const form = document.createElement('form');
form.style.display = 'none';
form.method = 'POST';
form.action = "https://www.computop-paygate.com/cbPayPal.aspx?rd=" + window.btoa(requestData) + "&token=" + orderId;
if (userAction === "cancel") {
form.action += "&ua=cancel";
}
document.body.appendChild(form);
form.submit();
}
</script>
</body>
</html> |
Additional configuration options
Update the below line of code as per your additional configuration needs
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=ARCsDK7xBFxa5pnGxk8qvB0STB07fyi_yHDRrb5al6gxahj73Pxg9X2l7onP9J2IN-LqcVJojys94FLK&merchant-id=<PayerID>¤cy=<Currency>&disable-funding=giropay,sofort,sepa,card&intent=capture" data-partner-attribution-id="Computop_PSP_PCP_Test"></script> |
disable-funding or enable-funding parameters.enable-funding=paylater to show PayPal Pay Later.intent=capture for auto captureintent=authorize for manual captureCustomer clicks PayPal button to pay.
Your frontend javascript code initiates the createOrder function to call your server.
Your server makes a Create payment call with:
{
...
"paymentMethods": {
"type": "PAYPAL",
"integrationType": "DIRECT"
}
} |
initiates a Create order call with PayPal.
PayPal returns orderId in the response.
returns
orderId along with the payId of the transaction.
Your server returns orderId and payId to your frontend.
Javascript code on your frontend initializes PayPal SDK with orderId to open the PayPal login window in a popup.
Customer enters credentials and confirms payment.
PayPal SDK communicates with PayPal to authenticate and authorize the payment.
Paypal responds to the request.
Javascript code on your frontend calls 's callback URL.
intiates a Complete order call to PayPal.
PayPal responds to the request.
Customer is redirected to the return URL (urls.return) that was submitted by you in step 5. The return URL is suffixed with payId in the query parameters.
The browser triggers an HTTP GET request to the return URL on your server, including the payId in the query string. Your server uses this payId to identify the payment session and proceed with retrieving the payment result.
Your server makes a Retrieve payment details by Payment ID call to retrieve the responseCode of the payment.
responds with the responseCode of the payment along with other parameters.
Your server returns a success or a failure page based on the responseCode of the payment.
PayPal Express checkout is a streamlined, customer-friendly payment experience that enables quick purchasing by allowing users to leverage their PayPal-stored address and payment details. This flow reduces friction by pre-filling shipping details, making it ideal for repeat customers or those who want a fast, no-hassle checkout experience.
Express checkout is available on both Hosted Forms and Direct integration (PayPal Smart Button).
To support PayPal Express checkout, submit the following in your initial Create payment request:
{
...
"paymentMethods": {
"type": "PAYPAL",
"integrationType": "DIRECT", // HOSTED - for Hosted forms
"payPal": {
"expressCheckout": true
}
}
} |
The process flow for Express checkout is an extension to standard flow:
AUTHORIZATION_REQUEST. Based on this you should show a confirmation page to the customer.Here customer can perform some actions like updating their address. These need to be communicated to PayPal in a subsequent Update payment details call with eventToken=UPDATE_ORDER_DETAILS
OK if successful.Reverse an authorized but not yet captured PayPal transaction by calling Reverse payment with the original payId.
You can capture a PayPal payment manually using the Capture payment endpoint.
To issue a refund for a captured Paypal payment, use the Refund payment endpoint.