How to setup Stripe Payment Gateway Plugin for WooCommerce

Overview

Stripe Payment Gateway Plugin for WooCommerce provides an easy, effective payment gateway extension for Credit Cards, Alipay, Apple Pay, and Stripe-Checkout for your WooCommerce store. You can accept MasterCard, Visa, American Express, Discover, JCB and Diners Club cards for payments. Not just that, you can also capture payments, perform partial or full refunds.

Some of the major highlights of the Stripe Payment Gateway Plugin for WooCommerce includes:

• Stripe Overview Page: A consolidated overview of all your Stripe payments. You can capture payments manually, and refund payments as well. You can also view a graphical representation of the overview of the Stripe payment for a given period of time. Partial or full refunds can be processed, as per your requirement. You can view all the order/transaction details as well.
• Supports pay via Credit Card, Apple Pay, Alipay, and Stripe Checkout payment gateways.
• Customize your Stripe Checkout: You can set custom text, description, and logo for the Stripe payment gateway.
• Choosing desired credit cards: You can choose desired credit cards from a list of major cards supported by the plugin. You can select MasterCard, Visa, American Express, Discover, JCB and Diners Club cards in your store.
• Save card details: You can save customers’ card details so that it’ll be easy for them to use for their next transaction.
• Capture Payments: You can capture payments immediately, or capture manually from Stripe Overview Page or Dashboard.

Installation and Activation

After purchasing the Stripe Payment Gateway Plugin for WooCommerce, the plugin zip file will be available in MY ACCOUNT section.

Here’s how you can install and activate the plugin:

1. Navigate to MY ACCOUNT -> API Downloads tab, and download the plugin.
   Note: If you have the basic/free version already installed, please deactivate and delete it before installing the premium version to avoid any conflict. Your plugin settings will be retained.
2. Install the downloaded plugin zip file into your WordPress/WooCommerce site.
3. Once installed, you can activate the plugin. You can find Activation Key and Activation Email in MY ACCOUNT -> API Keys section.
4. Go to your plugin settings and activate it using the activation key and email address.

For detailed information about installing our plugins, read How to Download, Install, Activate & Update WooCommerce Plugin?

Getting Started

Once the plugin is installed and activated, you can navigate to plugin settings in two ways:

• Dashboard > WebToffee Stripe/Apple/Alipay/Stripe Checkout(or)
• Dashboard > Plugins > Installed Plugins > Stripe Payment Gateway for WooCommerce > Settings.

All right, now let’s get down to configure the plugin.

Step 1: Create a Stripe account

Prior to setting up the plugin, it is essential that you create a stripe account. The payment gateway can be initiated only by linking the API keys which can be located in the Stripe dashboard on successful registration.

Ceratin useful links are provided within the plugin itself which will be helpful while setting up the plugin as shown below:

You can click on an item to get redirected to the respective link.

• To view the countries where Stripe is available for businesses, click on the Country list
• You can directly register and create a Stripe account by clicking on Create Stripe account.
• To get the API keys, click on Get API Keys link to get redirected to the stripe dashboard.

Step 2: Insert the API Keys into the respective stripe credential field

Stripe Credentials

You can begin the set up by inserting the appropriate keys in the stripe credential fields. API keys can be located in your Stripe dashboard. Transaction mode(test/live) is dictated by the respective API keys.

• Transaction Mode: With this option, you can set the required API mode for the Stripe payment gateway.
  Available options are:
  • Test Mode: This mode is used to do some test purchasing by using Stripe.com API. There is no real money transaction involved. This mode is used only for development purposes and requires Stripe test credentials.
  • Live Mode: This mode is used for the actual payment transaction, and requires live credentials.
• Test/Live Publishable Key: Enter the respective test (or Live) Publishable Key.
• Test/Live Secret Key: Enter the test (or Live) Secret Key provided by Stripe.

Step 3: Enable the concerned payment gateway

The five types of payment gateways offered by the plugin are the following:

• Stripe pay via Credit Card
• Apple Pay
• Alipay
• Stripe Checkout
• Pay with Google saved card

Stripe Pay via Credit Card

Accept credit card payments directly on your website via WebToffee Stripe payment gateway. It is in the stripe settings section where you need to actually enable the payment gateway for it to get enabled at the checkout.

Stripe settings come with the following options:

• Stripe Payment: Tick this checkbox to enable Stripe payment.
• Stripe Overview Page: Tick this checkbox to enable Stripe Overview Page. Stripe overview provides a consolidated view of all your transactions. You will also be able to manage your orders, process partial or full refunds, capture payments, and change order status from this view.
• Title: Enter a custom title for Stripe payment. This title will be visible on the checkout page.
• Description: Enter a custom description for Stripe payment. This description will be visible on the checkout page.
• Order Button Text: Enter a custom text for the Stripe checkout button.
• Preferred Cards: Choose the preferred cards from the list for which the payment can be accepted. Transactions will be limited to the selected cards and the rest will be declined. The logo of the selected card(s) will be displayed on the checkout page.
  Cards supported by the plugin are the following:
  • MasterCard
  • Visa
  • American Express
  • Discover
  • JCB 
  • Diners Club
• Stripe inline credit card form: Choose the style in which you want to show your credit card form. When checked, the credit card form will display the credit card number field, date, CVV, and postal code in a single line.

Stripe Actions

The advanced settings for stripe are embedded n the stripe actions section.

• Capture Payment: When enabled, the payment will be captured immediately upon the successful completion of the transaction. Disabling this option will require the shop manager to manually capture the payments corresponding to every transaction, within 7 days from the transactional data. This can be done via the stripe overview page or the stripe dashboard. This method is most widely used to reserve funds from the cardholder and then capture them after the business completes the service.
• Email Transaction Receipt: Enable this option to send transaction receipts via email to customers. This email is sent by Stripe itself and is applicable only in live mode.
• Statement Descriptor: You can enter a statement descriptor which will appear on customers’ bank statements when they make or receive payments. A complete statement descriptor – either a single static descriptor or the combination of a prefix and suffix – must meet the following requirements:
  • Contains between 5 and 22 characters, inclusive.
  • Contains at least one letter.
  • Does not contain any of the special characters < > \ ‘ ” *.
  • Reflects your doing business as (DBA) name.
  • Contains more than a single common term or common website URL. A website URL only is acceptable if it provides a clear and accurate description of a transaction on a customer’s statement.

Apple Pay

This section contains all settings related to Apple Pay. The settings are as given below.

• Apple Pay: Tick this checkbox to enable Apple Pay.
• Apple Pay on Checkout Page: Tick this checkbox to enable Apple Pay checkout on your checkout page.
• Apple Pay on Cart Page: Tick this checkbox to enable Apple Pay checkout on your cart page.
• Apple Pay Description: Enter a custom description for Apple Pay payment. This description will be visible on the Apple Pay checkout.
• Position of Apple Pay Button: You can choose to place the Apple Pay button on Above or Below the WooCommerce checkout button.
• Apple Pay Button Color: Choose the button color from the standard white or black for it to appear accordingly at the checkout.
• Apple Pay Button Text: You can choose a suitable Apple Pay button text from the following options:
  • Apple Pay
  • Buy with Apple Pay
  • Set up Apple Pay
• Apple Pay Separator: Enter a custom text that separates Apple Pay and WooCommerce checkout buttons.
• Apple Pay Button Language: You can set any custom language for the Apple Pay button. You should enter the 2-letter code of the desired language. Refer to this table for language codes.

Payment Request Button-Google Pay

Allows the user to pay via Google pay or other saved cards. The button will only appear if the customer has set up a google pay/saved cards on their device or in a supporting browser.

• Payment Request Buttons: If enabled, users will be able to pay using Chrome Payment Request if supported by the browser.
• Enable Payment Request button on: You can show the payment request button on the cart, checkout, or on the product page. The payment-Buy now button on the product page will appear in the following manner:
  
• Payment Request Button Type: Select the button type you would like to have as either Buy, Pay, or Donate.
• Payment Request Button Theme: Choose the button theme as either dark, light, or light outline.
• Payment Request Button Height: Enter the required height in pixels.

Debugging

If you are not getting all the available payment options, or not getting any option at all, then you can enable Debug option to find the error(s). Enabling the logging option will save each transaction information into the log file. You can see the file path and the size of the log file which will help in tracking disputes. You can see the Success Log file or Failure Log file.

The debugging settings are as shown below.

Finally, click Save changes to save/update the plugin settings.

Alipay

Move on to the next tab to configure Stripe Alipay. The settings are as given below.

• Alipay: Tick this checkbox to enable Alipay.
• Title: Enter a custom title for Alipay payment. This title will be visible on the checkout page.
• Description: Enter a custom description for Alipay payment. This description will be visible on the checkout page.
• Order Button Text: Enter a custom text for the Alipay checkout button.

Finally, click Save changes to save/update the plugin settings.

In the Stripe Payment Gateway Plugin for WooCommerce, Alipay supports Australian Dollar (AUD), Canadian Dollar (CAD), Euro (EUR), British Pound (GBP), Hong Kong Dollar (HKD), Japanese Yen (JPY), New Zealand Dollar (NZD), Singapore Dollar (SGD) and United States Dollars (USD).

Stripe Checkout

This section contains all settings related to Stripe Checkout. The settings are as given below.

• Stripe Checkout: Tick this checkbox to enable stripe checkout.
• Title: Enter a custom title for stripe checkout payment. This title will be visible on the checkout page.
• Description: Enter a custom description for stripe checkout payment. This description will be visible on the checkout page.
• Order Button Text: Enter a custom text for the stripe checkout button.
• Stripe Checkout Page Locale: All the supported languages are listed in the dropdown. You can choose the desired locale code from them.

Finally, click Save changes to save/update the plugin settings.

Stripe Overview

Go to Webtoffee Stripe > Stripe Overview.

In the Stripe Overview page, you can capture or refund payments manually. You can also view a graphical representation of the overview of the Stripe payment for a given period of time. You can view all the order/transaction details as well. It also allows full or partial payment capture or refund.

On the top left corner of the overview page, you can see the total amount Captured, Uncaptured and Refunded for a given period of time done using the Stripe payment gateway. A graphical representation of the same is illustrated in the top right section.

The below section contains Order Details and Transaction Details.

Order Details

This tab consists of all the orders purchased using the Stripe Payment Gateway plugin for WooCommerce.

You can refund full or partial amount. You can change the action of the order status (Process, On-Hold & Completed) as well.

Also, the plugin provides an option called Table Row that restricts the order view for the given number. You can also search for an order in the given search option.

Transaction Details

This tab displays all the transactions made using the Stripe Payment Gateway plugin for WooCommerce.

The order and transaction details (under Order Notes) can also be viewed on the Edit Order page.
Go to Dashboard > WooCommerce > Orders, and select your desired order.

A sample order page is shown below.

Stripe at the checkout: Demo

Now let’s see how these settings are affected in the front-end of your WooCommerce store.

Payment checkout with Stripe

Once a customer adds a product to the cart, the checkout page appears as shown below.

Once you click on the Pay via Stripe button, you will be prompted to enter the card number, expiry date, and CVV number. Soon after, the order can be placed.

Payment checkout with Apple Pay

The Apple Pay checkout button will be available on the cart and checkout page, as configured in the plugin settings.

• Apple Pay checkout on Cart page:
• Apple Pay checkout on the Checkout page:

After you click on the Apple Pay checkout button, the Apple Pay checkout form appears. A sample checkout form is as shown below.

Payment using Stripe Checkout

You can click on the option Stripe Checkout from the checkout page.

You will be redirected to the stripe portal with a prompt to specify the card details. Once the order is processed, you will be taken back to the store completing the order.

Pay using Stripe Checkout

To know more about the product, check out Stripe Payment Gateway Plugin for WooCommerce.

Or check out the documentation section for more related articles.