Estoy tratando de integrar una pasarela de pago en mi sitio web. Aquí está mi código
productos.php
<div class='row footer'> <div class='col-5 col-lg-5'> <button class='btn btn-action kkiapay-button' amount-price='" . $row['price'] . "' onclick='openKkiapayWidget()'>" . $row['action'] . " </button> </div> <div class='col-7 col-lg-7 price'> <span>XOF " . number_format($row['price']) . "</span> </div> </div>principal.js
openKkiapayWidget({ amount:"50000", position:"center", callback:"", theme:"red", key:"< my-api-key >" });Ahora bien, el problema es que hay muchos productos con diferentes precios; pero aquí solo puedo poner una cantidad estática (50000) que se aplica a todos los productos cuando se hace clic en el botón de acción. ¿Hay alguna forma en que pueda obtener dinámicamente el precio de los productos y establecerlo en mi función en caso de que un producto tenga un precio diferente?
Intenté esto pero no funciona
var price = $(this).amount("price"); openKkiapayWidget({ amount:""+price+"", position:"center", callback:"", theme:"red", key:"<my-api-key>" });Pase el elemento como argumento a una función "nueva" para manejar el precio antes de llamar a su widget. Se puede hacer usando this entre paréntesis de la llamada a la función onclick . Entonces podrá recuperar el precio del atributo amount-price .
<div class='row footer'> <div class='col-5 col-lg-5'> <button class='btn btn-action kkiapay-button' amount-price='" . $row['price'] . "' onclick='openKkiapayWidgetWithPrice(this)'>" . $row['action'] . " </button> </div> <div class='col-7 col-lg-7 price'> <span>XOF " . number_format($row['price']) . "</span> </div> </div> function openKkiapayWidgetWithPrice(button) let price = button.getAttribute("amount-price"); // The call to your widget openKkiapayWidget({ amount: price, position: "center", callback: "", theme: "red", key: "< my-api-key >" }); } Si amount-price incluye un símbolo de corriente, debe eliminarlo.