We Keep Coding

Paypal. button in bootstrap 5 accordion

I have an accordion with some items. Now I want to show a paypal pay button in each accordion item. I am using the paypal JS SDK. So for it is working just for the first open accordion item. There the paypal button is shown, I can click on it and paypal modal is opening to login and pay.
I have created a file where I have added the "paypal-button-container" and included a PHP file with the paypal JS script:
<?php
include_once ('method/paypal_accordion.php');
?>
<div id="paypal-button-container"></div>
In the included file 'method/paypal_accordion.php' I have the paypal script with the variables for the payment:
<script>
// Loop over each funding source/payment method
var FUNDING_SOURCES = [
paypal.FUNDING.PAYPAL
];
FUNDING_SOURCES.forEach(function(fundingSource) {
// Initialize the buttons
var button = paypal.Buttons({
fundingSource: fundingSource,
createOrder: function (data, actions) {
return actions.order.create({
application_context: {
brand_name: 'my-page.com',
locale: 'en_gb',
shipping_preference: 'SET_PROVIDED_ADDRESS',
},
intent: 'CAPTURE',
payer: {
email_address: '<?php echo $email; ?>',
...
onApprove: function (data, actions) {
return actions.order.capture().then(function (orderData) {
...
});
},
How can the paypal button be shown on every opened accordion item?
Currently I just see the paypal div there, but no button:
<div id="paypal-button-container"></div>
Should I reload the DOM or is there an event in the accordion to do that?
Or should I use a button with a form or some AJAX?

Each div where you want to render a PayPal button must have a unique id
Each time you invoke paypal.Buttons({...}) and call .render('#some-id-goes-here'), the selector to render in should be one of those ids.

Paypal smart button integration side by side

I have trouble with this Paypal smart buttons. Even it it looks simple as I imagine :) can't get it to work.
I have three items, side by side in separate divs and want to add paypal smart buttons under each item but only different price.
When I put this paypal code under first, it is working like a charm.
<div id="paypal-button-container"></div>
<!-- <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR" data-sdk-integration-source="button-factory"></script> -->
<script src="https://www.paypal.com/sdk/js?client-id=ARcbGj17hMo1yw4nEMDB5E-Y7W00gbie9F_zb0m--XCOjKWo4jIddFV9N5UzbluK-if61HLUVs0rQ7zC&currency=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'pay',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '13.88'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
window.open('www.google.ba');
});
}
}).render('#paypal-button-container');
</script>
But when I put same code with changed money value it only shows that second one, and also when I put under third item it shows only that one.
I tried to render.('#custompaypalbutton') - to change class of button div where it shows up but nothing changed.
Am I missing something?
Do I maybe need different paypal app (REST Api) for every button that will generate new ID?

<script src="https://www.paypal.com/sdk/js... must only be loaded once per page
Each button should .render('...') to its own container element

PayPal Express (checkout.js): Disable enter key

When a user presses the enter key on my site the PayPal Express modal pops up. I need to prevent this happening.
I am using client-side PayPal Express (checkout.js).
I have tried $("#paypal-button").blur()
What I need is a way to prevent the box popping up, by setting a JavaScript variable (some way to validate).
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: 35, currency: 'USD' }, description: name + " " + email, custom: 'New York'
}
]
},

You can add the blur method to the button in onCancel and onAuthorize processing like so;
onCancel: function(data, actions) {
$("#paypal-button").blur()
},
onAuthorize: function(data, actions) {
$("#paypal-button").blur();
return actions.payment.execute().then(function(payment) {
});
}
This should remove focus from the button after the modal is closed

Paypal API Express checkout error: Document is ready and element [object Object] does not exist

I am working with paypal and I need to render multiple paypal express checkout buttons in my table.
I followed a solution I found in this link
and here's what I did.
document.querySelectorAll('.btn-paypal').forEach(function(){
var dis = $(this);
var amount = dis.data('amount');
paypal.Button.render({
env: 'sandbox',
style: {
label: 'checkout',
size: 'medium', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
client: {
sandbox: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-w6Q9rX2BdH1',
production: '<insert production client id>'
},
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: amount, currency: 'JPY' }
}
]
}
});
},
commit: true,
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(paymentDetails) {
console.log(paymentDetails)
swal({
title: "Confirm Payment!",
text: "Confirm the amount of ¥"+paymentDetails.transactions[0].amount.total,
type: "info",
confirmButtonClass: "btn btn-danger",
confirmButtonText: "Yes! Continue Payment",
showCancelButton: true,
cancelButtonText: "No! Cancel Transaction"
},
function(){
$('.ajax-loading').show();
return actions.payment.execute().then(function(){
alert('Payment Success');
})
});
});
},
onError: function(err) {
$('.ajax-loading').hide();
swal('Ooops!','Paypal failed to load. Please click the paypal button again!','error');
console.log(err);
}
}, dis);
})
when I try to run this code I get no button displayed in the table and an error appears in the console saying, Uncaught Error: Document is ready and element [object Object] does not exist
What is my error here? Please help.
Thanks!

I have a single Paypal button, but had the same error. The HTML example states
<div id="paypal-button"></div>
Braintree manual
while the script is in a separate file. It seems that the div element is not yet rendered while the script is loading.
I simply moved the script inside the div element and now the button appears. Make sure the script does not load elsewhere prior this point.

If you are using a js framework like Vue for example, just load it first in the mounted hook and it should work.

Paypal Checkout error - ReferenceError: actions is not defined

I'm trying to implement a Paypal checkout button, using the tutorial here:
https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/client-side-REST-integration/
I have the checkout.js file on the page:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
The button code is:
<div id="paypal-button"></div>
<script>
paypal.Button.render({
env: 'sandbox', // 'sandbox' Or 'production',
client: {
sandbox: '<sandbox id>',
production: ''
},
locale: 'en_GB',
commit: true, // Show a 'Pay Now' button
payment: function() {
// Set up the payment here
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1.00', currency: 'GBP' }
}
]
}
});
},
onAuthorize: function(data, actions) {
// Execute the payment here
return actions.payment.execute().then(function(payment) {
// The payment is complete!
// You can now show a confirmation message to the customer
});
}
}, '#paypal-button');
</script>
But when I click the button I get "ReferenceError: actions is not defined" in the console and nothing happens. Am I supposed to be including another Javascript file, because it's not mentioned in the tutorial?

payment: function() {
should be
payment: function(data, actions) {