VueJS Braintree Hosted Fields Component
Welcome!
This is a Vue component (.vue single file) for Braintree's Hosted Fields, using v3 of the JS SDK. This component includes the credit card number, CVV, and expiration date. Hosted fields are completely un-styled. I have some suggested styles below, or you can roll your own!
Let me know what else anyone would like to see! Happy to add features/functionality.
Installation
Published on NPM. Includes braintree-web
as a dependency.
npm install vue-braintree-hosted-fields --save
Import
import HostedFields from 'vue-braintree-hosted-fields'
Using the Component
<hosted-fields
wrapperClass="constrain" // pass in a wrapper class
authToken="sandbox_c8xxxxxb_qxxxxxxxxxxxxxxj" // authToken, either Braintree Client Token or Static Tokenization Key
v-on:bthferror="btHFError" // method that listenes for error message emited
v-on:bthfpayload="btHFPayload" // method that listens for tokenization payload
:collectCardHolderName="false" // collect the cardholder name through the component for tokenization in the nonce
:collectPostalCode="false" // collect the postal code through the component for tokenization in the nonce
:enableDataCollector="false" // enables device data collection for Kount integration
></hosted-fields>
Methods
Since the component broadcasts and/or receives events, you'll need a few methods for that. First is a method that receives the error messaged emitted by the component. This is useful when there are any issues setting up or tokenizing payment information. Then, you'll need to $emit an event to trigger the fields tokenization. Lastly, another method is needed for receiving the tokenization payload (which includes the nonce). From there, the rest is on your integration to choose how to handle sending information to your server side. For example:
methods: {
btHFError(message) {
console.error(message);
// do something with the error message
},
btHFPayload(payload) {
console.log(payload);
// do something with the token payload
},
submitTransaction() {
this.$emit('tokenize');
}
}
Styles
Using label
and .input-field
:
<style>
label {
font-size: 16px;
display: block;
text-align: left;
font-weight: bold;
padding: 0.25rem;
}
.input-field {
height: 50px;
box-sizing: border-box;
width: 100%;
padding: 0.8rem;
display: inline-block;
box-shadow: none;
font-weight: 600;
font-size: 0.8rem;
border-radius: 6px;
border: 1px solid #dddddd;
line-height: 1.2;
background: #fcfcfc;
margin-top: 0.1rem;
margin-bottom: 0.8rem;
background: linear-gradient(to right, white 50%, #fcfcfc 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 300ms ease-in-out;
font-size: 18px;
text-align: left;
}
</style>
Example Parent Vue Component
<template>
<div>
<hosted-fields
wrapperClass="constrain"
:authToken="sandbox_c8xxxxxb_qxxxxxxxxxxxxxxj"
v-on:bthferror="btHFError"
v-on:bthfpayload="btHFPayload"
:collectCardHolderName="true"
:collectPostalCode="false"
:enableDataCollector="true"
>
</hosted-fields>
<button @click="submitTransaction">Submit</button>
</div>
</template>
<script>
import HostedFields from 'vue-braintree-hosted-fields'
export default {
components: {
HostedFields
},
methods: {
btHFError(message) {
console.error(message);
// do something with the error message
},
btHFPayload(payload) {
console.log(payload);
// do something with the token payload
},
submitTransaction() {
this.$emit('tokenize');
}
}
}
</script>
<style>
label {
font-size: 16px;
display: block;
text-align: left;
font-weight: bold;
padding: 0.25rem;
}
.input-field {
height: 50px;
box-sizing: border-box;
width: 100%;
padding: 0.8rem;
display: inline-block;
box-shadow: none;
font-weight: 600;
font-size: 0.8rem;
border-radius: 6px;
border: 1px solid #dddddd;
line-height: 1.2;
background: #fcfcfc;
margin-top: 0.1rem;
margin-bottom: 0.8rem;
background: linear-gradient(to right, white 50%, #fcfcfc 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 300ms ease-in-out;
font-size: 18px;
text-align: left;
}
</style>
To Do:
- options for which fields to include.
- styles for better adapting to layout needs.
- card type detection with card icons.
- support for an event bus.
Disclaimer: I work at Braintree as an Overnight Technical Support rep, but this is not an official library or example integration. https://developers.braintreepayments.com/