Paypal. button in bootstrap 5 accordion

Question

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?

Answer 1

• 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.