Skip to content

Instantly share code, notes, and snippets.

@aroc2021
Created November 12, 2021 08:31
Show Gist options
  • Save aroc2021/0ed54eac95c20a8ec24a082bd0c8d1dd to your computer and use it in GitHub Desktop.
Save aroc2021/0ed54eac95c20a8ec24a082bd0c8d1dd to your computer and use it in GitHub Desktop.
Hosted Fields: Docs Demo
<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="postal-code">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>
var form = document.querySelector('#cardForm');
var authorization = 'sandbox_g42y39zw_348pk9cgf3bgyw2b';
braintree.client.create({
authorization: authorization
}, function(err, clientInstance) {
if (err) {
console.error(err);
return;
}
createHostedFields(clientInstance);
});
function createHostedFields(clientInstance) {
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '16px',
'font-family': 'courier, monospace',
'font-weight': 'lighter',
'color': '#ccc'
},
':focus': {
'color': 'black'
},
'.valid': {
'color': '#8bdda8'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: 'MM/YYYY'
},
postalCode: {
selector: '#postal-code',
placeholder: '11111'
}
}
}, function (err, hostedFieldsInstance) {
var tokenize = function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (err, payload) {
if (err) {
alert('Something went wrong. Check your card details and try again.');
return;
}
alert('Submit your nonce (' + payload.nonce + ') to your server here!');
});
};
form.addEventListener('submit', tokenize, false);
});
}
<script src="https://js.braintreegateway.com/web/3.82.0/js/hosted-fields.js"></script>
<script src="https://js.braintreegateway.com/web/3.82.0/js/client.js"></script>
.hosted-field {
height: 50px;
box-sizing: border-box;
width: 100%;
padding: 12px;
display: inline-block;
box-shadow: none;
font-weight: 600;
font-size: 14px;
border-radius: 6px;
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;
}
.button {
cursor: pointer;
font-weight: 500;
line-height: inherit;
position: relative;
text-decoration: none;
text-align: center;
border-style: solid;
border-width: 1px;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
}
.button--small {
padding: 10px 20px;
font-size: 0.875rem;
}
.button--green {
outline: none;
background-color: #64d18a;
border-color: #64d18a;
color: white;
transition: all 200ms ease;
}
.button--green:hover {
background-color: #8bdda8;
color: white;
}
.braintree-hosted-fields-focused {
border: 1px solid #64d18a;
border-radius: 1px;
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment