Stripe Elements Support

[Emiel]

A lot of us are struggling with Stripe integrations on our projects.

Of course, if a project is a simple shop it’s easy to walk through the tutorials step-by-step and make Stripe work for your website. However, if it’s not or you want an alternative payment method to be included, it gets incredibly confusing and hard to integrate and moreover it’s very hard to get help through the community or from the Wappler support team, because of the project specific and often complex web of variables and data in advanced customized projects. In my opinion support for Stripe’s Payment Element would solve these issues and save many among us lots of frustrated hours full of Stripe struggles:

The Payment Element is an embeddable UI component that lets you accept up to 25+ payment methods with a single integration. Whether you’re just collecting card payments or dozens of payment methods, the Payment Element is the easiest way to build an embedded and customized payments experience. If you have a mobile app as well, use our equivalent integrations for iOS, Android, and React Native.

• Automatically adjusts input fields to collect information based on the payment method and country.
• Dynamically sorts payment methods based on a customer’s locale and location to optimize for conversion.
• Reduces friction for card payments with input validation, masking, styling and error handling.
• Adds new payment methods without any front-end changes , and gives you access to new payment methods as soon as Stripe supports them.

Stripe Payment Element

[Teodor]

Can you explain which of the issues you currently have will the stripe payment element solve and what you can’t achieve currently with the elements already available, that can be used to build a checkout form?

Is a payment method missing probably or is it something else?

[Emiel]

Sure @Teodor,

Apart from the issues I am having currently, there’s the low maintenance and the way much easier implementation:

@Emiel

• Automatically adjusts input fields to collect information based on the payment method and country.
• Dynamically sorts payment methods based on a customer’s locale and location to optimize for conversion.
• Reduces friction for card payments with input validation, masking, styling and error handling.
• Adds new payment methods without any front-end changes , and gives you access to new payment methods as soon as Stripe supports them.

The issues I had lately and partially still have currently are described here and here and besides that I can’t get the submit handling right when combining Stripe’s scripts with Wappler’s components.

Following Stripe’s guide I would say integration of the Stripe Payment Element would be quite easy:

1. Add Stripe key to Wappler Server Connect Settings
2. Add the Stripe component to the checkout page
   (With step 1 and 2 done, the first 6 steps of the Stripe tutorial are covered, up to the “Fetch a PaymentIntent” step.)
3. So going further I create a payment intent through a server connect action and output the value to the checkout page.
4. With some custom scripts (thanks to @karh) on the checkout page I am able to create the Payment Element with the correct clientsecret from the paymentintent set and style it on the checkout page.
   (So we’re up to step 3 of the Stripe tutorial: Complete the payment on the client)
5. This is were trouble comes in: On clicking the submit button I can’t get the payment done (for cards i.e.) and users are not redirected to 3rd party pay site (like sofort, ideal, etc). I can’t get this right and it’s almost as hard to find help with that.
6. If Payment Elements was integrated in Wappler, besides the great advantages mentioned above, all variables and attributes would be easy to set, which is another thing I am really struggling with. And moreover custom scripting on the checkout page wouldn’t be necessary either.

Curious about your thoughts on this and would be happy to hear them.

BTW: If you could manage to setup a working example of Payment Elements in the current Wappler version I would be very very interested to see that!!

[Teodor]

So from what i understand you just want a ready to use element with all the payment methods etc. so you don’t have to select them in the UI and build your custom checkout form?

I am not sure any of this has anything to do with the two topic you already mentioned above. And to be honest i can hardly understand what your exact issues mentioned in these topics are, i really get lost reading through them.

So can you tell me which option from stipe payment elements you need to use, that is not currently included in the components available in Wappler and stops you from building your site?

And don’t get me wrong, this will be integrated in Wappler in the future, i just want to find the relations between the stipe payment element and this statement:

@Emiel

A lot of us are struggling with Stripe integrations on our projects.

…

However, if it’s not or you want an alternative payment method to be included, it gets incredibly confusing and hard to integrate and moreover it’s very hard to get help through the community or from the Wappler support team, because of the project specific and often complex web of variables and data in advanced customized projects. In my opinion support for Stripe’s Payment Element would solve these issues and save many among us lots of frustrated hours full of Stripe struggles:

As we mentioned a few times already the stripe integration in Wappler is a direct import of the official Stripe API with all the meta data and output data defined and it is one to one match. Which means, all the stripe server side actions are “templates” with all the needed stripe details added, saving you time doing custom api requests and adding all the values and parameters yourself.

[Emiel]

Dear Teodor,

I am not being critical on Wappler or saying your Stripe integration isn’t any good, don’t get me wrong. I know the range of available components and actions is very extensive and following the Stripe API guidelines. However I also know from a lot of other users that they are experiencing problems integrating Stripe in their projects, especially on advanced non-standard webshop projects, and it’s hard to get help solving these problems. That’s all, no offence

@Teodor

So from what i understand you just want a ready to use element with all the payment methods etc. so you don’t have to select them in the UI and build your custom checkout form?

Correct and that’s exactly what “Stripe Payment Element” provides. Besides it selects the available payment methods per customer location/country automatically, which is very useful in some world wide oriented projects. It is possible to add custom checkout form fields (like customer details) to it as well by the way, which I would also like to do.

@Teodor

I am not sure any of this has anything to do with the two topic you already mentioned above. And to be honest i can hardly understand what your exact issues mentioned in these topics are, i really get lost reading through them.

This is exactly what I am trying to say: Sometimes it gets overcomplicated making it hard to get help. I really tried to explain in detail which things I ran into while trying to get Stripe Element to work on my checkout page (so these issues have everything to do with this), but I do understand that if you and others don’t understand my questions it’s hard to provide answers. I won’t blame you or anyone else, but please also don’t blame me for trying to get something to work that’s not working out of the box as described in a tutorial and trying to find help with that by explaining the issues as clearly as possible.

@Teodor

And don’t get me wrong, this will be integrated in Wappler in the future

Very happy to hear this, although right now this would be really helpful:

@Emiel

BTW: If you could manage to setup a working example of Payment Elements in the current Wappler version I would be very very interested to see that!!

[Teodor]

And still you have not answered my question:

@Teodor

what you can’t achieve currently with the elements already available, that can be used to build a checkout form?

what functionality is missing for your project currently, that you need to use exactly the stipe payment element and not the available stripe elements?

[Emiel]

Excuse me, here it is:

1. Stripe Elements automatically shows and reorders available payment methods per currency and locale to increase potential conversion or in other words showing the most commonly used ones first.
2. Stripe Elements adds new payment methods without any front-end changes
3. Stripe Payment Elements automatically handles redirects to 3rd party payment sites as well as payment confirmations. Currently I can’t get customers redirected to Sofort or iDeal payment pages for example, at least not while using a client side Stripe component setup.
4. Stripe Elements support Google Pay and Apple Pay

[Teodor]

App Connect Stripe Elements 2.0 beta 1 are now available in Wappler 6.4.1
We will be adding new tutorials about stripe elements in the next days.