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

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me