+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] WooCommerce Stripe Payment Gateway Integration in Easy Steps (/thread-99535.html)
[Tut] WooCommerce Stripe Payment Gateway Integration in Easy Steps - xSicKxBot - 06-09-2022
WooCommerce Stripe Payment Gateway Integration in Easy Steps
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/06/woocommerce-stripe-payment-gateway-integration-in-easy-steps.jpg" width="550" height="222" title="" alt="" /></div><div><div class="modified-on" readability="7.047619047619"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on June 8th, 2022.</div>
<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>
<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>
<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>
<ol>
<li><a href="https://phppot.com/shop/paypal-checkout-payment-gateway-integration-with-smart-payment-buttons-maia/">PayPal</a></li>
<li>Stripe</li>
<li>AfterPay</li>
<li>Amazon Pay</li>
<li>PayFast</li>
<li>Square and more…</li>
</ol>
<p>Stripe is one of the best choices that provides good payment services..</p>
<h2>Reasons to have Stripe for WooCommerce</h2>
<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>
<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>
<ul>
<li>Ease of integration and use.</li>
<li>Reasonable transaction fee and conversion rate.</li>
<li>Seamless experience with <a href="https://phppot.com/jquery/jquery-credit-card-validator/">credit or debit card payments</a>.</li>
<li>Secure payment lifecycle with proper webhook registrations.</li>
</ul>
<h3>Merits of integrating Stripe in WooCommerce</h3>
<ul>
<li>Accepts all popular credit or debit card payments via web or mobile.</li>
<li>Embedded inline Stripe payment elements instead of redirecting. It will reduce drop offs and increase the conversion rates.</li>
<li>By using popular WooCommerce Stripe plugins, it results robust solutions for making payments.</li>
<li>Possibility for easy upgrading to get latest and additional features.</li>
</ul>
<p><img 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="(max-width: 550px) 100vw, 550px"></p>
<h2>Methods of integrating Stripe in a WooCommerce store</h2>
<p>Various plugins are there to integrate a Stripe payment gateway. Three of them are listed below.</p>
<ol>
<li>WooCommerce Stripe Payment Gateway</li>
<li>Payment Plugins for Stripe WooCommerce</li>
<li>Accept Stripe Payments</li>
</ol>
<p>The following sections describe these plugins and show how to use them to set up the Stripe payment.</p>
<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>
<h2>1. WooCommerce Stripe Payment Gateway plugin</h2>
<p>This is with the latest possible version and the highest number of active installations. Let’s see its features and advantages below.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>Version</td>
<td>6.4.0</td>
</tr>
<tr>
<td>Active Installations</td>
<td>900,000+</td>
</tr>
<tr>
<td>Last Updated</td>
<td>1 day ago</td>
</tr>
</tbody>
</table>
<h3>Features</h3>
<ul>
<li>Accepts majority of the card payments.</li>
<li>Supports Apple Pay, Google Pay, and Microsoft Pay based on the client.</li>
<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>
<li>Supports extensions like WooCommerce Subscriptions.</li>
<li>Supports connecting Web Payment API to pay via mobile devices.</li>
</ul>
<h3>Advantages</h3>
<ul>
<li>Keeps track of customer instances and saves time on successive payments.</li>
<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>
<li>Supports quick payments with a few taps using Web Payment API services.</li>
</ul>
<h3>Steps to integrate</h3>
<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->Installed Plugins to activate the plugin.</p>
<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>
<ol>
<li>Choose test mode and set up the keys (Publishable, Secret key and Webhook secret key).</li>
<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>
</ol>
<h3>Stripe element in WooCommerce checkout</h3>
<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>
<p><img 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="(max-width: 500px) 100vw, 500px"></p>
<h2>2. Payment Plugins for Stripe WooCommerce</h2>
<p>It supports card payments, mobile payments, direct electronic payments like ACH and more.</p>
<p>It requires WordPress version 5.6 or higher. The key information on the plugin state is shown in the below table.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>Version</td>
<td>3.3.19</td>
</tr>
<tr>
<td>Active Installations</td>
<td>80,000+</td>
</tr>
<tr>
<td>Last Updated</td>
<td>2 months ago</td>
</tr>
</tbody>
</table>
<h3>Features</h3>
<ul>
<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>
<li>Provides 3D secure 2.0.</li>
<li>Allows add-ons like WooCommerce Subscriptions, Pre-Orders and Blocks.</li>
</ul>
<h3>Advantages</h3>
<ul>
<li>It’s an official Stripe partner by which it has high dependability and trustworthiness.</li>
<li>It has less friction and makes easy seamless payments to increase the conversion rate.</li>
</ul>
<h3>Steps to integrate</h3>
<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>
<p>The settings page contains many tabs to group the configurations. Let’s see some of the configurations of the plugin settings.</p>
<table class="tutorial-table">
<tbody readability="3.5">
<tr readability="2">
<td>API Settings</td>
<td>to choose test or live modes.<br />to set Stripe API keys and webhook settings.</td>
</tr>
<tr readability="3">
<td>Advanced Settings</td>
<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>
</tr>
<tr readability="2">
<td>Credit / Debit Cards</td>
<td>to configure Stripe credit card element settings.</td>
</tr>
</tbody>
</table>
<p>Other than the above, the payments tab has configurations related to the different gateways like Apple Pay and all.</p>
<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>
<ul>
<li>API key and webhook configuration.</li>
<li>Stripe card element fields customization.</li>
</ul>
<h3>Output Stripe payment option</h3>
<p><img 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="(max-width: 400px) 100vw, 400px"></p>
<h2>3. Accept Stripe Payments</h2>
<p>It places Stripe’s ‘Buy Now’ 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>
<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>
<table class="tutorial-table">
<tbody>
<tr>
<td>Version</td>
<td>2.0.63</td>
</tr>
<tr>
<td>Active Installations</td>
<td>40,000+</td>
</tr>
<tr>
<td>Last Updated</td>
<td>1 week ago</td>
</tr>
</tbody>
</table>
<h3>Features</h3>
<ul>
<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>
<li>Keeps track of the transactions in the WordPress admin.</li>
<li>Allows selling digital products, media assets and more.</li>
<li>Allows branding the WooCommerce shop by showing the website logo in the payment window.</li>
<li>Sends email notification to the buyer and the seller.</li>
<li>Provides options for future payments with the “Authorize Only” directive.</li>
</ul>
<h3>Advantages</h3>
<ul>
<li>Renders a responsive Stripe payment panel.</li>
<li>Allows Stripe element’s customization with CSS to match the WooCommerce theme.</li>
<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>
<li>Secure payment with 3DS authentication and SCA.</li>
</ul>
<h3>Steps to integrate</h3>
<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>
<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>
<ul>
<li>Open plugin settings and configure API keys.</li>
<li>Go to Stripe payments -> Products to add ASP products. This step creates the asp-product-shortcode differentiated with the appropriate product id.</li>
<li>Create a page or post and map the ASP product to be displayed with a Stripe “Buy Now” button.</li>
</ul>
<p>This plugin has 4 settings tabs classified by having the configurations of Accept Stripe Payments feature.</p>
<ul>
<li>General settings</li>
<li>Email settings</li>
<li>Advanced settings</li>
<li>Captcha</li>
</ul>
<h3>General Settings</h3>
<ol>
<li>When activating this plugin it creates the ‘Thank you’ and ‘ASP product’ pages. The general settings populate these links.</li>
<li>The product-add action creates the ASP shortcode to be mapped to display the products’ purchase options.</li>
<li>It contains settings to configure price and currency.</li>
<li>To enable Billing Zipcode validation to prevent anonymous billing entries.</li>
<li>Mainly, this tab has the fields to set the Stripe API keys and to toggle between a test or live mode.</li>
</ol>
<h3>Email Settings</h3>
<ul>
<li>This is to enable sending order receipts via an email notification.</li>
<li>Configure the target address of the buyer and seller to send the receipt.</li>
<li>It allows customizing email templates.</li>
</ul>
<h3>Advanced Settings</h3>
<p>This tab is used to configure the display element of price, custom fields, terms and more.</p>
<ul>
<li>Price settings – to add currency position, decimal point separator, number format with a thousand separator.</li>
<li>Custom Field Settings – to add options to get extra information for buyers.</li>
</ul>
<h3>Captcha</h3>
<p>This plugin strongly recommends enabling captcha to prevent malicious attacks. It provides two types of captcha services.</p>
<p><img 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="(max-width: 500px) 100vw, 500px"></p>
<h2>Conclusion</h2>
<p>Since, Stripe payment is a widely used solution, demonstrating payment integration may guide novice and expert developers.</p>
<p>In this article, we have seen three Stripe plugins to set up the payment gateway. The majority of them are WooCommerce plugins.</p>
<p>Also, we saw how to accept payments via a WordPress store without the WooCommerce plugin.</p>
<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>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/wordpress/woocommerce-stripe/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/06/08/woocommerce-stripe-payment-gateway-integration-in-easy-steps/