Stripe Checkout charging a card - php

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....?

Answer 1

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
}
?>

Answer 2

Like you say, you need to generate a Stripe token and do a form post. Without a valid token you can not charge the card.
Here's a guide on how to create custom forms with Stripe, including how to generate a token:
https://stripe.com/docs/custom-form
An easier way is to simply embed their ready-to-use checkout:
https://stripe.com/docs/checkout/tutorial

Answer 3

If your are using mamp. UPDATE TO MAMP 4
stripes API no longer supports older versions of MAMP.