Make stripe “data-amount” use a dynamic with a variable

问题:

I am in need of getting my script checkout to use my var $priceCheckout = $('#priceCheckout'); for the checkout price value.

I have tried to replace the data-amount="2000" with data-amount= $priceCheckout; without any luck. So to be cleare!

It needs to take my $priceCheckout and get it placede at data-amount so that the value of $priceCheckout will be the checkout price!

<form action="" method="POST">   <script     src="https://checkout.stripe.com/checkout.js" class="stripe-button"     data-key="Personal key"     data-amount= ???     data-name="Elo Calculator"     data-description="Checkout price"     data-image="/128x128.png"     data-locale="auto">   </script> </form> 

This is my script for it.

回答1:

You need to use a Checkout custom integration for this.

Here is a simple fiddle showing how to use Checkout with a user-specified amount: https://jsfiddle.net/ywain/g2ufa8xr/

You can use the same logic to plug in your own value as the amount parameter in the call to handler.open().

回答2:

The key here is that data-amount is a attribute to the HTML script tag. It is not a JavaScript variable, and you can not directly assign one to it in the HTML markup (like <element attribute=variable-name>).

However, you can assign a value to it using JavaScript like this:

$('.stripe-button').attr('data-amount', $priceCheckout); 

That code will change the attribute data-amount of any HTMl element with the class stripe-button to the value the variable $priceCheckout has when the code runs.

So when do you want to run it? You need to run it after the $priceCheckout is set to the variable (and you need to run it again to update if the price changes). But you need to run it before whatever code that uses the value runs.

回答3:

You can use Stripe's Custom Checkouts. Although, I found an easier way to do this through jQuery simply by remounting the script with the changed variable each time they increase the quantity:

var $priceCheckout = $('#priceCheckout');  $("#stripe-form").html(   '<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_123123123123" data-amount="' +     $priceCheckout.replace(".", "") +     '" data-zip-code="true" data-currency="usd" data-billing-address="true" data-shipping-address="true" data-name="Company Name" data-description="Product Name" data-image="https://image" data-locale="auto"></script>' ); 

文章来源: Make stripe “data-amount” use a dynamic with a variable