Hello,
I have been working on a project that has been upgraded from v6.8 to v7b20. This upgrade included an integration with the new Stripe Elements and Stripe Payments components, which required a major rewrite of the code, processes and user interactions.
I have got the new process flow working correctly. However, I have been unable to find a solution to one aspect of this new setup. When a user clicks on the Pay button, the Stripe Payment element runs an API to create a payment intent, which returns succeeded status after a successful charge (via the return_url parameters).
The API call to Stripe for the payment and the return response may take a few seconds to complete. I want to show a spinner or a modal dialogue for the duration of this process. But I can't find any dynamic event on the Stripe Payment element that can be used as a condition to show the modal.
Is there any event available in Stripe Elements that can function similar to state.executing status? Or is there another method to provide some feedback to the user while this API call to Stripe has been sucessfully executed?
Any help is greatly appreciated.
Finally just got mine working (although I'm still unable to check for and handle non-card errors...):
For context: it's a php site, and the first stage of the page is getting them logged in and then creating a payment intent (via serverconnect1).
The following code disables my button and shows a spinner, until an error happens or they're forwarded to another url anyway.
<dmx-stripe-elements id="stripe-elements1" flow="withIntent" dmx-bind:client-secret="serverconnect1.data.client_secret"
locale="en-GB" dmx-bind:key="serverconnect1.data.Stripe_public_key"
dmx-on:error="waiting.setValue(false)"></dmx-stripe-elements>
<dmx-value id="waiting" dmx-bind:value="true"></dmx-value>
<dmx-stripe-payment id="stripepayment1" dmx-on:ready="waiting.setValue(false)"
dmx-on:error="notifies1.warning('An error occurred: '+error.type);waiting.setValue(false)"></dmx-stripe-payment>
<button class="button cta w-100 mx-auto my-3" dmx-on:click="waiting.setValue(true);stripepayment1.confirmPayment({
confirmParams: {
return_url: 'https://myrevisionplanner.com/purchase-confirmation'
},
clientSecret:`serverconnect1.data.client_secret`
})" dmx-bind:disabled="waiting.value==true" dmx-class:disabled="disabled">
BUY NOW
<span class="spinner-border spinner-border-sm" dmx-show="waiting.value==true"></span>
</button>
I should add that it's been very temperamental to set up, and for a while, it just stopped returning errors to the live data tab, despite showing them in the UI. No clue what I'd done to it.
I don't think it likes when you put confirmPayment into a 'run', because that includes a 'name' parameter, which Stripe doesn't like... 
1 Like
Hi Emily,
Thanks for sharing the code to display a spinner. I will integrate it into the project and update the post to keep you in the loop.
I have setup an inline flow on the dmx-on:click event and it seems to have been working okay in my testing so far. The name field gets prefilled when Confirm Payment element is selected in the flow editor.
For me, it was showing a message in the console on Chrome from Stripe about 'name' being unrecognised as a parameter, and that it might cause problems in a live setting.
Hi Emily,
I have incorporated the code in my project and it's working as expected.
There was only one part of the code that I didn't understand in the error event. Where do I pick error.type from in the Data Picker?
Thank you for your help, this is greatly appreciated.
I think I probably added that manually in code view - pretty sure it only showed me error in the data picker, but since I could see the structure of the returned error in my network tab, I knew it'd be error.type that I wanted.
1 Like
