I'm implementing Stripe into a django website and everything is working except for one part. In my cart, users can update the items which changes the total. Everything is working correctly except for setting the data-amount on the Stripe Checkout js script.
When the page loads, everything works great, however if the customer changes their cart, the data-amount does not update. I have another box which shows the total, and that amount updates fine.
<!-- here is the script tag in HTML-->
<script
id="stripe-script"
src="https://checkout.stripe.com/checkout.js"
class="stripe-button"
data-image="{% static 'img/marketplace.png' %}"
data-key="{{ STRIPE_PUBLIC_KEY }}"
data-name="Serendipity Artisan Blends"
data-description="Purchase Items"
data-amount="{{ cart_stripe_total }}">
</script>
And then my javascript that attempts to update is this:
function updateTotal(amount) {
/* update the total in the cart in both the table cell and
in the stripe button data-amount */
var totalStr = shoppingTotalCell.text().replace('$', ''),
originalTotal = parseFloat(totalStr),
newTotal = originalTotal + amount,
newTotalStripe = newTotal * 100,
newTotalStr = newTotal.toFixed(2),
script = $('#stripe-script');
shoppingTotalCell.text('$' + newTotalStr);
console.log(script.data("amount"));
// this returns the correct original amount
script.data("amount", newTotalStripe);
console.log(script.data("amount"));
/* this returns the updated amount, however the HTML data-amount
attribute does not update. */
}
From the Stripe dashboard side menu, click on Settings and then click on Bank accounts and scheduling. Click on the Edit button next to the currently linked bank. Provide the new bank account information. Click Update bank account.
Is Stripe checkout deprecated? Stripe will not be updating the Stripe Checkout modal to comply with Strong Customer Authentication (SCA) and as a result they no longer recommend using that integration.
We're a certified PCI Service Provider Level 1. This is the most stringent level of certification available in the payments industry. To accomplish this, we use the best-in-class security tools and practices to maintain a high level of security at Stripe.
The legacy version of Checkout presented customers with a modal dialog that collected card information, and returned a token or a source to your website. In contrast, the current version of Checkout is a smart payment page hosted by Stripe that creates payments or subscriptions.
Turns out that to have a dynamic data-amount for the stripe payment, you have to use Custom Checkout instead of Simple Checkout. This code did the trick.
<button class="btn btn-primary btn-lg" id="stripe-button">
Checkout <span class="glyphicon glyphicon-shopping-cart"></span>
</button>
<script>
$('#stripe-button').click(function(){
var token = function(res){
var $id = $('<input type=hidden name=stripeToken />').val(res.id);
var $email = $('<input type=hidden name=stripeEmail />').val(res.email);
$('form').append($id).append($email).submit();
};
var amount = $("#stripeAmount").val();
StripeCheckout.open({
key: '{{ STRIPE_PUBLIC_KEY }}',
amount: amount,
name: 'Serendipity Artisan Blends',
image: '{% static "img/marketplace.png" %}',
description: 'Purchase Products',
panelLabel: 'Checkout',
token: token
});
return false;
});
</script>
OR you can just use the following code before clicking the stripe button ;-)
StripeCheckout.__app.configurations.button0.amount = 1234;
$('#stripe-button').click();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With