Hi,
I have a site where I sell digital content (images). I sell them in packs. I have several packs. I do not have a "checkout basket" where the customers can choose to put multiple packs and then pay for all. I instead have a solution where you buy and pay straight away for one pack. After some research we found this to be the best solution for us.
I already have a payment solution for credit cards through stripe. I now want to add the option for my customers to pay with paypal. So I want to add a paypal button on each pack.
I have made my own modifications to the example provided under point 1 here: https://developer.paypal.com/docs/checkout/standard/integrate/
The changes I have made is so that it is the backend handling creation and approval, but it is the JS code calling it. Like this:
```
<script>
paypal.Buttons({
style: {
layout: 'horizontal',
tagline: false
},
createOrder: function(data, actions) {
return fetch('/api/purchase/create/paypal/order/{{$bundle->id}}', {
method: 'post'
}).then(function(res) {
return res.json();
}).then(function(orderData) {
return orderData.id;
});
},
onApprove: function(data, actions) {
return fetch('/api/purchase/capture/paypal/order/' + data.orderID, {
method: 'post'
}).then(function(res) {
return res.json();
}).then(function(orderData) {
var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
return actions.restart(); // Recoverable state, per:
}
if (errorDetail) {
var msg = 'Sorry, your transaction could not be processed.';
if (errorDetail.description) msg += '\n\n' + errorDetail.description;
if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
return alert(msg); // Show a failure message (try to avoid alerts in production environments)
}
actions.redirect(orderData.redirectLink);
});
}
}).render('#paypal-button-container-{{$bundle->id}}');
</script>
```
So to my question. Since this code is executed for each of my bundles/packs it does clog my DOM with a lot of repeated code! I really only need to have most of the code that the above generates printed only once and then I could reuse that code by simply sending/fetching the bundle id for which the clicked button represents. I just can't figure out how to do this in a non-hacky way.
Do you have any suggestions?
