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
Design your shopping cart page and add a Wix HTML element (PayPal button). Then add Wix Code to HTML element.
When customers click on the PayPal button, a pop-up window will open. Customers can either sign in to their existing PayPal account or continue with their debit or credit card information.
Customers have the option to sign up for a new PayPal account or continue without one. After they submit the payment information, your order will be completed.
Design your shopping cart page and add a Wix HTML element (PayPal button). Then add Wix Code to HTML element.
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.