feat(web): Create Web Components with Stripe Elements

[rdlabo]

iOS and Android can use "Payment Sheet" from Stripe SDK. But web sdk has only Stripe Elements. So we must create this plugin UI using Stripe Element, if this plugin provide to web platform.

This is working on this repository:
https://github.com/stripe-elements/stripe-elements

Will like https://capacitorjs.com/docs/web/pwa-elements

[DwieDima]

When paying, or saving card for future payments, some credit cards require a code verification (3d secure validation).
With stripe elements, an iframe of the bank provider was opened in this case.
Is this something that is also taken into account when implementing the stencil component?

[rdlabo]

@DwieDima Will yes. But this element will be simple UI like iOS or Android. So if you want to customize original UI, you should implement your UI using Stripe Elements.

Thanks.

[DwieDima]

@rdlabo Oh, I see. The stencil component will have no stripe integration, but is only responsible for collecting the required card information, right?

I see the problem here as stripe elements uses hosted fields and the entered credit card information can't be read by the developer in the frontend either (hosted fields with secure connection to stripe). This has the background of SCA compliance, which is mandatory in Europe.

Therefore, credit card information is never sent directly unencrypted to stripe or even the developers own backend (which shouldn't be done anyway).

what i want to point out is, if this stencil component does not provide an option for hosted fields and the credit card information can be read and is used directly on the client side, this component cannot be used in Europe.

[hideokamoto]

The component is just a wrapper of Stripe.js and Stripe Element.
https://stripe.com/docs/stripe-js

We need to provide a card element as a function to render the component like PaymentSheet in iOS.
So we are planning to create a template using Stripe.js and Stripe Element and Stencil.
Never mind, we will not create input elements to collect card information without using Stripe Element.

[hideokamoto]

https://github.com/stripe-elements/stripe-elements

[rdlabo]

@DwieDima Did you adapt this plugin for production? If yes, please tell us what app. Please help us to develop this plugin in 2022.
#145
Thanks.

[MerlinOfCode]

yea dont even waste your time with these clowns