Payment Request Example

by VeryGoodFiddle

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>

    <div class="card payment-from-card">
      <div class="card-body">
      <p class="title">Payment form</p>
      <form id="cc-form">
        <fieldset>
          <div id="cc-amount">
            <label for="amount-field">Amount, <b>USD</b></label>
            <span class="form-control fake-input"></span>
          </div>
        </fieldset>
      
        <!-- hidden field for name -->
        <fieldset>
          <div id="cc-name" class="form-group hideOnPaymentRequest">
            <label for="cc-name">Name on card</label>
            <span class="form-control fake-input"></span>
          </div>
        </fieldset>
        
        <!-- hidden field for card number -->
         <fieldset>
          <div id="cc-number" class="hideOnPaymentRequest">
            <label for="cc-number-field">Card number</label>
            <span class="form-control fake-input"></span>
          </div>
        </fieldset>
        
       <!-- hidden field for cvc -->
       <fieldset>
          <div id="cc-cvc" class="hideOnPaymentRequest">
            <label for="cc-cvc">CVC</label>
            <span class="form-control fake-input"></span>
          </div>
        </fieldset>
       
        <!-- hidden field for expiration date -->
        <fieldset>
          <div id="cc-expiration-date" class="hideOnPaymentRequest">
            <label for="cc-expiration-date">Expiration date</label>
            <span class="form-control fake-input"></span>
          </div>
        </fieldset>
      
        <button type="submit" id="purchase-btn" class="btn btn-primary text-center">
          Purchase
        </button>
        </form>
      </div>
  </div>
<pre id="state"></pre>
<pre id="response"></pre>
<style media="screen">
    .form-control-static iframe {
        height: 100%;
       ...

CSS

iframe {
  height: 100%;
  width: 100%;
}

.payment-from-card {
  max-width: 500px;
  background: #FFFFFF;
  box-shadow: 0 8px 16px rgba(88, 111, 146, 0.24), 0 2px 6px rgba(88, 111, 146, 0.24);
  border-radius: 16px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 15px;
}

#purchase-btn {
  width: 100%;
  background-color: #3D6299;
  border-radius: 4px;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: #CFD8E6;
}

.form-control {
  margin-bottom: 15px;
}

.title {
  font-weight: bold;
  font-size: 24px;
  line-height: 43px;
  color: #45484D;
}

pre {
  padding: 15px;
  font-size: 10px !important;
}