Using JS variables inside Paypal JS API

[jonaswoehl]

Hello dear community,

I'm working on a project where a client offers different products on her website. She wants her customers to be able to push a button and directly pay via paypal. Currently there are four items to sell.

So I wanted to use the Paypal API. Since it's likely that the prices of the items change from time to time and I want her to be able to adjust them by herself I would like to pull the items prices from the HTML itself (for example via "innerHTML").

Currently I only have a solution where I have to hard-code the price into the JS-request from the Paypal-API. So I'm asking for a way to use variables inside the API request. Please see my current code attached.

To make the code look clean I would like to loop through all items containers and add their buttons with their specific prices this way.

<div class="offerBodyBooking">
							<div id="paypalCheckoutButtonContainer1"></div>
						</div>
					</div>
					<div class="offerFooter">
						<div class="offerFooterPrice">
							<span class="offerFooterPriceValue">65</span> <span class="offerFooterPriceCurrency">,-</span>
						</div>
					</div>

for (var i = 0; i < offerFooterPriceValue.length; i++) {

  paypal.Buttons({
      createOrder: function(data, actions) {
        var offerPriceValue = offerFooterPriceValue[i].innerHTML;
        // This function sets up the details of the transaction, including the amount and line item details.
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: offerPriceValue
            }
          }]
        });
      },
      style: {
        color: 'blue'
      }
    }).render('#paypalCheckoutButtonContainer' + i);

}

Thank you in advance for your help!

Edit: Is there a simpler way to only display the Paypal-button instead of also the credit-card etc.?

Only example I found was this one, but I thought there might be a way to have it all in one block.

  var paymentMethods = [
      paypal.FUNDING.PAYPAL,
      // paypal.FUNDING.VENMO,
      // paypal.FUNDING.CREDIT,
      // paypal.FUNDING.CARD
  ];
  // Loop over each funding source / payment method
  paymentMethods.forEach(function(fundingSource) {
      // Initialize the buttons
      var button = paypal.Buttons({
          fundingSource: fundingSource,
          style: {
            shape: 'pill',
            color: 'blue',
          }
      });
      // Check if the button is eligible
      if (button.isEligible()) {
        // Render the standalone button for that funding source
        button.render('#paypalCheckoutButtonContainer' + i);
        console.log("rendered: " + i);
      }
  });