Stripe has a new pretty easy pay with card button. I want to hack it so I can pass a custom amount to it.
I have a div with a form
<div>
<form>
<select>
<option value"1000">$10</option>
<option value:2000>$20</option>
</select>
OR an input button
<input id="amount" />
<button id="buy">Buy Shirt</button>
</form>
</div>
when the user clicks the buy shirt button the div to the pay with stripe button is shown and the value selected above is passed to the data-amount stripe field. The amount entered in the input will have to be multiplied by 100 since the stripe data-amount has to be in cents
<div id='form' style="display:none">
<form action="" method="POST">
<script
src=".js" class="stripe-button"
data-key="pk_kgwan(blah blah)"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
</div>
No Stripes doc on how to do this.
Stripe has a new pretty easy pay with card button. I want to hack it so I can pass a custom amount to it.
I have a div with a form
<div>
<form>
<select>
<option value"1000">$10</option>
<option value:2000>$20</option>
</select>
OR an input button
<input id="amount" />
<button id="buy">Buy Shirt</button>
</form>
</div>
when the user clicks the buy shirt button the div to the pay with stripe button is shown and the value selected above is passed to the data-amount stripe field. The amount entered in the input will have to be multiplied by 100 since the stripe data-amount has to be in cents
<div id='form' style="display:none">
<form action="" method="POST">
<script
src="https://checkout.stripe./v2/checkout.js" class="stripe-button"
data-key="pk_kgwan(blah blah)"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
</div>
No Stripes doc on how to do this.
Share Improve this question edited Apr 20, 2015 at 20:49 Adam Stelmaszczyk 19.9k4 gold badges72 silver badges111 bronze badges asked May 18, 2013 at 0:33 user2320607user2320607 4251 gold badge9 silver badges19 bronze badges 1- 5 I don't understand the down vote trolls. Isn't this a legitimate problem? – user2320607 Commented May 18, 2013 at 0:39
1 Answer
Reset to default 9First replace the script with a normal button:
<button id="customButton" class="btn btn-primary">Pay</button>
then insert a script like this. In my case, my radio buttons have a name of "deal". I loop through them to find the one that's selected, then insert the right value and description in the stripe open function:
<script>
$('#customButton').click(function(){
var token = function(res){
var $input = $('<input type=hidden name=stripeToken />').val(res.id);
$('form').append($input).submit();
};
var dealValue;
var deal = document.getElementsByName('deal');
for (var i = 0, length = deal.length; i < length; i++) {
if (deal[i].checked) {
dealValue = deal[i].value;
}
}
var description;
if(dealValue == 1000)
description = "small t-shirt";
else if(dealValue == 2000)
description = "medium t-shirt";
else if(dealValue == 3000)
description = "large t-shirt";
StripeCheckout.open({
key: 'putyourkeyhere',
amount: dealValue,
currency: 'usd',
name: 'putyourname',
description: description,
panelLabel: 'Checkout',
token: token
});
return false;
});
</script>