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.

$3

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
`
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
>
`

###### 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:

`

`

##### Example Parent Vue Component

`



``

$3

- [ ] 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/