Josan Iracheta Josan Iracheta - 1 year ago 110
Javascript Question

stripe checkout custom button not charging

I am trying to get Stripe's Checkout Custom Button to charge a credit card but all it does is minimize after I enter the credit card details. I am using the code found in the documentation but I can't get it to work. The simple button is easy to use and I figured it would be as easy as just customizing that one but it's very different.

Here's the code:

Payment Page

<form action="charge.php" method="post">
<script src=""></script>
<input type="submit" value="Pay with card" id="customButton"/>
<?php require_once('./config.php'); ?>
var handler = StripeCheckout.configure({
key: '<?php echo $stripe['publishable_key']; ?>',
image: 'favicon.png',
token: function(token, args) {
// Use the token to create the charge with a server-side script.
// You can access the token ID with ``

document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options{
name: 'Imprintnation',
description: 'Decals',
amount: <?php echo $stripeTotal; ?>


Charge Page(charge.php)

require_once(dirname(__FILE__) . '/config.php');

$token = $_POST['stripeToken'];

$customer = Stripe_Customer::create(array(
'email' => '',
'card' => $token

$charge = Stripe_Charge::create(array(
'customer' => $customer->id,
'amount' => 5000,
'currency' => 'usd'

echo '<h1>Successfully charged $5!</h1>';

Configuration Page(config.php)


$stripe = array(
secret_key => 'sk_test_************************',
publishable_key => 'pk_test_************************'


What am I missing here? I can't even get it to retrieve a token.

How can I retrieve a token and charge a card?

Answer Source

Finally got it to work. Had to change a bunch of it. Here is the code:

Payment page

<form action="charge.php" method="post">
<script src=""></script>
<script src=""></script> 

<button id="customButton">Pay with Card</button>
border:2px solid green;
 var token = function(res){
 var $input = $('<input type=hidden name=stripeToken />').val(;
 key:         '<?php echo $stripe['publishable_key']; ?>',
 address:     false,
 amount:      '<?php echo $price; ?>',
 currency:    'usd',
 name:        'test',
 description: '<?php echo $desc; ?>',
 panelLabel:  'Checkout',
 token:       token

 return false;
 <input type="hidden" name="desc" value="<?php echo $desc; ?>"/>
 <input type="hidden" name="totalPrice" value="<?php echo $price; ?>"/>


require_once(dirname(__FILE__) . '/config.php');

$token  = $_POST['stripeToken'];
$amount = $_POST['totalPrice'];
$desc = $_POST['desc'];
$percent = "0.01";
$realAmount = $amount * $percent;
try {       
$charge = Stripe_Charge::create(array(
    'card' => $token,
    'amount'   => $amount,  
    'currency' => 'usd',
    'description' => $desc

    } catch(Stripe_CardError $e) {
// The card has been declined

echo "<h1>Successfully charged $$realAmount!</h1>";

I wish Stripe's documentation was more straightforward but this code handles the charge and it logs it on your dashboard.