{"id":125547,"date":"2022-06-08T11:01:15","date_gmt":"2022-06-08T11:01:15","guid":{"rendered":"https:\/\/phppot.com\/?p=17188"},"modified":"2022-06-08T11:01:15","modified_gmt":"2022-06-08T11:01:15","slug":"woocommerce-stripe-payment-gateway-integration-in-easy-steps","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/06\/08\/woocommerce-stripe-payment-gateway-integration-in-easy-steps\/","title":{"rendered":"WooCommerce Stripe Payment Gateway Integration in Easy Steps"},"content":{"rendered":"<div class=\"modified-on\" readability=\"7.047619047619\"> by <a href=\"https:\/\/phppot.com\/about\/\">Vincy<\/a>. Last modified on June 8th, 2022.<\/div>\n<p>Payment gateway integration is an important module in building an eCommerce website. For a WooCommerce store, there are several options to integrate a payment gateway.<\/p>\n<p>A payment gateway is to enable an online payment feature at the end of the e-shopping process. There are numerous payment gateway providers that give secured, authentic payment processes via the eCommerce application.<\/p>\n<p>The below list shows some of the examples payment gateway providers for the <a href=\"https:\/\/phppot.com\/wordpress\/ecommerce-website-set-up-using-wordpress-woocommerce\/\">WooCommerce store<\/a>.<\/p>\n<ol>\n<li><a href=\"https:\/\/phppot.com\/shop\/paypal-checkout-payment-gateway-integration-with-smart-payment-buttons-maia\/\">PayPal<\/a><\/li>\n<li>Stripe<\/li>\n<li>AfterPay<\/li>\n<li>Amazon Pay<\/li>\n<li>PayFast<\/li>\n<li>Square and more\u2026<\/li>\n<\/ol>\n<p>Stripe is one of the best choices that provides good payment services..<\/p>\n<h2>Reasons to have Stripe for WooCommerce<\/h2>\n<p>First, we will see why Stripe is the best to have this payment option regardless of WooCommerce. Then, we can see the combined advantages of <a href=\"https:\/\/phppot.com\/php\/stripe-payment-gateway-integration-using-php\/\">having Stripe<\/a> in WooCommerce.<\/p>\n<p>Stripe is one of the most widely used payment gateway providers. It is a worldwide popular solution for card payments. It has several advantages and they are,<\/p>\n<ul>\n<li>Ease of integration and use.<\/li>\n<li>Reasonable transaction fee and conversion rate.<\/li>\n<li>Seamless experience with <a href=\"https:\/\/phppot.com\/jquery\/jquery-credit-card-validator\/\">credit or debit card payments<\/a>.<\/li>\n<li>Secure payment lifecycle with proper webhook registrations.<\/li>\n<\/ul>\n<h3>Merits of integrating Stripe in WooCommerce<\/h3>\n<ul>\n<li>Accepts all popular credit or debit card payments via web or mobile.<\/li>\n<li>Embedded inline Stripe payment elements instead of redirecting. It will reduce drop offs and increase the conversion rates.<\/li>\n<li>By using popular WooCommerce Stripe plugins, it results robust solutions for making payments.<\/li>\n<li>Possibility for easy upgrading to get latest and additional features.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-17328\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-payment-550x222.jpg\" alt=\"woocommerce stripe payment\" width=\"550\" height=\"222\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-payment-550x222.jpg 550w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-payment-300x121.jpg 300w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-payment-768x310.jpg 768w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-payment.jpg 800w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<h2>Methods of integrating Stripe in a WooCommerce store<\/h2>\n<p>Various plugins are there to integrate a Stripe payment gateway. Three of them are listed below.<\/p>\n<ol>\n<li>WooCommerce Stripe Payment Gateway<\/li>\n<li>Payment Plugins for Stripe WooCommerce<\/li>\n<li>Accept Stripe Payments<\/li>\n<\/ol>\n<p>The following sections describe these plugins and show how to use them to set up the Stripe payment.<\/p>\n<p><strong>Note:<\/strong> Before starting integration, <a href=\"https:\/\/phppot.com\/php\/stripe-payment-gateway-integration-using-php\/#create-a-stripe-account-stripe-account-and-get-api-keys\">get the Stripe API keys<\/a>.<\/p>\n<h2>1. WooCommerce Stripe Payment Gateway plugin<\/h2>\n<p>This is with the latest possible version and the highest number of active installations. Let\u2019s see its features and advantages below.<\/p>\n<table class=\"tutorial-table\">\n<tbody>\n<tr>\n<td>Version<\/td>\n<td>6.4.0<\/td>\n<\/tr>\n<tr>\n<td>Active Installations<\/td>\n<td>900,000+<\/td>\n<\/tr>\n<tr>\n<td>Last Updated<\/td>\n<td>1 day ago<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Features<\/h3>\n<ul>\n<li>Accepts majority of the card payments.<\/li>\n<li>Supports Apple Pay, Google Pay, and Microsoft Pay based on the client.<\/li>\n<li>Builds an <a href=\"https:\/\/phppot.com\/jquery\/inline-insert-using-jquery-ajax\/\">inline<\/a> Stripe payment with WooCommerce instead of <a href=\"https:\/\/phppot.com\/php\/stripe-one-time-payment-with-prebuilt-hosted-checkout-in-php\/\">redirecting to the hosted services<\/a>.<\/li>\n<li>Supports extensions like WooCommerce Subscriptions.<\/li>\n<li>Supports connecting Web Payment API to pay via mobile devices.<\/li>\n<\/ul>\n<h3>Advantages<\/h3>\n<ul>\n<li>Keeps track of customer instances and saves time on successive payments.<\/li>\n<li>Allows quick checkout with touch or face <a href=\"https:\/\/phppot.com\/php\/php-laravel-login-authentication-to-allow-user-via-auth-routes\/\">authentication<\/a> with Apple ID.<\/li>\n<li>Supports quick payments with a few taps using Web Payment API services.<\/li>\n<\/ul>\n<h3>Steps to integrate<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-gateway-stripe\/\">Download this plugin<\/a> from the official website and unzip it into the WordPress plugin directory. Then, log in to WordPress admin and go to Plugins-&gt;Installed Plugins to activate the plugin.<\/p>\n<p>This plugin helps to create a stripe payment in a shopping cart in 2 steps. Click plugin settings and follow the steps below.<\/p>\n<ol>\n<li>Choose test mode and set up the keys (Publishable, Secret key and Webhook secret key).<\/li>\n<li>Configure <a href=\"https:\/\/phppot.com\/php\/how-to-integrate-paypal-checkout-in-ecommerce-website\/\">Express Checkout<\/a> settings. It also allows customizing the Stripe payment element.<\/li>\n<\/ol>\n<h3>Stripe element in WooCommerce checkout<\/h3>\n<p>Once done with the setup, the front-end shop displays the option to checkout with Stripe. The following screenshot shows the Stripe (card only) option on the WooCommerce place-order page.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-17308\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe.jpg\" alt=\"WooCommerce Stripe\" width=\"500\" height=\"754\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe.jpg 500w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-199x300.jpg 199w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\"><\/p>\n<h2>2. Payment Plugins for Stripe WooCommerce<\/h2>\n<p>It supports card payments, mobile payments, direct electronic payments like ACH and more.<\/p>\n<p>It requires WordPress version 5.6 or higher. The key information on the plugin state is shown in the below table.<\/p>\n<table class=\"tutorial-table\">\n<tbody>\n<tr>\n<td>Version<\/td>\n<td>3.3.19<\/td>\n<\/tr>\n<tr>\n<td>Active Installations<\/td>\n<td>80,000+<\/td>\n<\/tr>\n<tr>\n<td>Last Updated<\/td>\n<td>2 months ago<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Features<\/h3>\n<ul>\n<li>Supports browser payments like Google Pay and <a href=\"https:\/\/phppot.com\/php\/stripe-apple-pay\/\">Apple Pay<\/a> in the product, cart, and checkout pages.<\/li>\n<li>Provides 3D secure 2.0.<\/li>\n<li>Allows add-ons like WooCommerce Subscriptions, Pre-Orders and Blocks.<\/li>\n<\/ul>\n<h3>Advantages<\/h3>\n<ul>\n<li>It\u2019s an official Stripe partner by which it has high dependability and trustworthiness.<\/li>\n<li>It has less friction and makes easy seamless payments to increase the conversion rate.<\/li>\n<\/ul>\n<h3>Steps to integrate<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woo-stripe-payment\/\">Download plugin<\/a> and set it up in the WordPress shop. Go to plugin settings to configure the Stripe keys and more directives.<\/p>\n<p>The settings page contains many tabs to group the configurations. Let\u2019s see some of the configurations of the plugin settings.<\/p>\n<table class=\"tutorial-table\">\n<tbody readability=\"3.5\">\n<tr readability=\"2\">\n<td>API Settings<\/td>\n<td>to choose test or live modes.<br \/>to set Stripe API keys and webhook settings.<\/td>\n<\/tr>\n<tr readability=\"3\">\n<td>Advanced Settings<\/td>\n<td>to switch-on installment-based payments.<br \/>to enable event-based tracking. Example: trigger refund on cancellation; put on hold when a dispute is raised.<br \/>to enable sending receipts by email.<\/td>\n<\/tr>\n<tr readability=\"2\">\n<td>Credit \/ Debit Cards<\/td>\n<td>to configure Stripe credit card element settings.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Other than the above, the payments tab has configurations related to the different gateways like Apple Pay and all.<\/p>\n<p>This plugin provides many settings to configure. For the first step configure the following settings to confirm that the Stripe payment has been integrated.<\/p>\n<ul>\n<li>API key and webhook configuration.<\/li>\n<li>Stripe card element fields customization.<\/li>\n<\/ul>\n<h3>Output Stripe payment option<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-17318\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-card-element.jpg\" alt=\"WooCommerce Stripe Card Element\" width=\"400\" height=\"313\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-card-element.jpg 400w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/woocommerce-stripe-card-element-300x235.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\"><\/p>\n<h2>3. Accept Stripe Payments<\/h2>\n<p>It places Stripe\u2019s \u2018Buy Now\u2019 button in the UI. It allows purchasing goods or digital products or services. It embeds the Stripe payment element via <a href=\"https:\/\/phppot.com\/wordpress\/how-to-create-shortcode-in-wordpress\/\">shortcode<\/a>.<\/p>\n<p>It requires WordPress version 5.0 or higher and PHP version 5.6 or higher. It is the second recently updated plugin among the three we have taken for comparison.<\/p>\n<table class=\"tutorial-table\">\n<tbody>\n<tr>\n<td>Version<\/td>\n<td>2.0.63<\/td>\n<\/tr>\n<tr>\n<td>Active Installations<\/td>\n<td>40,000+<\/td>\n<\/tr>\n<tr>\n<td>Last Updated<\/td>\n<td>1 week ago<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Features<\/h3>\n<ul>\n<li>Provides a single-tap payment solution with a <a href=\"https:\/\/phppot.com\/php\/secure-remember-me-for-login-using-php-session-and-cookies\/\">remember me feature<\/a>.<\/li>\n<li>Keeps track of the transactions in the WordPress admin.<\/li>\n<li>Allows selling digital products, media assets and more.<\/li>\n<li>Allows branding the WooCommerce shop by showing the website logo in the payment window.<\/li>\n<li>Sends email notification to the buyer and the seller.<\/li>\n<li>Provides options for future payments with the \u201cAuthorize Only\u201d directive.<\/li>\n<\/ul>\n<h3>Advantages<\/h3>\n<ul>\n<li>Renders a responsive Stripe payment panel.<\/li>\n<li>Allows Stripe element\u2019s customization with CSS to match the WooCommerce theme.<\/li>\n<li>Gets additional data from the customers <a href=\"https:\/\/phppot.com\/php\/html-contact-form-template-to-email-with-custom-fields\/\">using custom fields<\/a>.<\/li>\n<li>Secure payment with 3DS authentication and SCA.<\/li>\n<\/ul>\n<h3>Steps to integrate<\/h3>\n<p>Download <a href=\"https:\/\/wordpress.org\/plugins\/stripe-payments\/\">Accept Stripe Payments plugin<\/a> from the WordPress official repository. Then activate this plugin and configure it to render the Stripe payment option in the WooCommerce front end.<\/p>\n<p>It allows a WordPress website to sell products without WooCommerce. Follow the below steps to configure a preliminary level of Stripe payment settings.<\/p>\n<ul>\n<li>Open plugin settings and configure API keys.<\/li>\n<li>Go to Stripe payments -&gt; Products to add ASP products. This step creates the asp-product-shortcode differentiated with the appropriate product id.<\/li>\n<li>Create a page or post and map the ASP product to be displayed with a Stripe \u201cBuy Now\u201d button.<\/li>\n<\/ul>\n<p>This plugin has 4 settings tabs classified by having the configurations of Accept Stripe Payments feature.<\/p>\n<ul>\n<li>General settings<\/li>\n<li>Email settings<\/li>\n<li>Advanced settings<\/li>\n<li>Captcha<\/li>\n<\/ul>\n<h3>General Settings<\/h3>\n<ol>\n<li>When activating this plugin it creates the \u2018Thank you\u2019 and \u2018ASP product\u2019 pages. The general settings populate these links.<\/li>\n<li>The product-add action creates the ASP shortcode to be mapped to display the products\u2019 purchase options.<\/li>\n<li>It contains settings to configure price and currency.<\/li>\n<li>To enable Billing Zipcode validation to prevent anonymous billing entries.<\/li>\n<li>Mainly, this tab has the fields to set the Stripe API keys and to toggle between a test or live mode.<\/li>\n<\/ol>\n<h3>Email Settings<\/h3>\n<ul>\n<li>This is to enable sending order receipts via an email notification.<\/li>\n<li>Configure the target address of the buyer and seller to send the receipt.<\/li>\n<li>It allows customizing email templates.<\/li>\n<\/ul>\n<h3>Advanced Settings<\/h3>\n<p>This tab is used to configure the display element of price, custom fields, terms and more.<\/p>\n<ul>\n<li>Price settings \u2013 to add currency position, decimal point separator, number format with a thousand separator.<\/li>\n<li>Custom Field Settings \u2013 to add options to get extra information for buyers.<\/li>\n<\/ul>\n<h3>Captcha<\/h3>\n<p>This plugin strongly recommends enabling captcha to prevent malicious attacks.&nbsp; It provides two types of captcha services.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-17330\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/wordpress-stripe-buy-now.jpg\" alt=\"wordpress stripe buy now\" width=\"500\" height=\"322\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/wordpress-stripe-buy-now.jpg 500w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/06\/wordpress-stripe-buy-now-300x193.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\"><\/p>\n<h2>Conclusion<\/h2>\n<p>Since, Stripe payment is a widely used solution, demonstrating payment integration may guide novice and expert developers.<\/p>\n<p>In this article, we have seen three Stripe plugins to set up the payment gateway. The majority of them are WooCommerce plugins.<\/p>\n<p>Also, we saw how to accept payments via a WordPress store without the WooCommerce plugin.<\/p>\n<p>I hope, these choices help to enable the Stripe payment on your WooCommerce website. The wide scope of customization will help to create a unique Stripe element for WooCommerce.<\/p>\n<p> <!-- #comments --> <\/p>\n<div class=\"related-articles\">\n<h2>Popular Articles<\/h2>\n<\/p><\/div>\n<p> <a href=\"https:\/\/phppot.com\/wordpress\/woocommerce-stripe\/#top\" class=\"top\">\u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Vincy. Last modified on June 8th, 2022. Payment gateway integration is an important module in building an eCommerce website. For a WooCommerce store, there are several options to integrate a payment gateway. A payment gateway is to enable an online payment feature at the end of the e-shopping process. There are numerous payment gateway [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":125548,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-125547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/125547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=125547"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/125547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/125548"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=125547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=125547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=125547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}