I am trying to implement Stripe according to the official documentation here: https://stripe.com/docs/payments/integration-builder
I've managed to get the payment form working except that the pay button should disable when no credit card is entered, and also when there is a CC in the field and pay is pressed, a spinner should takeover. Code below:
<form id="payment-form">
<div id="card-element" class="">
<!-- Elements will create input elements here -->
</div>
<button id="submit" data-secret="<%= @intent.client_secret %>" class="stripe-custom">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay Now</span>
</button>
<p id="card-error" role="alert"></p>
<p class="result-message bold hidden">
Payment Successful!
</form>
<script>
// Set up Stripe.js and Elements to use in checkout form
var style = {
base: {
color: "#32325d",
fontSmoothing: "antialiased",
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.on("change", function (event) {
// Disable the Pay button if there are no card details in the Element
document.querySelector("button").disabled = event.empty;
document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
});
</script>
<script>
// Show a spinner on payment submission
var loading = function(isLoading) {
if (isLoading) {
// Disable the button and show a spinner
document.querySelector("button").disabled = true;
document.querySelector("#spinner").classList.remove("hidden");
document.querySelector("#button-text").classList.add("hidden");
} else {
document.querySelector("button").disabled = false;
document.querySelector("#spinner").classList.add("hidden");
document.querySelector("#button-text").classList.remove("hidden");
}
};
</script>
I don't see any errors in the Console logs when running the above. Any ideas? TIA!
button
an ID and then grabbing it by that, rather than just grabbingbutton
. - floatingLomas