Stripe.js elements integration inside a Elixir LiveView (Bootstrap styles)

app.js

// Code handling the card payment
const payWithCard = function (stripe, card, clientSecret, liveView) {
  stripe
    .confirmCardPayment(clientSecret, {
      payment_method: {
        card: card,
      },
    })
    .then(function (result) {
      if (result.error) {
        // TODO : Show error to your customer
        console.log(result.error);
      } else {
        // The payment succeeded!
        console.log(result.paymentIntent);
        // Push the event to the LiveView and pass the paymentIntent
        liveView.pushEvent("payment_success", result.paymentIntent);
      }
    });
};

// PaymentForm LiveView hook
Hooks.PaymentForm = {
  mounted() {
    console.log("Mounting payment form...");
    
    const form = this.el;
    const stripePublishableKey = form.dataset.publishableKey;
    const stripeClientSecret = form.dataset.clientSecret;
    const style = {
      base: {
        lineHeight: "1.35",
        fontSize: "1.11rem",
        color: "#495057",
        fontFamily:
          'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
      },
    };
    const stripe = Stripe(stripePublishableKey);
    const elements = stripe.elements();

    // Card number
    const card = elements.create("cardNumber", {
      placeholder: "",
      style: style,
    });
    card.mount("#card-number");

    // CVC
    const cvc = elements.create("cardCvc", {
      placeholder: "",
      style: style,
    });
    cvc.mount("#card-cvc");

    // Card expiry
    const exp = elements.create("cardExpiry", {
      placeholder: "",
      style: style,
    });
    exp.mount("#card-exp");

    var validatePaymentLink = document.getElementById("validate-payment");

    validatePaymentLink.addEventListener(
      "click",
      function (event) {
        event.preventDefault();
        event.target.disabled = true;
        // Complete payment when the submit button is clicked
        payWithCard(stripe, card, stripeClientSecret, this);
      }.bind(this)
    );
  },
};

payment_form.html.eex

<!-- This is the LiveView form code. The @payment_intent variable is the Stripe PaymentIntent returned by the
     Stripe API and created on the server side before displaying the payment form -->

<form phx-hook="PaymentForm"
      data-client-secret="<%= Map.fetch!(@payment_intent, "client_secret") %>"
      data-publishable-key="<%= @stripe_publishable_key %>"
>
  <div class="d-flex justify-content-between align-items-end mb-4">
    <h5 class="mb-0">Pay with your card</h5>
    <div class="text-muted"><i class="fab fa-cc-amex fa-2x mr-2"> </i><i class="fab fa-cc-visa fa-2x mr-2"> </i><i class="fab fa-cc-mastercard fa-2x"></i></div>
  </div>
  <div class="row" id="addNewCard">
    <div class="form-group col-md-6">
      <label class="form-label" for="card-name">Name on Card</label>
      <input class="form-control" type="text" name="card-name" placeholder="Name on card" id="card-name">
    </div>
    <div class="form-group col-md-6">
      <label class="form-label" for="card-number">Card Number</label>
      <span id="card-number" class="form-control">
        <!-- Stripe Card Element -->
      </span>
    </div>
    <div class="form-group col-md-4">
      <label class="form-label" for="expiry-date">Expiry Date</label>
      <span id="card-exp" class="form-control">
        <!-- Stripe Card Expiry Element -->
      </span>
    </div>
    <div class="form-group col-md-4">
      <label class="form-label" for="cvv">CVC/CVV</label>
        <span id="card-cvc" class="form-control">
          <!-- Stripe CVC Element -->
        </span>
      </div>
    <div class="form-group col-md-4">
      <label class="form-label" for="zip">ZIP</label>
      <input class="form-control" type="text" name="zip" placeholder="123" id="zip">
    </div>
  </div>
</form>

<button class="btn btn-primary px-3" href="#" id="validate-payment">
  Next step<i class="fa-chevron-right fa ml-2"></i>
</a>