- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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?
Solved! Go to Solution.
- Labels:
-
PayPal HTML Buttons
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Ok, I solved it. I just wrapped the code above in a JS-function with the bundleId as parameter. I lazy load the function first when the button is supposed to be visible on the screen. It seems to work fine!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Ok, I solved it. I just wrapped the code above in a JS-function with the bundleId as parameter. I lazy load the function first when the button is supposed to be visible on the screen. It seems to work fine!

Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- JS SDK, IPN activated, i receive empty IPN events .. in SDKs
- Webhook events don't show up in my overview in REST APIs
- Pay later messaging only working with default merchant currency and not others in SDKs
- Accepting Donations to Business Account for multiple projects in REST APIs
- Multiple subscription items in REST APIs