<div class="demo-frame">  
  <form action="/" method="post" id="cardForm" >
    <label class="hosted-fields--label" for="card-number">Card Number</label>
    <div id="card-number" class="hosted-field"></div>

    <label class="hosted-fields--label" for="expiration-date">Expiration Date</label>
    <div id="expiration-date" class="hosted-field"></div>

    <label class="hosted-fields--label" for="cvv">CVV</label>
    <div id="cvv" class="hosted-field"></div>

    <label class="hosted-fields--label" for="cvv">Postal Code</label>
    <div id="postal-code" class="hosted-field"></div>

    <div class="button-container">
      <input type="submit" class="button button--small button--green" value="Purchase" id="submit"/>
    </div>
  </form>
</div>
.hosted-field {
  height: 50px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  display: inline-block;
  box-shadow: none;
  font-weight: 500;
  font-size: 14px;
  border-radius: $radius-default;
  border: 1px solid #dddddd;
  line-height: 20px;
  background: #fcfcfc;
  margin-bottom: 12px;
  background: linear-gradient(to right, white 50%, #fcfcfc 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 300ms ease-in-out;
}

.hosted-fields--label {
  font-family: courier, monospace;
  text-transform: uppercase;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

.button-container {
  display: block;
  text-align: center;
}

.braintree-hosted-fields-focused {
  border: 1px solid #64d18a;
  border-radius: $radius-default;
  background-position: left bottom;
}

.braintree-hosted-fields-invalid {
  border: 1px solid #ed574a;
}

.braintree-hosted-fields-valid {
}
#cardForm {
  max-width: 50.75em;
  margin: 0 auto;
  padding: 1.875em;
}
var authorization = 'sandbox_g42y39zw_348pk9cgf3bgyw2b';
var checkout;

function createHostedFields() {
  braintree.setup(authorization, "custom", {
    id: "cardForm",
    hostedFields: {
      number: {
        selector: "#card-number",
        placeholder: "4111 1111 1111 1111"
      },
      cvv: {
        selector: "#cvv",
        placeholder: "111"
      },
      expirationDate: {
        selector: "#expiration-date",
        placeholder: "MM/YY"
      },
      postalCode: {
        selector: "#postal-code",
        placeholder: "3232323"
      },
      styles: {
        'input': {
          'font-size': '16px',
          'font-family': 'courier, monospace',
          'font-weight': 'lighter',
          'color': '#ccc'
        },
        ':focus': {
          'color': 'black'
        },
        '.valid': {
          'color': '#8bdda8'
        }
      }
    },
    onReady: function (integration) {
      checkout = integration;
    },
    onPaymentMethodReceived: function () {
      alert('Submit your nonce to your server!');
      checkout.teardown(function () {
        checkout = null;
        createHostedFields();
      });
    }
  });
}

createHostedFields();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://js.braintreegateway.com/js/braintree-2.32.1.min.js