WooCommerce Stripe Payment Gateway – User Guide

Overview

The WooCommerce Stripe Payment Gateway plugin allows you to integrate Stripe payment to your WooCommerce store. Using the plugin you can accept payments via Credit/Debit Cards, Alipay, Apple Pay, Payment Request Button, and Stripe Checkout in your WooCommerce store.

Installation

You can install the plugin either from the WordPress plugin directory or as a zip downloaded from the WordPress.org website. You can learn more about the installation procedure by reading the article How to Install a Free Plugin from WordPress.

Pre-requisites

The plugin requires you to Signup and create a Stripe Account.

Getting started

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

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

Configure Stripe in 3 steps

Step 1: General Settings

1. First and foremost, you must have a Stripe account. It’s free to create a Stripe account. Stripe allows carrying out trial payments in test mode too. Refer to Stripe’s business information requirements.
2. On signing up, go to Stripe dashboard > Developers > API keys.

Step 2: Insert Stripe Credentials

1. Navigate to WebToffee Stripe > General Settings.
2. You can begin by inserting the appropriate keys in the stripe credential fields. API keys can be located in your Stripe dashboard.
3. Choose test mode to trial run using test API keys. Switch to live mode to begin accepting payments with Stripe using live API keys.
   • In test mode, insert the test secret key and test publishable key.
   • In live mode, insert the live secret key and live publishable key.

Stripe Overview

Replicates a stripe dashboard view. Gives provision to manage orders, process partial/full refunds, and capture payments. Keep the option disabled, if you don’t want to have a stripe overview. Refer to know more on Stripe Overview.

Capture Payments

Capture Payment option is enabled by default to capture the payments immediately on successful transactions. However, if you wish to capture payment later then, keep the option disabled. Know more on how payments can be captured manually from stripe overview.

Payments can be captured later manually from the stripe dashboard or overview. Uncaptured payment will expire in 7 days. Learn more.

Debug

Records stripe payment transactions into WooCommerce status log.

Save the settings to update.

Step 3: Enable the concerned payment gateway

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

• Credit/Debit Card
• Apple Pay
• Payment Request Button
• Alipay
• Stripe Checkout
• SEPA

Payment via Credit/Debit Card

Accepts Stripe payments via credit or debit card.

Go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings. Head on to the Credit/Debit Cards tab.

• Credit/Debit cards: Enable to accept credit/debit card payments through Stripe.
• Title: Input title for the payment gateway displayed at the checkout.
• Description: Input texts for the payment gateway displayed at the checkout.
• Order button text: Input a text that will appear on the order button to place an order at the checkout.
• Allowed Cards: Accepts payments using selected cards. Displays the Icons of chosen cards at the checkout. Cards supported by the plugin are the following:
  • MasterCard
  • Visa
  • American Express
  • Discover
  • JCB 
  • Diners Club
• Card fields in a row: 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, expiry date, CVV, and postal code in a single field.
  

• Email Transaction Receipt: Enable this option to send transaction receipts via email to customers. Works in live mode only.
• Statement Descriptor: You can enter a statement descriptor that 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.

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

Credit/Debit card checkout using Stripe

After you configure all the settings, move to the checkout page to view the credit/debit card checkout process.

Specify the card details like the Card Number, Expiry Date, CVV, and then click on the Pay via Stripe button to continue the payment process.

Apple Pay

1. Go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the Apple Pay tab.

• Apple Pay: Enable to accept payment via Apple pay.
• Show on pages:  Apple pay button will be shown on selected pages.
• Separator: Separator will be displayed between the Apple pay button and the order button at the checkout. 
• Description: Description will be displayed between the Apple pay button and the separator at the checkout.
  
• Button settings:
  • Position: You can choose to place the Apple Pay button Above or Below the order button.
  • Color: Choose the button color from the standard white or black for it to appear accordingly at the checkout.
  • Text: You can choose a suitable Apple Pay button text from the following options:
    • Apple Pay
    • Buy with Apple Pay
    • Set up Apple Pay
  • 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

1. Go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the Payment Request button tab.

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

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

Google pay button on the cart page will appear in the following manner:

Alipay

1. Go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the Alipay tab.

• Alipay: Enable to accept Alipay payments through Stripe.
• Title: Input title for the payment gateway displayed at the checkout.
• Description: Input texts for the payment gateway displayed at the checkout.
• Order Button Text: Input a text that will appear on the order button to place order at the checkout.

Finally, click on Save changes to update the settings.

Alipay checkout using Stripe

When you have configured all the above settings, move to the checkout page to pay via Alipay.

Finally, let’s see the steps involved in customer-facing web-flow:

1. Select Alipay at checkout.
2. Redirects to Alipay. Input the credentials in the respective fields.
3. Get notified that payment is complete.
4. Lastly, redirected back to the business’s site for payment confirmation.

Stripe Checkout

1. Go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the Stripe checkout tab.

• Stripe Checkout: Enable to accept Stripe checkout payments.
• 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.
• Locale: Choose a language code from the dropdown.

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

Pay via Stripe Checkout

Stripe checkout workflow is as shown below:

SEPA Pay

1. Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the SEPA Payment tab.

• SEPA Pay: Enable to accept SEPA payments.
• Title: Enter a custom title for SEPA payment. This title will be visible on the checkout page.
• Description: Enter a custom description for SEPA payment. This description will be visible on the checkout page.
• Order Button Text: Enter a custom text for the SEPA payment button.

Finally, click on the Save changes button to update the plugin settings.

Add webhook endpoint

To receive the order status updates in a timely manner, it is recommended to add your site’s webhook in the stripe dashboard. To insert the webhook, go to stripe dashboard > scroll down to the option Developers and select Webhooks. Then, click on Add endpoint button and insert your site URL.

Pay via SEPA

To sum up, the SEPA payment workflow will be as shown below:

• Customer selects SEPA Direct Debit at checkout
• The customer provides full name, IBAN, and authorizes mandate.
• The customer gets the notification that the payment is complete.

Help Guide

Provides direct links to resources like documentation and support.