Using Stripe Checkout for Subscriptions
In this post we will show you Stripe Checkout for Subscriptions, hear for Stripe Checkout for Subscriptions we will give you demo and example for implement.
Stripe provides a stunning pre-built credit card type referred to as Stripe Checkout. Checkout is principally supposed for natural event purchses. many of us wish to use it for his or her Stripe-powered subscription sites therefore during this article i am planning to gift an honest means of doing that.
this is very basic Checkout button (in truth, identical button as on Stripe’s documentation site):
<!-- simple Stripe Checkout for Subscriptions --> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_UWfE4BCxaLbO2z67JULtOXzi" data-image="http://www.onlinecode.org/wp-content/uploads/2016/11/ico.jpg" data-name="Stripe Checkout Demo onlinecode" data-description="2 widgets ($69.99)" data-amount="6999"> </script>
There ar many things in here that do not very work well for a subscription website, however they are straightforward to mend. as an example, we do not need to indicate associate quantity in this approach and therefore the description does not create a lot of sense. Here’s a another version with a number of changes:
<!-- simple Stripe Checkout for Subscriptions --> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_UWfE4BCxaLbO2z67JULtOXzi" data-image="http://www.onlinecode.org/wp-content/uploads/2016/11/ico.jpg" data-name="Demo onlinecode strip Site" data-description="Pro Stripe Checkout Subscription ($69.99 per month)" data-panel-label="Subscribe" data-label="Subscribe" data-amount="6999"> </script>
Stripe enables you to customise most of the text on the shape. during this example, we have a tendency to modified tha panel button to mention “Subscribe” rather than “Pay”, and adjusted the outline to one thing a lot of applicable for our web site. you’ll additionally see that we have a tendency to additional a example variable to the data-description attribute, thus if we have a tendency to had multiple tiers all we’d need to amendment is that the word “Pro” and also the data-amount attribute.
There’s one last item that we will amendment on here. there is that “Remember Me” checkbox, which might be confusing for purchasers. they are language up for a subscription web site, thus are not you already memory them? fortunately, Stripe recently additional the power to disable that checkbox:
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_UWfE4BCxaLbO2z67JULtOXzi" data-image="http://www.onlinecode.org/wp-content/uploads/2016/11/ico.jpg" data-name="Demo onlinecode strip Site" data-description="Pro Stripe Checkout Subscription ($69.99 per month)" data-panel-label="Subscribe" data-label="Subscribe" data-amount="6999" data-allow-remember-me="false"> </script>
Efficient, stunning kind while not having to style it yourself. however what if you do not like that blue button? Stripe provides a Javascript API thus you’ll be able to create any link or button appear Checkout:
<button class="btn btn-primary btn-large" id="stripe-demo">Subscribe</button>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: "pk_test_UWfE4BCxaLbO2z67JULtOXzi",
image: "http://www.onlinecode.org/wp-content/uploads/2016/11/ico.jpg",
name: "Demo onlinecode strip Site",
description: "Pro Stripe Checkout Subscription ($69.99 per month)",
panelLabel: "Subscribe",
allowRememberMe: false
});
document.getElementById('stripe-demo').addEventListener('click', function(e) {
handler.open();
e.preventDefault();
});
</script>
Pretty undemanding. each attribute that you just pass into the easy integration victimization information attributes instead gets passed into the piece technique. you’ll be able to pass overrides into the open technique, therefore as an example, if you had a series of buttons with a selected category and information attributes for the outline, you may get that off of the event target and pass it into open.
But what regarding passwords?
If you are building a subscription product you will likely wish the user to line their watchword. there is 2 ways in which you’ll be able to use Stripe Checkout and still have the user set their password:
- Have a second step once Stripe Checkout that enables the user to line up their account, as well as their watchword.
- Send a confirmation email to the user straightaway once the subscription flow that brings them to a watchword reset screen.
Of the 2 I like the second, since you ought to be confirming the user’s email address anyway. That said, you ought to check along with your customers and see what works best for them.
Now reproof Stripe Checkout Subscriptions?
Of course, none of this is often value something while not making the purchasers. For that, you will need to use Stripe’s server-side genus Apis along side your secret key. Stripe has excellent documentation on how this works.
Hope this code and post will helped you for implement Using Stripe Checkout for Subscriptions. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org
Reference @ masteringmodernpayments.com