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.

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 critical flows below. Note these are slightly different from the critical flows page and there are more tests at the bottom.

Shopper

• Checkout with normal credit card
• Save card at checkout
• Checkout with saved card
• Checkout with SCA card
• Checkout failures (with various cards)
• Checkout with Payment Request
• Add new payment method
• Delete payment method

Merchant

• Manual capture - Note: With manual capture enabled, "card" will be the only UPE method available regardless of what is chosen in the admin. While this is counter-intuitive and may seem like a bug, it is expected behavior for this release.
• Full refund
• Partial refund
• Refund failure

Shopper (subscriptions)

• Purchase subscription product
• Purchaser free trial subscription
• Purchase multiple subscriptions (same schedule)
• Purchase multiple subscriptions (differing schedules)
• Renew subscription
• Change payment method to new card
• Change payment method to saved card
• Set default payment method
• Change default payment method

Merchant (subscriptions)

• Renew subscription automatically
• Renew subscription manually

Blocks: Merchant

• Blocks: Create a Cart page with the Cart Block
• Blocks: Create a Checkout page with the Checkout Block

Blocks: Shopper

• Blocks: Checkout with normal credit card
• Blocks: Checkout with SCA card
• Blocks: Checkout failures (with various cards)
• Blocks: Checkout with Payment Request
• Blocks: Save card at checkout
• Blocks: Checkout with saved card
• Blocks: Purchase subscription product
• Blocks: Purchase free trial subscription
• Blocks: Purchase multiple subscriptions

Alternative Payment Methods (APMs)

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

• Checkout with iDEAL
• Checkout with Sofort
• Checkout with Giropay
• Checkout with EPS
• Checkout with Bancontact
• Checkout with Przelewy24
• Checkout with SEPA

Test SEPA Subscriptions

1. Ensure Try the new payment experience (UPE) is enabled.
2. Ensure SEPA Direct Debit is enabled.
3. Follow the instructions in checkout with SEPA to be able to listen to webhooks and accept SEPA orders.
4. Repeat the Shopper (subscriptions) tests with SEPA instead of card.
5. Repeat the Merchant (subscriptions) tests with SEPA instead of card.

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.

Test UPE form validation for credit card and SEPA

1. As a shopper, add a product to the cart and go to checkout. Confirm UPE element loads.
2. Without entering any payment information, click the Place Order button.
3. Confirm that error messages are displayed for the invalid fields.
4. Refresh the checkout page.
5. Enter a full CC number, but do not enter any expiration or CVV and click Place Order.
6. Confirm that error messages are displayed for the invalid fields and no console errors are shown.
7. Complete all payment fields and click Place Order.
8. Confirm that the order was successfully placed.
9. Repeat the checkout steps with SEPA and an empty/partially filled/then fully field IBAN (DE89370400440532013000 as an example IBAN).
10. Next as a logged in customer visit the My Account > Payment Methods page.
11. Click Add Payment Method button (ensure saved cards are enabled if it is not present).
12. Run through some of the same tests listed above with empty/partially filled/then fully filled fields on both CC and SEPA and confirm that the proper error messages are displayed and no console errors are shown.

Exploratory testing with UPE enabled

Please perform some exploratory testing around the checkout flows and WooCommerce > Payments > Stripe settings with UPE enabled and let us know if you find any errors or inconsistencies.