Make a Payment

Header Block

The Host header block need to go just below the closing hero </section> tag - this needs to be added otherwise the padding is wrong on mobile

<div class="hero-body modal-box">
  <div class="container has-text-centered">
    <p class="title">
      Become a Host
    </p>
  </div>
</div>

Host Type Block

Add the host block right after the closing hero </section>

  <div class="modal-content payment">
    <div class="columns m-t-0">
      <div class="column is-12 ">
        <div class="content-item type">
          <h1 class="title small">Making a Payment <i class="material-icons fa" style="color: #23d160;">payment</i>
          </h1>
          <div class="is-separator ">
            <span class="tag selector">Fill in</span>
            <hr>
          </div>
          <form class="stripe">
            <label>
                <input name="cardholder-name" class="field is-empty" placeholder="Jane Doe" />
                <span><span>Name</span></span>
              </label>
            <label>
                <input class="field is-empty" type="tel" placeholder="(123) 456-7890" />
                <span><span>Phone</span></span>
              </label>
            <label>
                <div id="card-element" class="field is-empty test"></div>
                <span><span>Card</span></span>
              </label>
            <a type="submit" class="button is-success book">Pay Now</a>

            <div class="outcome ">
              <div class="error"></div>
              <div class="success">
                Success! Your Stripe token is <span class="token"></span>
              </div>
            </div>
          </form>

          <div class="content">
            <a class="link-footer" href="">Payment icons here !</a>
          </div>
        </div>
      </div>
    </div>
  </div>

JS for the Stripe

you will need to add the stripe cdn <script src="https://js.stripe.com/v3/"></script>

   <script>
    var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    var elements = stripe.elements();

    var card = elements.create('card', {
      iconStyle: 'solid',
      style: {
        base: {
          iconColor: '#8898AA',
          color: '#363636',
          lineHeight: '36px',
          fontWeight: 400,
          fontFamily: '"Montserrat", Helvetica, sans-serif',
          fontSize: '15px',

          '::placeholder': {
            color: '#8898AA',
          },
        },
        invalid: {
          iconColor: '#e85746',
          color: '#e85746',
        }
      },
      classes: {
        focus: 'is-focused',
        empty: 'is-empty',
      },
    });
    card.mount('#card-element');

    var inputs = document.querySelectorAll('input.field');
    Array.prototype.forEach.call(inputs, function (input) {
      input.addEventListener('focus', function () {
        input.classList.add('is-focused');
      });
      input.addEventListener('blur', function () {
        input.classList.remove('is-focused');
      });
      input.addEventListener('keyup', function () {
        if (input.value.length === 0) {
          input.classList.add('is-empty');
        } else {
          input.classList.remove('is-empty');
        }
      });
    });

    function setOutcome(result) {
      var successElement = document.querySelector('.success');
      var errorElement = document.querySelector('.error');
      successElement.classList.remove('visible');
      errorElement.classList.remove('visible');

      if (result.token) {
        // Use the token to create a charge or a customer
        // https://stripe.com/docs/charges
        successElement.querySelector('.token').textContent = result.token.id;
        successElement.classList.add('visible');
      } else if (result.error) {
        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
      }
    }

    card.on('change', function (event) {
      setOutcome(event);
    });

    document.querySelector('form').addEventListener('submit', function (e) {
      e.preventDefault();
      var form = document.querySelector('form');
      var extraDetails = {
        name: form.querySelector('input[name=cardholder-name]').value,
      };
      stripe.createToken(card, extraDetails).then(setOutcome);
    });
  </script>