Problem with standalone smart buttons
xPlux
Member
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Posted on
Feb-13-2023
02:47 AM
Hello,
I have a problem with smart buttons when I render them standalone. Buttons displays properly. When I click them my backend generates order and returns order id then PayPal window shows for a while and then dissapers. This same code works when I change standalone flag to false.
What I'm doing wrong? There is something I should change to render buttons separately?
I also tried to render buttons in separate containers but this nothing change.
Link to the the documentation I used.
My code below.
<script src="https://www.paypal.com/sdk/js?client-id=XXX&components=buttons,funding-eligibility&locale=en_PL¤cy=PLN"></script>
<script>
function getButton(fundingSource) {
return paypal.Buttons({
fundingSource: fundingSource,
createOrder: function(data, actions) {
return fetch('/api/user/paypal/create', {
method: 'post',
}).then((res) => {
return res.json();
}).then((transaction) => {
return transaction.external_uuid;
});
},
onApprove: function(data, actions) {
return fetch('/api/user/paypal/capture', {
method: 'post',
}).then((res) => {
return res.json();
}).then((orderData) => {
const element = document.getElementById('paypal-button-container');
let errorDetail = Array.isArray(orderData.details) && orderData.details[0];
if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
return actions.restart();
}
if (errorDetail) {
let msg = 'Sorry, your transaction could not be processed.';
if (errorDetail.description) msg += '\n\n' + errorDetail.description;
if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
element.innerHTML = '<h3>'+msg+'</h3>';
return;
}
element.innerHTML = '<h3>Thank you for your payment!</h3>';
});
},
onError: function (err) {
console.log('onError');
console.log(err);
},
onCancel: function (data) {
console.log('onCancel');
console.log(data);
},
});
}
let standalone = true;
if (standalone)
{
paypal.getFundingSources().forEach((fundingSource) => {
let button = getButton(fundingSource);
if (button.isEligible())
button.render('#paypal-button-container')
})
}
else
{
let button = getButton(null);
button.render('#paypal-button-container')
}
</script>
<div id="paypal-button-container"></div>
0 REPLIES 0

Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
Related Content
- Website Payment Button in PayPal Payments Standard
- add to cart button - product description - number of characters in PayPal Payments Standard
- Let user pick their own own subscription pricing and period? in SDKs
- problem with integrating PayPal checkout button onto my squarespace website shop in SDKs
- Javascript SDK throws 400 when trying to create order using Debit or Credit card in PayPal Payments Standard