Currently, I am in the process of developing an online store for a personal project and this piece of code is extracted from my application.
<div class="row">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
{{#each this.products}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img style="height: 275px;" class="img-thumbnail" src="/products_images/{{this.image_products}}" alt="...">
<div class="caption">
<h3>{{this.name_products}}</h3>
<p>{{this.description_products}}</p>
<p>Products quantity: {{this.quantity_products}}</p>
<p>Price: €{{this.price_products}}</p>
<div class="center-div" id="paypal-button-container"></div>
<script>
// Render the PayPal button
paypal.Button.render({
env: 'sandbox',
style: {
layout: 'vertical',
size: 'medium',
shape: 'rect',
color: 'gold'
},
funding: {
allowed: [
paypal.FUNDING.CARD,
paypal.FUNDING.CREDIT
],
disallowed: []
},
client: {
sandbox: '-----------------',
production: '-----------------'
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: '{{this.price_products}}',
currency: 'EUR'
}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</div>
</div>
</div>
{{/each}}
</div>
While implementing the PayPal buttons under each item, I encountered an issue where all the buttons were aligning only to the left side of the screen when executed.
https://i.stack.imgur.com/ENDme.jpg
I am considering utilizing a "product_ID" attribute to associate each button with its respective product in order to solve this problem.
Could someone guide me on the best practice to pass the "price_products" variable to the "amount" field?
amount: {
total: '{{this.price_products}}',
currency: 'EUR'
}
The end goal is to ensure that every button displays the correct price corresponding to the associated product.