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 from the WordPress plugin directory or as a zip downloaded from the WordPress.org website. To know more about installing a free plugin, refer to the following article: Installing a Free Plugin from WordPress.

The plugin requires you to sign up and create a Stripe Account.

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

1. From the WordPress dashboard, navigate to WebToffee Stripe.

OR

1. From the WordPress dashboard, navigate to Plugins > Installed Plugins > Stripe Payment Plugin for WooCommerce > Settings.

1. First and foremost, you must have a Stripe account. It’s free to create one. Stripe also allows trial payments in test mode. Refer to Stripe’s business information requirements.
2. On signing up, go to Stripe dashboard > Developers > API keys. Here, you can view the publishable key and the secret key.

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

Stripe Overview

Replicates a stripe dashboard view. It gives provisions for managing orders, processing partial/full refunds, and capturing payments. Keep the option disabled if you don’t want a stripe overview. To learn more, refer to the following article: Enabling Stripe Dashboard Within WordPress.

Capture Payments

The Capture Payment option is enabled by default to capture payments immediately on successful transactions. However, if you wish to capture payments later, disable the option. Learn more by referring to the following article: Capturing Stripe Payments and Processing Refunds.

Payments can be captured later manually from the Stripe dashboard or overview. Uncaptured payments expire in 7 days.

It is recommended that you add your site’s webhook to the Stripe dashboard to receive order status updates on time.

1. First, copy your site’s webhook URL from the webhooks section.

2. To insert the webhook URL, go to the Stripe dashboard > Developers > Webhooks. Then, click on the Add an Endpoint button, insert your site URL, select events, and add the endpoint.

A list of webhook events that are compatible with the plugin is 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

3. Upon adding the endpoint, copy the webhook secret and paste it into the plugin’s Webhook secret section.

4. Finally, click on Save Changes.

Debug

Records stripe payment transactions into the WooCommerce status log.

Click on Save Changes to save settings.

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

• Credit/Debit Cards
• Apple Pay
• GPay/Payment Request Button
• Stripe Checkout
• Local Payment Gateways

Accepts Stripe payments via credit or debit cards.

To access the credit/debit cards settings, head to WebToffee Stripe > Credit/Debit Cards from the WordPress dashboard.

• Credit/Debit cards: Enable to accept credit/debit card payments through Stripe.
• Title: Input a title for the payment gateway displayed at the checkout.
• Description: Input texts for the payment gateway displayed at the checkout.
• Order button text: Type the text that will appear on the order button when you 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 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 is only acceptable if it provides a clear and accurate transaction description on a customer’s statement.

Finally, click Save Changes to save/update the settings.

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

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

Head to WebToffee Stripe > Apple Pay to access the Apple Pay settings.

• Apple Pay: Apple Pay allows you to accept payment via Apple Pay.
• Show on pages: The Apple pay button will be shown on selected pages.
• Separator: The 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 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.

To access the GPay/Payment Request Button settings, head to WebToffee Stripe > GPay/Payment Request Button from the WordPress dashboard.

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

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

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

1. Navigate to WebToffee Stripe > Stripe checkout from the WordPress dashboard to access the Stripe Checkout settings.

• 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 addresses at the stripe hosted payment page.

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

The Stripe checkout workflow is as shown below:

1. To access the Alipay settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Alipay.

• Alipay: Enable to accept Alipay payments through Stripe.
• Title: Input the 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 when you place an 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. To access the SEPA settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on SEPA.

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

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

1. To access the Klarna settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Klarna.

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

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

1. To access the Afterpay settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Afterpay.

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

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

1. To access the WeChat settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on WeChat.

• 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. The customer selects WeChat at the checkout

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

3. The WeChat app authenticates the payment.

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

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

1. To access the Sofort settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Sofort.

• 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. The customer selects Sofort at the checkout

2. The buyer enters their 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 the order is placed.

1. To access the iDEAL settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on iDEAL.

• iDEAL Pay: 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 the buyer to the order received page by successfully completing the order.

1. To access the Bancontact settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Bancontact.

• Bancontact Pay: 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.
• Order Button Text: Enter a custom text for the Bancontact payment button.

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

Pay via Bancontact

1. Customer selects Bancontact at checkout
2. Redirects customer to the Bancontact and enters credentials
3. The customer is notified that payment is complete
4. Customer returns back to the business’s site for payment confirmation (Optional)
5. Customer selects Bancontact at checkout
6. Redirects customer to the Bancontact and scans QR code
7. Customer enters Pincode
8. Customer is notified that payment is complete
9. Customer returns back to the business’s site for payment confirmation (Optional)

1. To access the EPS Pay settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on EPS Pay.

• EPS Pay: 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

1. The customer selects EPS at checkout.
2. The customer is redirected to EPS and chooses a bank.
3. The customer enters account credentials.
4. The customer completes the authorization process (with scanner or SMS).
5. The customer is notified that payment is complete.
6. The customer returns back to business’s site for payment confirmation.

1. To access the Przelewy24 settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Przelewy24.

• Przelewy24 Pay: Enable to accept Przelewy24 payments.
• Title: Enter a custom title for Przelewy24 payments. This title will be visible on the checkout page.
• Description: Enter a custom description for Przelewy24 payments. 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

1. Customer selects Przelewy24 at checkout
2. Customer is redirected to Przelewy24 and chooses bank
3. Customer enters account credentials
4. Customer completes authorization process
5. Customer is notified that payment is complete
6. Customer returns back to business’s site for payment confirmation

1. Go to WebToffee Stripe > Local Gateways from the WordPress dashboard to access the Bacs settings.
2. Under the Local Gateways tab, click on Bacs.

• Bacs Direct Debit: Enable to accept Bacs Direct Debit payments.
• Title: Enter a custom title for Bacs Direct Debit payments. This will be visible on the checkout page.
• Description: Enter a custom description for Bacs Direct Debit payments. It will be visible on the checkout page.
• Order button text: Type in a custom button label for the Bacs Direct Debit payment button.
• Locale: Choose a language from the dropdown for the Bacs Direct Debit payment or checkout window.

Click on Save Changes to save the settings.

Payment Workflow

1. A customer selects Bacs Direct Debit at the checkout.

2. Upon selection, the customer will be redirected to the Pay with Bacs Direct Debit payment window.
3. Here, the customer has to input the sort code, account number, name, and billing address.
4. Click on Continue.

5. Finally, click on Pay to complete the payment.

1. To access the BECS settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on BECS.

• BECS Debit: Enable to accept BECS Debit payments.
• Title: Enter a custom title for BECS Debit payments. This will be visible on the checkout page.
• Description: Enter a custom description for BECS Debit payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the BECS Debit payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. The customer selects BECS Direct Debit at checkout.
2. The customer completes the Direct Debit Request.
3. The customer gets a notification that the payment is complete.

1. To access the FPX settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on FPX.

• FPX: Enable to accept FPX payments.
• Title: Enter a custom title for FPX payments. This will be visible on the checkout page.
• Description: Enter a custom description for FPX payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the FPX payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. The customer selects FPX at checkout.
2. Chooses a bank and gets redirected.
3. The customer enters account credentials.
4. The customer completes the authorization process.
5. The customer gets a notification that payment is complete.
6. The customer returns to the business’s site for payment confirmation.

1. To access the Boleto settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Boleto.

• Boleto: Enable to accept Boleto payments.
• Title: Enter a custom title for Boleto payments. This will be visible on the checkout page.
• Description: Enter a custom description for Boleto payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the Boleto payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. A customer chooses Boleto as the form of payment.
2. A Boleto is created for the transaction and is sent to the customer’s email. The Boleto has a barcode and includes your transaction information, such as bank information, transaction amount, customer information, and expiration date.
3. When the customer is ready to pay the boleto, he/she can take it to any location that processes Boletos or process it online themselves.

1. To access the OXXO settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on OXXO.

• OXXO: Enable to accept OXXO payments.
• Title: Enter a custom title for OXXO payments. This will be visible on the checkout page.
• Description: Enter a custom description for OXXO payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the OXXO payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. The customer selects OXXO at checkout.
2. The customer receives a voucher with a transaction reference.
3. The customer can then provide a voucher and cash payment at the OXXO store.
4. The merchant receives a notification that the payment is complete.

1. To access the GrabPay settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on GrabPay.

• GrabPay: Enable to accept GrabPay payments.
• Title: Enter a custom title for GrabPay payments. This will be visible on the checkout page.
• Description: Enter a custom description for GrabPay payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the GrabPay payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. Customers pay with GrabPay by redirecting to the GrabPay website to authorize the payment.
2. After that, they will automatically be redirected back to the website. You will get immediate notification on whether the payment succeeded or failed.

1. To access the Multibanco settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Multibanco.

• Multibanco Pay: Enable to accept Multibanco payments.
• Title: Enter a custom title for Multibanco payments. This will be visible on the checkout page.
• Description: Enter a custom description for Multibanco payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the Multibanco payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. The customer selects Multibanco at the checkout.
2. Customer notes or prints the voucher references generated by Multibanco.
3. Settles his purchase from the online bank or an ATM.
4. Multibanco authorizes the invoice payment.
5. The Merchant is notified of the payment, and then delivers the order.

1. To access the Affirm settings, go to WebToffee Stripe > Local Gateways from the WordPress dashboard.
2. Under the Local Gateways tab, click on Affirm.

• Affirm: Enable to accept Affirm payments.
• Title: Enter a custom title for Affirm payments. This will be visible on the checkout page.
• Description: Enter a custom description for Affirm payments. It will be visible on the checkout page.
• Order button text: Type in a custom label for the Affirm payment button.

Click on Save Changes to save the settings.

Payment Workflow

1. The customer selects Affirm at checkout on the online store.
2. The customers are redirected to the Affirm model or pop-up, where they enter their phone number to receive a text with a pin to create or sign in to their account.
3. The customer enters their social security number (SSN) to check for loan eligibility and moves to the confirmation screen.
4. The customer then receives the loan terms and selects the payment plans.
5. The customer then completes their purchase.
6. The customer receives a confirmation of their Affirm purchase. Receives an order confirmation screen for the order.

Provides direct links to resources like documentation and support.