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:

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

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
Hi, can we provide the same design without pop up directly to the page?
Hi,
Yes, there is API.
can you provide me some links for thee codes or any other resource for that