Stripe is an online payment platform that helps businesses to process payments online securely and quickly. It is one of the most popular payment gateways that allows merchants to accept payments from customers in multiple currencies. Stripe offers several features to support subscription billing for merchants, which can be integrated into their web or mobile applications. This document will guide you through the process of using Stripe’s Card Payment Method element to create and pay for a subscription.
Step 1: Set up your Stripe account
Before you can start accepting payments using Stripe, you need to set up your Stripe account. If you don’t have an account, you can sign up for a free account at stripe.com. Once you have created your account, you need to log in to the Stripe dashboard and set up your payment processing settings.
Step 2: Install the Stripe Card Payment Method element
Once your Stripe account is set up, the next step is to install the Stripe Card Payment Method element. The Card Payment Method element is a pre-built UI component that you can use to collect credit card information from customers.
To install the Card Payment Method element, you can use Stripe’s official JavaScript library or one of the many third-party libraries available for different programming languages. You can find detailed instructions for installing the Card Payment Method element in Stripe’s documentation.
Step 3: Create a subscription plan
Before you can start accepting payments for a subscription, you need to create a subscription plan in your Stripe account. To create a subscription plan, log in to your Stripe dashboard, navigate to the “Billing” section, and select “Subscription plans.” Click the “Create” button to create a new plan and set the plan’s name, price, billing interval, and other details.
Step 4: Collect payment information from the customer
To collect payment information from the customer, you need to use the Card Payment Method element that you installed in step 2. The Card Payment Method element is a secure and PCI-compliant way of collecting credit card information from customers.
To use the Card Payment Method element, you need to create a form in your application that includes the Card Payment Method element. The Card Payment Method element will handle the collection of credit card information from the customer and tokenize the card details. The token can then be used to create a customer in your Stripe account or to charge the customer for a subscription.
Step 5: Create a customer and subscribe to a plan
Once you have collected the customer’s payment information, you can create a customer in your Stripe account and subscribe to a plan. To create a customer and subscribe to a plan, you can use Stripe’s API or one of the many third-party libraries available for different programming languages.
To create a customer and subscribe them to a plan using Stripe’s API, you can use the following steps:
Create a customer using the tokenized card details and the customer’s email address.
Subscribe the customer to the plan using the customer ID and the plan ID.
Step 6: Handle subscription events
After the customer is subscribed to a plan, Stripe will automatically handle the billing and renewal of the subscription. Stripe will also notify you of important subscription events such as payments, failed payments, and cancellations. You can use Stripe’s webhooks to receive these notifications and take appropriate actions in your application.
Conclusion
Install the Stripe PHP library
Install the library with composer and initialize it with your secret API key. Alternatively, if you’re starting from scratch and need a composer.json file, download the files using the link in the code editor.
Using Composer
composer requires stripe/stripe-php
Or download the stripe-php library source code directly from GitHub. : https://github.com/stripe/stripe-php
Create a PaymentIntent
Add an endpoint on your server that creates a PaymentIntent. A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s client secret in the response to finish the payment on the client.
Create file: create.php
In this file, we have written code for creating a customer (if we do not have a stripe customer id) and then need to create a subscription
Build a checkout page on the client: checkout.html
In the checkout file, we write code for mounting a card, for mounting a card add an empty placeholder div to your checkout form. Stripe inserts an iframe into this div that securely collects card information.
After creating checkout.html you should add style on the card element, So now create a CSS file style.css
Initialize Stripe.js
Initialize Stripe.js with your publishable API keys. You will use Stripe.js to create the card input field and complete the payment on the client.
// This is your test publishable API key.
const stripe = Stripe(“your publishable API key”);
Handle the submitted event
Listen to the form’s submit event to know when to confirm the payment through the Stripe API.
If you are looking for any ready solution for stripe gateway please contact us