Stripe Payment Plugin for WooCommerce – User Guide

The Stripe Payment Plugin for WooCommerce(free) allows you to integrate Stripe payment into your WooCommerce store. Using the plugin you can accept payments via Credit/Debit Cards, Alipay, Apple Pay, Payment Request Button(GPay), Stripe Checkout, SEPA, Klarna, WeChat, Afterpay, and many other local payment gateways in your WooCommerce store.

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.

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

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.
  

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.

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.

To receive the order status updates in a timely manner, it is recommended to add your site’s webhook in the stripe dashboard.

• First of all, copy the webhook URL of your site from the webhooks section.

• 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.

List of webhook events that are compatible with the plugin are given below:

• charge.refund.updated
• charge.dispute.created
• charge.succeeded
• charge.failed
• checkout.session.expired
• source.chargeable
• source.failed
• payment_intent.succeeded
• payment_intent.payment_failed

Debug

Records stripe payment transactions into WooCommerce status log.

Save the settings to update.

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

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.

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.

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.

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:

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.
• Send line items to stripe: Enable to view all order line items like tax, shipping, fees, discount, etc. at the stripe hosted payment page.
• Ask for address details from the stripe hosted page: Enable to receive Billing and shipping address at the stripe hosted payment page.

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

Stripe checkout workflow is as shown below:

1. Go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the Local Gateways > 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.

1. Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
2. Head on to the Local Gateways > 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.

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.

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > Klarna tab.

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

Klarna at the checkout

A sample preview of Klarna at the checkout:

Pay via Klarna

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

• At the checkout, redirects customer to the Klarna Hosted Payment Page. 
• The customer can choose any among the payment options: Pay now, Pay later, Financing, and Installments. 
• The payment options will differ based on the customer’s country/location. Refer to test Klarna pay.
• Klarna authenticates the payment either via Date of birth or One-time password.
• Customer returns to the business site by successfully placing an order.

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > Afterpay tab.

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

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

Pay via Afterpay

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

• Customer selects Afterpay at the checkout
• Redirects customers to the Afterpay site, where they agree to the terms of an installment plan.
• Prompts the customer to accept the terms. Sebsequently, guarantees and transfers the funds to your Stripe account. 
• The customer pays the first installment and repays the rest of the amount to the Afterpay directly over time.

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > WeChat tab.

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

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

Pay via WeChat

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

1. Customer selects WeChat at the checkout

2. The buyer scans the QR code to complete the payment.

3. WeChat app authenticates the payment.

4. Then, the plugin prompts the buyer to confirm the completion of the QR code scan.

5. Redirects buyer to the order received page by successfully completing the order.

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > Sofort tab.

• Sofort: Enable to accept Sofort payments.
• Title: Enter a custom title for Sofort payment. This title will be visible on the checkout page.
• Description: Enter a custom description for Sofort payment. This description will be visible on the checkout page.
• Customize language :Enable to view the bank site in the required language.
  • Preferred language: Select the required language for the bank site.
• Order Button Text: Enter a custom text for the Sofort payment button.

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

Pay via Sofort

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

1. Customer selects Sofort at the checkout

2. The buyer enters name and country. Redirects buyers to the bank site.

3. From the bank site, the buyer can choose the country and bank. Then, authenticates the transaction.

4. Payment becomes successful and order is placed.

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > iDEAL tab.

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

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

Pay via iDEAL

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

1. Customer selects iDEAL at the checkout

2. The buyer enters the name and selects the bank.

3. iDEAL authenticates the payment.

4. Then, the plugin prompts the buyer to confirm the completion of the transaction.

5. Redirects buyer to the order received page by successfully completing the order.

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > Bancontact tab.

• Bancontact: Enable to accept Bancontact payments.
• Title: Enter a custom title for Bancontact payment. This title will be visible on the checkout page.
• Description: Enter a custom description for Bancontact payment. This description will be visible on the checkout page.
• Customize language: Enable to view the bank site in the required language.
• Preferred language: Choose the required language from the drop down.
• Order Button Text: Enter a custom text for the Bancontact payment button.

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

• Customer selects Bancontact at checkout
• Redirects customer to the Bancontact and enters credentials
• The customer is notified that payment is complete
• Customer returns back to business’s site for payment confirmation (Optional)
• Customer selects Bancontact at checkout
• Redirects customer to the Bancontact and scans QR code
• Customer enters Pincode
• Customer is notified that payment is complete
• Customer returns back to business’s site for payment confirmation (Optional)

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > EPS tab.

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

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

Pay via EPS

• Customer selects EPS at checkout
• Customer is redirected to EPS and chooses bank
• Customer enters account credentials
• Customer completes authorization process (with scanner or SMS)
• Customer is notified that payment is complete
• Customer returns back to business’s site for payment confirmation

• Firstly, go to plugin settings or from the WordPress dashboard, go to WebToffee Stripe > General Settings.
• Head on to the Local Gateways > Przelewy24 tab.

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

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

Pay via Przelewy24

• Customer selects Przelewy24 at checkout
• Customer is redirected to Przelewy24 and chooses bank
• Customer enters account credentials
• Customer completes authorization process
• Customer is notified that payment is complete
• Customer returns back to business’s site for payment confirmation

Provides direct links to resources like documentation and support.