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
Design your shopping cart page and add a HTML iframe (PayPal button). Or add HTML code directly to your website.
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 HTML iframe (PayPal button). Or add HTML code directly to your website.
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.