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

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

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter