stripe-express doc logo
Launch Stripe Express

Woocommerce Integration

How to use stripe-express gateway in woocommerce checkout page.

woocommerce stripe elements

All-in-one payment form

This article explains how to use the Stripe-Express gateway in the Woocommerce checkout page. Our solution utilizes Stripe Elements, a collection of pre-designed UI components that streamline the checkout process. Unlike other Stripe plugins for WooCommerce, our solution eliminates the need to configure each payment method individually. Instead, you can easily enable supported payment methods based on your currency and select a visually appealing UI, such as Tab or Card style, Stripe or Night mode, Flat mode, and more.

If you are looking for integration with Stripe Hosted checkout page, we also support it, please go to Woocommerce Stripe Checkout Page Integration)


  • A premium license

Stripe setup

First of all, we need to set up the stripe API keys in Stripe Express -> Settings Tab woocommerce stripe elements activate

You don't need to create an Element that our plugin mainly uses because Woocommerce has its own workflow, and it's challenging to leverage our built-in elements.

Woocommerce setup

  1. Make sure the woocommerce addon for stripe express is installed.
  2. Go to Woocommerce -> Settings -> Payments setting and enable Stripe Express payment method.
woocommerce stripe elements activate
  1. Configurate the payment elements settings, such as Supported Payment Methods, UI style, theme, etc.
woocommerce stripe elements settings

Payment methods

Normally, we supported all 40+ payment methods Stripe provided, however, you need to ensure the selected payment methods are activated and available in Stripe dashboard and also, Payment methods are unavailable when they don’t support the currency or terms of the current payment.

Automatic collect This is the default value which means Stripe will find out the best suitable payment methods from your supported payment methods to display.

If you don't auto collect payment methods, you can select the supported payment methods based on the currency.


Three layouts supported so far: Tabs, Accordion with radio buttons, Accordion without radio buttons woocommerce stripe elements settings


Three themes supported so far: Stripe, Night, Flat

woocommerce stripe elements themes


Webhooks are used by Stripe to communicate with your site. It provides information such as the status of the payment, and is used to update the order based on certain events from Stripe’s side of things.

In the settings, you’ll find a webhook endpoint URL ready for you to copy and paste into your Stripe dashboard:

woocommerce stripe elements themes

Next, in your Stripe Dashboard go to Developers » Webhooks and select Add endpoint (with “Test mode” enabled or disabled, depending on which mode is being configured). Paste the webhook endpoint URL you copied earlier into the Endpoint URL field, and select the following * events (at minimum):

  • charge.succeeded
  • charge.failed
  • charge.captured
  • charge.dispute.created
  • charge.dispute.closed
  • charge.refunded
  • payment_intent.succeeded
  • paymentintent.paymentfailed
  • paymentintent.amountcapturable_updated
  • paymentintent.requiresaction

Enable Webhook signatures (Optional)

Generating a signature for the webhook can greatly protect your endpoint from being abused by external parties.

  1. In your Stripe dashboard, go to the webhook settings and click the Signing secret button to generate a signature.

Generate signature: generate signature
generate signature


Once everything above done, we can test the checkout page with your woocommerce site. It would be similar like this: checkout-preview