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?