Tengo un acordeón con algunos artículos. Ahora quiero mostrar un botón de pago de PayPal en cada artículo de acordeón. Estoy usando el SDK de Paypal JS. Entonces, funciona solo para el primer elemento de acordeón abierto. Allí se muestra el botón de paypal, puedo hacer clic en él y se abre el modo de paypal para iniciar sesión y pagar.
Creé un archivo donde agregué el "contenedor de botones de paypal" e incluí un archivo PHP con el script JS de paypal:
<?php include_once ('method/paypal_accordion.php'); ?> <div id="paypal-button-container"></div>En el archivo incluido 'method/paypal_accordion.php' tengo el script de paypal con las variables para el pago:
<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) { ... }); },¿Cómo se puede mostrar el botón de PayPal en cada artículo de acordeón abierto? Actualmente solo veo el div de paypal allí, pero ningún botón:
<div id="paypal-button-container"></div>¿Debo recargar el DOM o hay un evento en el acordeón para hacer eso? ¿O debería usar un botón con un formulario o algún AJAX?
Cada div en el que desee representar un botón de PayPal debe tener una id única
Cada vez que invoque paypal.Buttons({...}) y llame a .render('#some-id-goes-here') , el selector para renderizar debe ser uno de esos id.