Migrate to Stripe Payment Element

[ultimate-tester]

Currently Stripe is hardcoded into the system. That's alright because Stripe offers a lot of payment methods. Unfortunately, the CardElement is used which limits the payment methods to card only. The comparison is below:

Describe the solution you'd like I'd like to propose to migrate to the Stripe Payment Element (I can provide a PR!) which will allow any payment method that is enabled on the Stripe account (e.g. cards, iDEAL, etc.). Migration guide for your reference can be found here: https://stripe.com/docs/payments/payment-element/migration?integration-path=one-time

Describe alternatives you've considered An alternative would be to create a module for each payment method that I need to support, but that seems counter intuitive, especially considering there's an easy oneliner solution.

Additional context Please let me know if you'd accept this migration and I will perform it for you and submit a PR.

[ultimate-tester]

I finished the migration on my repository, almost ready for PR - just some more testing. Sneak preview of how it will look like (I'm using Dutch locale but computer language is set to English, hence the mixed languages):

In case you're wondering, yes it will also accept WeChat this way 👍 It does make me think that the payment methods currently needs a redesign. There would be no need for Evershop's bullet list of payment methods if Stripe already offers a list of payment methods.

My advice for long term:

• Rename Payment Methods to Payment Providers
• Manage Payment Providers on Evershop Admin Panel (api key and such)
• Manage payment methods directly on the admin panel of your payment provider

Short term solution

• Put the logo of Stripe and have the option already selected by default so the user does not need to click on it.

@treoden what do you think about this? I could start work on this redesign too but then as part of another PR.

[treoden]

Hi @ultimate-tester ,

It is great. I really impressed with this proposal. I would suggest to make the payment methods configurable (On/Off) from admin panel.

There would be no need for Evershop's bullet list of payment methods if Stripe already offers a list of payment methods.

-> Could you explain more about this point?

Rename Payment Methods to Payment Providers

-> Sure.

Manage Payment Providers on Evershop Admin Panel (api key and such) Manage payment methods directly on the admin panel of your payment provider

Yes EverShop already works this way, You can navigate to admin -> Setting -> Payment Setting

I finished the migration on my repository, almost ready for PR - just some more testing.

How long do you think it would take? Can you raise a PR to the 'dev' branch and I can give it a try before merging to main?

Thank you so much

[ultimate-tester]

Thanks for the feedback. So my proposal is to remove the list of payment providers if there's only 1 payment provider setup in admin panel, and in case that payment provider is marked as "multi payment method". This would mean that the Evershop list will disappear and the Stripe payment method dialog will always show (unless you add more providers in admin panel).

To explain in practice, I could start working on it in another branch and show you the result using screenshots.

EDIT: scratch that I think this also won't work too well taking future modules into account. Let's aim now on the migration and later on UX

[treoden]

Hi @ultimate-tester ,

For your information, EverShop providing Paypal, COD, Stripe (credit card) for now.

To explain in practice, I could start working on it in another branch and show you the result using screenshots.

Amazing. Feel free to raise if you need any support

[ultimate-tester]

Thanks, I'll submit a PR soon to DEV. One thing though, I need to have the absolute URL of the page after checkout. Currently the script redirects to a relative URL (${checkoutSuccessUrl}/${orderId}). Do you already have the base URL somewhere in memory, or shall I just use window.location to get it?