Vorbly <Code>
CODING MADE EASY WITH VORBLY
HTML PAYPAL BUTTON - ONLINE PAYMENTS
Starting an eCommerce website? This tutorial will show you how to integrate PayPal Payment APIs into your website using html 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)
PayPal Client IDs
Go to www.paypal.com and retrieve your client IDs
-
Sandbox ID (testing)
-
Production ID
THE CODE
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.