order_show.html

<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h3>Your order</h3>
        <table class="table">
          <thead>
            <tr>
              <th>Product</th>
              <th class="text-center">Quantity</th>
              <th class="text-right">Price</th>
              <th class="text-right">Subtotal</th>

            </tr>
          </thead>
          <tbody>
            <% @cart.cart_products.each do |cart_product| %>
              <% product = cart_product.product %>
              <tr id="cart_product_row_<%= cart_product.id %>">
                <td>
                  <%= image_tag product.image_url, width: '100px' %>
                  <%= link_to product.name, product_path(product), target: '_blank' %>
                </td>
                <td class="text-center">
                  <span id="num-<%= cart_product.id %>"><%= cart_product.num %></span>

                </td>
                <td class="text-right"><%= number_to_currency(product.price) %></td>
                <td class="text-right" id="subtotal-<%= cart_product.id %>"><%= number_to_currency(cart_product.num * product.price) %></td>

              </tr>
            <% end %>
            <tr>
              <th colspan="3">TOTAL</th>
              <th class="text-right" id="cart-total"><%= number_to_currency(@cart.cart_value) %></th>
              <th></th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <p>
          <strong>Name:</strong>
          <%= @order.name %>
        </p>

        <p>
          <strong>Email:</strong>
          <%= @order.email %>
        </p>

        <p>
          <strong>Address:</strong>
          <%= @order.address %>,
          <%= @order.suburb %>, <%= @order.state %>, <%= @order.postcode %>, <%= @order.country %>
        </p>

        <p>
          <strong>Phone:</strong>
          <%= @order.phone %>
        </p>

        <hr>
        <form action="/charge" method="post" id="payment-form">
          <input name="utf8" type="hidden" value="&#x2713;"/>
          <%= hidden_field_tag :authenticity_token %>
          <input name="order_id" type="hidden" value="<%= @order.id %>"/>
          <div id="card-element" class="field" style="width:100%"></div>
          <div id="card-errors" role="alert" class="text-danger"></div>
          <button class="btn btn-success mt-2" id="submit-payment" type="submit">
            <span class="fa fa-lock"></span> Pay <%= number_to_currency(@order.cart.cart_value) %>
          </button>
        </form>
      </div>
    </div>
  </div>
</div>


<script src="https://js.stripe.com/v3/"></script>


<script>
    var stripe = Stripe('<%= Rails.configuration.stripe[:publishable_key] %>');
    var elements = stripe.elements();
    var style = {
      base: {
        color: '#303238',
        fontSize: '16px',
        lineHeight: '48px',
        fontSmoothing: 'antialiased',
        '::placeholder': {
          color: '#ccc',
        },
      },
      invalid: {
        color: '#e5424d',
        ':focus': {
          color: '#303238',
        },
      },
    };
    // Create an instance of the card Element
    var card = elements.create('card', {style: style, hidePostalCode: true});
    // Add an instance of the card Element into the `card-element` <div>
    card.mount('#card-element');
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });
    // Create a token or display an error when the form is submitted.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      function stripeTokenHandler(token) {
        var form = document.getElementById('payment-form');
        var submitButton = document.getElementById('submit-payment');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);
        form.submit();
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>';
        submitButton.disabled = true;
      }
      stripe.createToken(card).then(function(result) {
        if (result.error) {
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          stripeTokenHandler(result.token);
        }
      });
    });
</script>