Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SPE checkout changes to match Woo visual standards #4053

Draft
wants to merge 13 commits into
base: fix/order-pay-for-order-payment-method-name
Choose a base branch
from

Conversation

wjrosa
Copy link
Contributor

@wjrosa wjrosa commented Mar 13, 2025

Fixes #3896

Changes proposed in this Pull Request:

We are updating the Single Payment Element implementation to make all the payment methods it renders to look just like any other WooCommerce payment method, to avoid any UX impact for shoppers.

Testing instructions

  • Checkout and build this branch on your test environment (tweak/spe-changes-to-match-woo-visuals)
  • Connect your Stripe account
  • On your Stripe dashboard, enable multiple payment methods
  • Copy your child payment method configuration ID from here: https://dashboard.stripe.com/settings/payment_methods (labeled "Your configuration")
  • Insert the ID above on client/blocks/upe/upe-deferred-intent-creation/payment-elements.js:139. This is temporary until the parent configuration, labeled WooCommerce Inc., supports all methods by default
  • Insert the ID above on client/classic/upe/payment-processing.js:136 as well
  • Build the frontend files (npm run build:webpack)
  • Enable the SPE feature flag (_wcstripe_feature_spe). You can do it by either hardcoding the return value of is_spe_available to true or by running npm run wp option update _wcstripe_feature_spe 'yes'
  • As a merchant, disable the legacy checkout experience in settings (wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=settings)
  • Enable the Single Payment Element feature
  • I recommend setting your store currency to EUR so you can have more methods available
  • As a shopper, add any product to your cart
  • Go to the block checkout page
  • Confirm you can see all the payment methods rendered just like any other method:
  • Confirm the same for the classic/shortcode checkout:

  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Changelog entry

  • This Pull Request does not require a changelog entry. (Comment required below)
Changelog Entry Comment

Comment

Post merge

@wjrosa wjrosa self-assigned this Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant