CODEWITHSUNDEEP
jquerystripe-payments
OleHansen
OleHansen

Reputation: 111

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.

$(function () {
            // Store references to frequently used elements - for speed.
            var $divFrom = $('#division-from');
            var $divTo = $('#division-to');
            var $tierFrom = $('#tier-from');
            var $tierTo = $('#tier-to');

            var $price = $('#price');
            var $priceCheckout = $('#priceCheckout');

            // Select price calculation callback
            $(document).on('change', '.price-modifier', function () {
                var divFrom = $divFrom.val();
                var divTo = $divTo.val();
                var tierFrom = $tierFrom.val();
                var tierTo = $tierTo.val();

                // Error handling
                var errors = validatePriceModifiers(divFrom, tierFrom, divTo, tierTo);
                if (errors.length === 0) {
                    // No errors
                    var price = getPrice(divFrom, tierFrom, divTo, tierTo);
                    $price.html(price + ' €' + '<br /> <br />' + '<button type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-info">Buy</button>');
                    $priceCheckout.html(price);
                } else {
                    // Display errors
                    $price.empty();
                    for (var i = 0; i < errors.length; i++) {
                        $price.append($('<p>').html(errors[i].message));
                    }
                }
            });
        });

Upvotes: 4

Views: 8136

Answers (3)

Ryan Walker
Ryan Walker

Reputation: 844

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>'
);

Upvotes: -1

Ywain
Ywain

Reputation: 17503

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().

Upvotes: 5

Anders
Anders

Reputation: 8577

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.

Upvotes: 0

Related Questions