Stripe Checkout Example with Default Popup Form

I already have a post on my blog where described the payment process with the custom HTML form using stripe.js library. You can find it here. Now I want to show you the most simpest way of checkout for a single product (in our examples it will be WP plugin) on a WordPress-based website. Step […]

January 11, 2016

I already have a post on my blog where described the payment process with the custom HTML form using stripe.js library. You can find it here.

Now I want to show you the most simpest way of checkout for a single product (in our examples it will be WP plugin) on a WordPress-based website.

Step 1. Popup Form

Insert the code on the page with a product, do not forget to replace $plugin_id with your product ID and make sure that you get $plugin_price correctly for your website.

<?php
	$publishable_key = 'pk_YOUR_STRIPE_PUBLISH_KEY'; // get it in Account Settings -> API Keys
	$plugin_name = get_the_title( $plugin_id ); // plugin title
	$plugin_image_url = wp_get_attachment_url( get_post_thumbnail_id( $plugin_id ) ); // image URL, it may be your site logo as well
	$plugin_price = get_post_meta( $plugin_id, '_plugin_price', true ) * 100; // if currency is USD (default) the price should be in cents then
?>
<form action="<?php echo get_stylesheet_directory_uri() ?>/charge.php" method="post">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
	data-key="<?php echo $publishable_key; ?>"
	data-name="<?php echo $plugin_name; ?>"
	data-description="By Misha Rudrastyh"
	data-image="<?php echo $plugin_image_url; ?>" 
	data-amount="<?php echo $plugin_price; ?>"
	data-locale="auto"></script>
  <?php /* you can pass parameters to php file in hidden fields, for example - plugin ID */ ?>
  <input type="hidden" name="plugin_id" value="<?php echo $plugin_id; ?>">
</form>
<?php
/*
 You can also use:
 data-currency - Currency, 3-letter ISO code
 data-panel-label - Label of the checkout button, you can include {{amount}} variable in it
 data-zip-code - set "true" if you want Stripe to validate billing zip code
 data-billing-address - set "true" if you want Stripe to collect user billing address
 data-shipping-address - set "true" if you want Stripe to collect user shipping address
 data-email - if you already know user email, specify it here
 data-label - label of the default blue button
 data-allow-remember-me - set "true" to include "Remember me" option for future purchases
 data-bitcoin - set "true" to accept Bitcoin
 data-alipay - set "true" to accept Alipay
*/
?>

The result when you click «Buy now» button:

The example of Stripe popup checkout.

Demo

Test it by yourself. In the test mode you can use 4242 4242 4242 4242 with any CVC.

Step 2. The PHP code which process payments

To implement this you will need:

  • Download Stripe PHP library here.
  • Make sure that your server PHP version is 5.3.3 or higher.

This is the content of charge.php (look at the form action parameter in the previous step).

require_once( dirname(__FILE__) . '/../../../../wp-load.php' ); // WP environment
require_once( dirname(__FILE__) . '/stripe-php/init.php' ); // I placed the directory with Stripe PHP library in the theme folder
 
/* we specified this parameter as a hidden field */
$plugin_id = $_POST['plugin_id'];
 
/* run print_r( $_POST ) to view all available parameters */
 
/* if your plugin price looks like 9.59, then you need to *100 it */
$price = get_post_meta( $plugin_id, '_plugin_price', true ) * 100;
 
$secret = 'sk_YOUR_STRIPE_SECRET_KEY';  // you can get it in Stripe Account Settings -> API Keys
\Stripe\Stripe::setApiKey( $secret );
 
try {
	if ( !isset($_POST['stripeToken']) )
		throw new Exception('The Stripe Token is not correct');
 
	/* make a charge */
	\Stripe\Charge::create( array( 'amount' => $price, 'currency' => 'usd', 'source' => $_POST['stripeToken'], 'description' => 'Plugin (ID ' . $plugin_id . ') download for ' . $_POST['stripeEmail'] ) );
 
	/* if successful - send a plugin by email */
	$plugin_path = 'YOUR_PLUGIN_ZIP_FILE_PATH'; // you can store this information in custom fields for example
	$headers = 'From: Misha Rudrastyh <no-reply@rudrastyh.com>' . "\r\n";
	wp_mail( $_POST['stripeEmail'], 'Thanks for buying my plugin', 'The plugin is attached to this email.', $headers, $attachments );
 
} catch (Exception $e) {
	/*
	 * if something goes wrong
	 */ 
	echo $e->getMessage();
}

Only the best of WordPress

once a week, no spam

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email