What Attributes Should I Set on a Stripe Submit Payment Form?

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!