1
votes

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!

2
You may want to try giving the button an ID and then grabbing it by that, rather than just grabbing button. - floatingLomas
@floatingLomas no luck when adding an ID to the button... - gitastic

2 Answers

0
votes

Within an event listener for submit you must call the loading function which is defined by "var loading = function (isLoading)". Like this:

var form = document.getElementById('payment-form');

form.addEventListener('submit', function(event) {
            loading(true);
});

I believe something like this should work for you.

0
votes

When the button received 'click' event you can call the method: loading(true);

//Create the function loading

const 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");
    }
};

full tutorial: https://stripe.com/docs/payments/integration-builder