Stripe - responding to errors in SC

[TomD]

I’ve just started using Wappler’s Stripe features. I have a very basic requirement - to submit payment details and capture the payment later. I’ve added a Checkout Form using App Connect, and used a Create Setup Intent Template in Server Connect, setting the payment method to Manual. This all works fine and was easy to set up.

After the card details are successfully submitted and payment authorised, I want to store the details and add a button to capture the details etc. Again, this seems straightforward. What I’m not clear about is how to handle errors such as ‘card declined’ etc. I would like to add a condition before the insert here:

…but can’t get any value returned to use in the condition. Eg pmt_status above returns ‘requires_payment_method’ which doesn’t help. I’ve tried various promising options, but they don’t return any values, eg:
createPaymentIntent.last_payment_error.code
createPaymentIntent.last_payment_error.decline_code
createPaymentIntent.last_payment_error.message

if the payment is authorised, I would like to store ‘requires capture’ for the payment status, but I don’t know where to find that either.

The dynamic events in the Stripe Checkout Form in App Connect reflect the status of the card authorisation. Is this the way to approach the problem? It just seems that it ought to be possible to to access the relevant responses in Server Connect. I think I’m missing some of the basics of how this should work.

I would be grateful for any suggestions.

[Fred_K]

Have you checked the webhooks? There is one that listens to your checkout session statuses and I think you might be able to fetch that status and insert it in your DB.

[TomD]

Thanks Fred. That’s a good idea - I’ll have a look at those. However, it seems the information I need is returned using Create Payment Intent so I would have thought I should be possible to access it via the Server Data Bindings panel, eg:

or:

[Fred_K]

It would be easier indeed to grab all the values straight from the Api creation but Stripe’s doc instructs us to look elsewhere, with the webhooks because only they can monitor status changes in real time. I saw short instructions abt it in their setup and payment intent documentation pages. Hope the solution is there…
I’m in the middle of a similar checkout setup and will defo look there when ready to manage error scenarios.

[samrich]

@TomD

Did you ever figure this out? Are you able to access the error codes?

[samrich]

Hey @Teodor, @TomD , and @Fred_K,

Take a look at this image, where is the form value for “error” get created? Right now when I run my Try/Catch for the Create Payment Intent, there is nothing in the “catch” Steps setting the “error” value. But when I pass an invalid credit card to my form and the stripe transaction processes, the browser1.goto executes and a value of the error is passed to the next page. The value passed is text: “Your card has been declined.” That is not something I wrote, looks like a message from Stripe. So if some of the error information that @TomD referenced in his original post is showing up, how do we access it?

[TomD]

@samrich

Did you ever figure this out? Are you able to access the error codes?

I wasn’t able to figure this out. I would be interested to see replies to this. It seems that useful information is there but not obviously accessible.

Having said that, I’ve finally got round to looking at Wappler’s webhook feature - I think this should provide a solution. They look straightforward to set up - except I haven’t got them to work yet! (I’ve used them before Wappler’s Stripe integration successfully).

[samrich]

@TomD,

We are using a webhook for successful payments. It was pretty easy to setup. I thought about setting one up for failed payments, but if there is any delay (even a few seconds) this will not be the immediate response our end users would expect if their credit card payment didn’t work. Hopefully someone will give us some insight.

[George]

What is your flow in calling the create payment intent?

[samrich]

Hi @George,

Thanks for taking a look. I’ve attached two pics, one of the form page and the second is the server connect. Once the form submits the successes go to a new “success” page and the errors go to a new “error” page. For the successes, we are using a webhook to do the updates to our local database. On the error page we would like to display the Stripe “last_payment_error” message and decline code. That way the user knows why it failed (example: they typed the cvc number incorrectly).

One thing to note, in @TomD post above with the two pics showing the “confirm” browser devtools network Preview, we can see that Stripe is passing the values back. We just don’t know how to access them.

Thanks for looking at this, you guys are the best.

[George]

Well your setup looks all good!

You have handled correctly the stripe error with try/catch. It is just that because you have handled it, it will always return as “success” to tge client side form.

So you should check over there if the output is error or not.

Other possibility is to send response 500 in the catch with the error as text. Then in the form you will get the “error” event instead of “success”

[samrich]

Well, that didn’t work. Seems like anything put into the “Catch” section is not executing. I tried adding a response 500 if I supply an invalid credit card I get an error response but it is still not one that can be controlled.

One thing that I noticed is when you are working with the “Dynamic Events” for the form and you are setting up say a “browser1.alert” for Error or Success, you are limited to what can be selected from the Client side Data Bindings. I only see error, processing, paymentIntent, paymentMethondType, and the original form inputs. If I change the "<form is=“dmx-stripe-checkout-form” to "<form is=“dmx-serverconnect-form” I see all of the Outputs from the server connect. But because the “confirm” never comes from Stripe I am assuming that the outputs like error_code are not set.

Finally, you said to check on the client side form if the output is error or not, well, what would that look like? If I add a dynamic event for error, that works except I only have a stripe “message” I can’t see any of the rest of the details from the stripe confirm as depicted up above in @TomD second pic.

[TomD]

I think I may have misunderstood you, or at least not have been very helpul. I didn’t make any progress getting the values I showed in my screenshots - and would be interested if someone could comment on that or show how it can be done (or explain why it’s not an option etc.).

However, I can get the errors returned from failed form submissions - eg displayed in a modal like this:

… having been selected here:

Also, errors such as invalid card formats are validated and displayed client-side eg:

I didn’t have any problem with any of this - I just followed the documentation. I’m using PHP/MySQL. If your question is about retrieving all the values as in my screenshot, this won’t be helpful or get you any further - but in case it’s more general, I thought I would mention the above.

[Teodor]

Here you can see an example of how to show the error message to the users using the toasts component:

Stripe Custom Checkout Forms

Intro You can create your own custom checkout forms for Stripe. Custom forms allow you to fully customize your checkout, branding and style of the page, while the whole payment is securely handled by Stripe. Custom forms are also useful if you want to use additional/custom fields in your checkout form such as address or other user details - which for example you can store in your database. Stripe Component The first thing we need to do is to add the Stripe component on the page. R Right cli…

[TomD]

Thanks. I’m not sure why I used a modal. The toast looks good - I’ve switched.

[Teodor]

You can use any of the ‘alert’ type components - a modal, notification, toast etc.