Stripe Checkout charging a card

Question

I have this code that works great.

<input class="form-control"
   type="number"
   id="custom-donation-amount"
   placeholder="50.00"
   min="0"
   value="50"
   step="10.00"/>
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton" class="pay-button"> 
    <h4 class="donate-text button">Donate by
    <img src="http://#/testing/credit-card.png" ></h4>
</button>

<script>
  var handler = StripeCheckout.configure({
key: 'pk_test_mytestingkey',
image: '',
locale: 'auto',
token: function(token) {
  // Use the token to create the charge with a server-side script.
  // You can access the token ID with `token.id`
}
  });

 $('#customButton').on('click', function(e) {
// Open Checkout with further options
 var amount = $("#custom-donation-amount").val() * 100;
handler.open({
  name: 'Testing',
  description: 'Testing',
  amount: amount
});
e.preventDefault();
});

 // Close Checkout on page navigation
 $(window).on('popstate', function() {
    handler.close();
  });
 </script>

It states on the documentation: "On your server, grab the Stripe token in the POST parameters submitted by your form. From there, it's one simple API call to charge the card:" I am trying to CHARGE the card information. Stripe provides the following API call to do that: I am assuming this is a charge.php file?

// Set your secret key: remember to change this to your live secret key in production
// See your keys here https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("sk_test_mykey");

// Get the credit card details submitted by the form
$token = $_POST['stripeToken'];

// Create the charge on Stripe's servers - this will charge the user's card
try {
  $charge = \Stripe\Charge::create(array(
    "amount" => 1000, // amount in cents, again
    "currency" => "usd",
    "source" => $token,
    "description" => "Example charge"
    ));
} catch(\Stripe\Error\Card $e) {
  // The card has been declined
}

My question: how do I charge the card using the following code without there being a <form> method post, or <form> action...? It's using javascript to capture the token. But I don't know how to send that token to a charge.php file... Basically how do I grab that stripe token and initiate the API call? How do I initiate the API call....?

dontanios dontanios · Accepted Answer · 2016-03-06T23:00:10

You should have a charge.php file on your server and use $.post to send to the token to the php.

// make sure you have the right path to charge.php
// pass the token to the php file with POST, your php is expecting $_POST['stripeToken']
    token: function(token) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id
        $.post( "charge.php", { stripeToken: token.id})
           // check if it worked
          .done(function( data ) {
            console.log( "Card charged: " + data );
          });
    }

Your charge.php file, make sure you installed the Stripe PHP library

<?
// composer require stripe/stripe-php
require 'vendor/autoload.php';
// Set your secret key: remember to change this to your live secret key in production
// See your keys here https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("sk_test_mykey");

// Get the credit card details submitted by the form
$token = $_POST['stripeToken'];

// Create the charge on Stripe's servers - this will charge the user's card
try {
  $charge = \Stripe\Charge::create(array(
    "amount" => 1000, // amount in cents, again
    "currency" => "usd",
    "source" => $token,
    "description" => "Example charge"
    ));
} catch(\Stripe\Error\Card $e) {
  // The card has been declined
}
?>

Stripe Checkout charging a card

3 Answers