Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX PAYPAL INTEGRATION - ONLINE PAYMENTS
Starting an eCommerce website? This tutorial will show you how to integrate PayPal Payment APIs into your Wix website using Wix Code. Customers will be able to purchase directly from your online store. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
HTML iframe: #html1 (PayPal button)
User Input: #quantity
Text Elements:
-
Unit Price: #UnitPrice
-
Total Price: #FinalPrice
PayPal Client IDs
Go to www.paypal.com and retrieve your client IDs
-
Sandbox ID (testing)
-
Production ID
THE CODE
Page Code
export function quantity_change(event, $w) {
let price = Number($w('#UnitPrice').text);
let selectedQuantity = Number(event.target.value); // Gets selected quantity from input //
$w('#FinalPrice').text = String(selectedQuantity * price); // Quantity X Price //
$w("#html1").postMessage(Number($w('#FinalPrice').text)); // Sends price to button //
}
HTML iframe
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script type="text/javascript">
let AMOUNT = 0;
window.onmessage = (event) => {
if (event.data > 0) {
AMOUNT = event.data;
}
}
paypal.Button.render({
env: 'production',
locale: 'en_US',
style: {
size: 'medium',
color: 'gold',
shape: 'rect',
label: 'checkout'
},
env: 'sandbox', // sandbox or production //
// PayPal Client IDs - Go to PayPal.com and create your own client IDs //
client: {
sandbox: 'YOUR_SANDBOX_ID',
production: 'YOUR_PRODUCTION_ID'
},
commit: true,
payment: function(data, actions) {
// Payment Amount //
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: `${AMOUNT}`, currency: 'USD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</body>
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.