How to Setup Stripe on WooCommerce

How to Setup Stripe on WooCommerce

Stripe, the payment gateway offers several key benefits and is a great choice to use with your WooCommerce website. This payment gateway for WooCommerce lets you accept payments directly onsite and includes the option to accept Payment Requests (Apple Pay and Google Pay), SEPA and more international payment methods.

This tutorial will show you all the steps you need to integrate Stripe with WooCommerce using the WooCommerce Stripe Payment Gateway plugin.

Install the WooCommerce Plugin

To install Stripe Plugin,

→ Log in to your WordPress site and go to Plugins > Add New.

Add New Plugin

→ In the search plugin bar type WooCommerce Stripe Payment Gateway.

→ When the plugin appears, click Install Now and wait for the installation to complete.

Search Stripe

→ Now click Activate.

Activate Stripe

Set Up and Configuration

Set up Stripe

After activating the plugin, to set up

→ Go to WooCommerce > Settings.

→ Mark /Unmark tick on the box to Enable / Disable the Stripe

Enable/Disable Stripe

→ Now setup your Title (Required) and Description (Optional). These will determine what users see during checkout.

Setup stripe

→ Now  tick the “Enable Test Mode” option, if you wish to test before going live.

→ Next, login to your stripe account and click on API.

Stripe account

→ Now Enter your Live Secret Key and Live Publishable Key as shown in the above picture.

Stripe settings

→ Next, enter Statement Descriptor which appears on a customer’s bank or credit card statement. This field cannot be blank and may be up to 22 characters. It must contain at least one letter, may not include these characters > < " 'and only alpha-numeric characters may be used.

→ Tick the “Capture Charge Immediately” option to ensure charges are processed and billed as soon as the customer checks out.

→  There is an optional field Enable 3D Secure to force customers to go through 3D Secure payment process if the payment method supports it.

→ When the “Enable Stripe Checkout” option is ticked, users get a popup form requesting their financial details when they select stripe as payment method and click on Continue To Payment.

→ Another optional field Enable Payment Request Buttons will give your customer the opportunity to pay via Apple Pay or Google Pay.

→ Payment Request Button Type will give you the following options:

  • Default – “Pay” (default Apple or Google  pay button)
  • Buy – “Buy Now” (Apple or Google variant)
  • Donate – “Donate” (Apple or Google variant)

→ If you want to change the appearance then click on Payment Request Button Theme.

→ Payment Request Button Height will change the height of the button.

→ If you want to give Stripe customers the ability to use a card saved on their account for future purchases then click on Saved Cards.

→ For debugging and further troubleshooting purposes, you may also enable the “Log Debug Messages” option.

→ Click Save Changes to use the settings.

Webhooks

Webhooks is used for sending data to a URL when an event happens.

For further details visit: Test Webhooks on WooCommerce.

If you go to your WooCommerce Stripe settings page under Stripe Gateway option, you will see a generated webhook link.

Stripe webhook link

Then go to your Stripe Dashboard Webhook Setting page and click on “Add Endpoint” option. Paste the URL link into the URL field and click on “Add Endpoint”. You can choose “Send all event types” or “Select types to send”.

Strike webhook settings

Stripe Checkout

If you put tick on the box for Enable Stripe Checkout, some more options will appear:

Stripe Checkout

  • Stripe Checkout Image: In this field enter the URL of a 128×128 px image/logo to display at checkout. You can use an image already uploaded to your site or upload new one at Media > Add New.
  • Stripe Checkout Description: Shows a description of your store on Stripe Checkout.

Enabling Stripe Checkout provides a popup instead of the standard payment form. A pop-up that is used to collect credit card details from the user.

Payment Request Buttons

In the Stripe payment gateway extension version 4.0.0 of WooCommerce, all Payment Request buttons are activated (on your site) at once. Apple Pay and Google Pay are the most well known.

Apple Pay

To use Apple Pay, you must accept the Terms of Service in your Stripe dashboard at this link https://dashboard.stripe.com/account/apple_pay.

Stripe Apple Pay

After this, you will need to add the domain of your site, remove any www or https://.

Google Pay

Just make sure that you have enabled the Payment Request Buttons option. It is not required more set up to receive payment via Google Pay.

Additional Payment Methods

Beside standard credit and debit cards, Stripe comes with additional payment methods that can be used to target different markets. Here is a list:

  • Alipay
  • Bancontact
  • Giropay
  • iDEAL
  • SEPA Direct Debit
  • SOFORT
  • Przelewy24
  • Multibanco
  • EPS
  • WeChat Pay

Customer Usage

Standard Checkout

Customers can make payment on the checkout page, with version 4 of the extension. This version comes with enhanced security, styles, and a better customer experience above the standard WooCommerce fields.

Using a new card, they will see the option to enter credit card details and tick the Save to account box if enabled.

Stripe In-line

For regular customers who may have a saved card, they will get the stored cards (if that option has been enabled) or they can store a new one.

Stripe non in-line

Now we have finished the article with the installation and configuration of Stripe in WooCommerce.

Related Article: Stripe

2 Replies to “How to Setup Stripe on WooCommerce”

Leave a Reply

%d bloggers like this: