I have a form which calls Stripe via some javascript that Stripe supply.
The form payment_form
is defined like this on the page:
<form id="payment_form" method="post" is="dmx-serverconnect-form">
<div id="card-element">
<!-- Stripe Elements will create card input fields here -->
</div>
<button id="b_pay_now" class="btn btn-success" type="submit">Pay Now</button>
</form>
And the Stripe Javascript looks like this:
<!-- Stripe elements/js script -->
<script src="stripe.js"></script>
<script>
var form = document.getElementById('payment_form');
form.addEventListener('submit', function (ev) {
ev.preventDefault();
stripe.confirmCardPayment(dmx.parse("manage_stripe_payment_intent.data.stripe_client_secret"), {
payment_method: {
card: card,
billing_details: {
name: dmx.parse("to_be_paid_by.value"),
}
}
}).then(function (result) {
if (result.error) {
// Code to show error
} else {
// Payment successful - Code to process payment data
}
});
});
</script>
This all works perfectly.
So now as my design evolves, I want to call a Server action first, and then if the result of that is successful then I want to to submit the payment to Stripe.
To do this, I need to perform a payment_form.submit()
type function. However I can’t do this in Wappler as it is not a server action based form.
So I have defined a javascript function to do it:
<script>
function submit_payment_form() {
document.getElementById("payment_form").submit();
}
</script>
I call this function from a flow:
<script is="dmx-flow" id="flow_submit_payment_form" type="text/dmx-flow">{
runJS: {function: "submit_payment_form", name: "submit_payment_form"}
}</script>
And for testing purposes, I call the flow from a button:
<button id="b_pay_now2" class="btn btn-success" dmx-on:click="flow_submit_payment_form.run()">Pay Now Function Call</button>
My expectation is that this will submit the payment_form
in the same way.
However it actually causes the whole page to re-load like I had clicked the browser’s refresh button.
Can anyone tell me what I am doing wrong?
Last updated: