I’m working on a Stripe payment form, and documenting my experience as a tutorial along the way… see the links below!
I have some Wappler geeky questions about how to set up the form… maybe @Teodor or @patrick could answer these?
So to interface wtih Stripe, the form submit action happens through javascript code supplied by Stripe, rather than through a Server Action in Wappler. I have pasted the format of the code they supply below.
Question 1 - Page Refresh on Form Submission.
I’ve found that when the form is submitted in Wappler, the submit fails and the page is refreshed. I can prevent this by adding the attribute is="dmx-serverconnect-form" to the form… with this added, the form submit correctly and the page is not refreshed.
Is this behaviour supported by design in Wappler, or have I stumbled across something which could change in the future?
Question 2 - Adding a Spinner
I’d like to add a spinner to the [Pay Now] Button, but it isn’t selectable to show for state.executing in Wappler as the form does not have a server action. I’ve tried adding the spinner like this:
<span class="spinner-border spinner-border-sm text-light" role="status" dmx-show="state.executing"></span>
But it doesn’t spin during execution. How can I get my spinner to spin?
Many thanks!
Antony.
================= Stripe Supplied Form =================
<form id="payment-form">
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-errors" role="alert"></div>
<button id="submit">Pay</button>
</form>
============= Stripe Supplied Javascript on form submit ==========
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (ev) {
ev.preventDefault();
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
name: 'Jenny Rosen'
}
}
}).then(function (result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
}
}
});
});
Here are the tutorials… comments welcome! 
