...
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html>
<head>
<title>PayPal SDk Integration</title>
<!-- Note: On the upsell page, only enable funding sources, which were used to complete transactions on the checkout page. Set other funding sources to disable-funding parameter. -->
<!-- The checkout page funding source can be retrieved from prepaidType in the Import Order response -->
<script src="https://www.paypal.com/sdk/js?client-id=<CLIENT_ID>&merchant-id=<MERCHANT_ID>¤cy=<CURRENCY>&enable-funding=<ENABLED_FUNDINGS>&disable-funding=card" data-partner-attribution-id="<PARTNER_ID>"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
var paypalSdkParams = null;
var paypalPrePaidType = null;
paypal.Buttons({
style: {
layout: 'vertical',
label: 'paypal'
},
onClick: function(data, actions) {
try {
var fundingSource = data && data.fundingSource && data.fundingSource.toUpperCase();
if (["VENMO", "PAYLATER"].includes(fundingSource)) {
paypalPrePaidType = "PAYPAL_" + fundingSource;
}
// On upsell page match checkout page prepaid type with funding source clicked on upsell page. If not reject payment process.
var orderData = sessionStorage.getItem("orderData") ? JSON.parse(sessionStorage.getItem("orderData")) : null
var orderPrepaidType = orderData && orderData.prepaidType;
if (orderPrepaidType !== paypalPrePaidType) {
return actions.reject();
}
// Call the import upsale API with the required parameters and additional pass "paypalSdk=1" in the request.
if (res && res.result === "SUCCESS" && res.message && res.message.paypalSdkParams) {
paypalSdkParams = res.message.paypalSdkParams;
return actions.resolve();
} else {
return actions.reject();
}
} catch(err) {
// Handle error
}
},
createOrder: function(data, actions) {
try {
const orderId = paypalSdkParams && paypalSdkParams.id;
if (!orderId) throw new Error("Insufficient data to process PayPal checkout.");
return orderId;
} catch(err) {
// Handle error for missing order id
}
},
onApprove: function(data, actions) {
try {
// Note: Similar to the onclick method, re-check the checkout page prepaid type with the funding source after approval on the upsell page. If the funding source does match, do not call the confirm PayPal API and throw custom error as done in catch block.
// Call confirm PayPal API with the required parameters and additional pass following parameters
// 1. token: data.orderID
// 2. payerId: data.payerID
// 3. paypalSdk: 1
// 4. prepaidType: paypalPrePaidType;
} catch (err) {
throw new Error("Error: Unable to confirm order.");
}
},
onCancel: function (data) {
// Payment cancelled by the customer.
},
onError: function (err) {
// Error from PayaPal.
}
}).render('#paypal-button-container');
</script>
</body>
</html> |
Single Transaction
The Single Transaction feature works with the PayPal SDK when referenceTransactions and vaultEnabled are both enabled. Single Transaction works only for PayPal and Venmo payment types.