Customize “updated checkout experience”

  • Resolved janole

    (@janole)


    1 year, 10 months ago

    Hey,

    This question has been asked in here before but I was told to create a new topic for it anyways by staff.

    Im trying to integrate the “updated checkout experience” into my website and wonder how I can customize the fields to fit my brand as detailed in the stripe documentary here.

    The plugins documentation on styling stripe fields is not updated for the new checkout experience, so it does not work.

    Greetings!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    Thanks for your message. Can you provide us with more information about what exactly you would like to implement? What is the theme the site is using?

    Looking forward to hearing from you.

    Thread Starter janole

    (@janole)

    I want to apply the appearance option to the stripe fields generated by WooCommerce as described in the official stripe docs:

    const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } };

    // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

    https://stripe.com/docs/elements/appearance-api

    Since this is not a theme issue, I use storefront currently.

    • This reply was modified 1 year, 10 months ago by janole.

    Hi there,

    Thanks for clarifying what you’re wanting to achieve here. The appearance API won’t work here since you’re using the new updated checkout experience.

    I ran some tests on my end and I’m also not able to modify the styles of the fields when using the updated checkout experience. I can see that the styles for these fields are being pulled from the theme and are generated that way. However, editing and changing those styles is proving to be quite difficult. I’ve gone ahead and reached out to the developers to see if they have some insight into how we can go about this since it isn’t outlined in the documentation.

    If you decide you want to disable the updated checkout experience, then we do have a great guide on how to style the credit card fields. I can confirm that these methods do work which makes it a good alternative for the time being.

    Once we hear back from the developers, we’ll pass along any details they have.

    Hi there,

    We’ve heard back from the developers on this and at the moment, there isn’t a way to update the styling of the Stripe fields when the?new checkout experience?is?enabled.

    The way styling works with the new checkout experience (UPE), is quite different. It tries to?extract the styling?from existing fields on the page, and pass this information to Stripe to render the fields. That’s why it “adapts” to the current theme.

    Thanks for letting us know that you’d like to style these fields in addition to the styles extracted from the existing fields on the page. There is an open GitHub issue for this and you can follow along on the progress made at the link below.

    https://github.com/woocommerce/woocommerce-gateway-stripe/issues/2514

    For the time being, if you need to adjust the styles of the fields, you can disable the new checkout experience and use the details outlined in the Styling credit card fields documentation.

    If you have any other questions don’t hesitate to ask.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Customize “updated checkout experience”’ is closed to new replies.