How to set amount of an item dynamically in javascript

I am trying to integrate a payment gateway on my website. Here is my code

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

main.js

openKkiapayWidget({
    amount:"50000",
    position:"center",
    callback:"",
    theme:"red",
    key:"< my-api-key >"
});

Now, the problem is that there are many products with different prices; but here I can only put a static amount (50000) which applies to all products when the action button is clicked. Is there any way I can dynamically get the price of products and set it in my function in case of a product that has a different price?

I tried this but it doesn’t work

var price = $(this).amount("price");
openKkiapayWidget({
    amount:""+price+"",
    position:"center",
    callback:"",
    theme:"red",
    key:"<my-api-key>"
});