Skip to content

Release testing instructions for the WooCommerce Stripe payment gateway 5.6.0

Ricardo Metring edited this page Sep 24, 2021 · 19 revisions

How to test the new payment experience - Universal Payment Element (UPE)

Background

The new payment experience, also known as Universal Payment Element (UPE) provides a new checkout experience, supporting multiple local payment methods in the same UI component. Please read "UPE element" as the new UI checkout component, and "UPE payment methods" as the payment methods supported under this new checkout component.

UPE checkout

Test activating UPE enables the correct payment methods.

  1. Go to WooCommerce -> Settings -> Payments
  2. Note which Stripe payment gateways are enabled.
  3. Click Manage next to the main Stripe Gateway.
  4. Check Try the new payment experience.
  5. Click Save Changes at bottom of the page.
  6. When page reloads check that the enabled payments methods at the bottom of the page match the same stripe payment gateways which were enabled before UPE was enabled, except Multibanco and Alipay which are not supported by UPE.
  7. Toggle a few payment methods.
  8. Disable UPE by un-checking Try the new payment experience.
  9. Click Save Changes at bottom of the page.
  10. View which gateways are enabled on the main WooCommerce -> Settings -> Payments page. They should match what was enabled in the UPE settings.

Test UPE element reasonably matches current theme

Install and activate several WordPress themes and check:

  • CSS rules are read from the theme and passed to the UPE iFrame on the checkout page.
  • The selected payment method in the UPE should have the same color as the place order button.
  • The text inputs in the UPE element should have the same background and border colors as the rest of the inputs on the page.

Critical flows with UPE

  • Ensure Try the new payment experience (UPE) is enabled.
  • Please re-run the following critical flows:

Shopper

Merchant

Shopper (subscriptions)

Merchant (subscriptions)

Blocks: Merchant

Blocks: Shopper

Alternative Payment Methods (APMs)

Note: Make sure to enable the payment methods below under the "New payment experience" setting.

Test paying for an existing order on the order page.

  1. Ensure Try the new payment experience (UPE) is enabled.
  2. Create a new order in WooCommerce Backend. Set status to pending payment and add a product to the order.
  3. Click Customer payment page →
  4. Make payment with each UPE payment method.
  5. Order should transition to the processing status.
Clone this wiki locally