Stripe - equivalent elements when upgrading from v6.8 to 7b14

[guptast]

Hi All,

I am going through the process of upgrading a project from v6.8 to v7b14. I have updated code for most of the elements that were incompatible between the two versions, except code / elements used for the Stripe Integration.

I have been using dmx-stripe-payment-method in v6.8, but this element is not displaying the Card input in v7b14.

The payments are one-off. I don't save and use Credit Card details for any future payments. The current workflow is:

1. Collect the customer and order details (prices, products are not maintained in Stripe).
2. Collect the Card Details - Create a Payment Intent that charges customer's Credit Card with ordered amount
3. An order is created once the payment has been successful.

Help needed:

1. What's an equivalent Stripe element in v7b14?
2. I have tried dmx-stripe-card element, but when creating a Payment Intent, it generates an error required_payment_method, which means payment_method_id is missing. But this was not an issue with the previous Stripe integration.

Could someone please help me in updating the Stripe integration to v7b14? This is greatly appreciated.

Current stripe element - code and screenshot.

<dmx-stripe-payment-method id="inputStripe" hide-postal-code="true" display="tabs" icon-style="solid" payment-methods="card"></dmx-stripe-payment-method>

[patrick]

dmx-stripe-payment is the replacement for dmx-stripe-payment-method. You also need dmx-stripe-elements on your page.

The dmx-stripe-card should not be used for new websites, Stripe recommends upgrading them to the Payment Element.
Upgrade your integration | Stripe Documentation

Seems that we are missing a good step by step documentation for the stripe elements, an overview of the new elements can be found here:
Stripe Elements Overview - Docs / Ecommerce - Wappler Community

[guptast]

Hi Patrick,

Thank you for the information. In the absence of a good step-by-step guide on integrating the new Stripe Elements for at least with 2 or 3 common scenarios, we have had to revert to the now deprecated Stripe components in both new and upgraded projects or leave the projects at the previous stable version of Wappler. While this is not an ideal decision, it helps keep the projects operational.

We value your great support and look forward to your guidance to help us transition and create better apps.

[guptast]

Hi @Teodor, thank you for linking the latest Stripe documentation in this post (Who is still running on v 6.8.0? - #6 by Teodor). I have reviewed the documentation for Using Stripe Embedded Checkout and assesed that this Stripe Element is the closest integration for my project.

In my project, online buyers create a shopping cart and pay for the total amount via Stripe Card payment component (in v6.8.0). However, the documentation doesn't cover scenarios where Products and Prices are not maintained in Stripe.

Additionally, there's no direct transition from the older Stripe Payment method to newer Stripe Elements in the latest Wappler version. @patrick has also acknowledged the need for a good step by step guide for the stripe elements.

There are several posts on the forum highlighting the need for a comprehensive documentation for the latest Stripe Elements. It appears there is a huge gap between the level of documentation community expects and what is currently available for important integrations such as Stripe.

I kindly request the Wappler Team to provide guidance on how users can effectively offer feedback on the documentation for specific integrations. I believe this will assist the team to identify gaps and work in collaboration with the community to improve the quality and completeness of the documentation.

[Teodor]

For custom checkout you need:

Server side:

Create a server action.
Add a Create Payment Intent Template:

Setup its options - amount, currency and enable Automatic Payment Methods:

Done, save the server action

On your page

Add the server action component and select the one you just created, with the payment intent inside:

Add Stripe Elements component. Add your Key and set the Flow to With Intent. For client secret we need to get the value from the server action:

Pick the client_secret returned:

Add the Stripe Payment element. Set its properties:

And add regular button, that will be used as a pay button. On click add to it an inline flow:

In the flow add Stripe > Confirm Payment step:

Enter a Return URL, this can be static or dynamic.

After a payment you will be redirected to your Return URL like this:

https://localhost/some_page.html?payment_intent=pi_3PVXBhGRWPyyxDyv1SP24qu1&payment_intent_client_secret=pi_3PVXBhAAAAyyxDyv1SP24qu1_secret_6gimxDFcKjBkJBBB9ubKDqGp2&redirect_status=succeeded

That's pretty much it.

[guptast]

Many thanks for the tutorial, Teodor.

I will add the new Stripe Elements in my project and update this post accordingly.

[Mozzi]

Thanks for the updated tutorial..

[guptast]

Hi Teodor,

I tested the integration in a sample project and the Stripe Elements worked as expected. Thank you for the step by step tutorial.

However, in my live project I have run into a slight hiccup.

Previous Method

With the previous Stripe Card Payment integration, I was able to submit a dmx-stripe-checkout-form that included product information for verification on the backend and credit card details. On the success of this form, I could then submit a form to create a new order in the database. The form contained the complete order - customer details, billing & shipping details etc.

The reason for submitting the form to create a new order after the payment confirmation is to ensure that the order has been paid in full.

Please note there was no redirection required to complete the order after the credit card details had been verified and the credit card had been successfully charged.

Stripe Elements

With the integration of Stripe Elements and Stripe Payments, there's now a requirement to provide a return_url in the inline flow of the Buy button. So, in this case, once the credit card has been successfully charged, I can't submit the final form to create a new order in the database.

I have tried to submit the final form by adding steps after the Confirm Payment step in the inline flow, but it doesn' not run. My understanding is that it is not running due to the redirection or refreshing of the page (return_url) on the payment confirmation.

I have included the screenshots below to show what I have tried.

Condition to check intentStatus

Condition to check stripePayment1.complete status

Stripe Payment events available in the Data Bindings

Could you please provide some guidance on how I can submit the final form? Or perhaps I need to review the current process flow to suit API requirements of the new Stripe Elements.

[Teodor]

Use stripe webhooks for that. Listen for the payment_intent.succeeded event and insert your order in the database there:

Stripe returns a lot of data that you can directly bind in the insert step:

This way you will be sure the data will be inserted always and not rely just on a front end workflow to do it, where the user may close their browser before the form is submitted.

[guptast]

Hi Teodor,

I definitely see how Stripe webhooks can be used for this purpose. But my dilemma is how do I send the data to insert that has been collected from the customer on the front end?

[Teodor]

@guptast

But my dilemma is how do I send the data to insert that has been collected from the customer on the front end?

Where does this data come from - what element on the page?

[guptast]

This is a server connect form with hidden inputs. These inputs contain the data that has been provided by the customer, such as email, phone number, billing & shipping details etc.

This is the server connect form that I need to submit upon the success of paymentIntent.

<form id="scf_checkout_order" is="dmx-serverconnect-form" method="post" action="/api/Shop/Web/shop_checkout_order">
</form>

[ben]

Hi Shalabh,

I kept the data in the datastore, i.e. ID and quantity, did a lookup to ensure that the price was correct, along with name etc, and used that to populate the invoice and invoice-items tables.

I hope that helps.

[Teodor]

On the redirect page you can create a page flow that runs on page load and calls the Retrieve Payment Intent server action. You need to pass the returned query.payment_intent_client_secret from the redirect URL and check the status, use a condition to run the form submit then.

The other thing you can probably do is to create the order in the database before the payment, and later, after the payment is done, retrieve the order details and update it.

[guptast]

@Teodor

On the redirect page you can create a page flow that runs on page load

I will give it a try and update my response.

@Teodor

The other thing you can probably do is to create the order before the payment, and later, after the payment retrieve the order details and update it.

I have also been considering this flow. For this I am thinking of using the metadata information available via the payment_intenet.succeeded stripe webhook. But the Post Data Object for this webhook doesn't provide any details about the metadata object (No metadat information is available in the Retrieve Payment Intent API step as well). It appears as a single field in both places.

If the metadata object is available in the webhook or Retrieve Payment Intent serverside API, then I can retrieve and match relevant information in the database to take any further action - such update the existing order details (upon success) or delete the existing order (if payment failed).

Thank you for helping me in resolving this process flow.

[Teodor]

You need to pass the metadata in the server action. For example you can do your insert order before the payment intent and then use the id returned to send in the metadata:

The data is then available in the webhook: