JavaScript v2

Credit Cards

Credit card direct tokenization

Important

For a merchant to be eligible for the easiest level of PCI compliance (SAQ A), payment fields can't be hosted on your checkout page. To learn how to implement our hosted solution within a custom integration, visit the Hosted Fields guide.

Tokenize card

If you are doing more complex things with your form, such as your own submit callbacks or custom validation, we recommend using a lower-level integration. To do that, create a Braintree client and use it to tokenize card data:

JavaScript

var client = new braintree.api.Client({
    clientToken: 'TOKEN'
});
client.tokenizeCard({
    number: '4111111111111111',
    expirationDate: '10/20'
}, function (err, nonce) {
    // Send nonce to your server
});

Note

Payment method nonces expire after 3 hours.

Options

The full set of options available to you in client.tokenizeCard are:

JavaScript

var client = new braintree.api.Client({
    clientToken: 'CLIENT-TOKEN-FROM-SERVER'
});
client.tokenizeCard({
    number: '4111111111111111',
    cardholderName: 'John Smith',
    // You can use either expirationDate
    expirationDate: '10/20',
    // or expirationMonth and expirationYear
    expirationMonth: '10',
    expirationYear: '2015',
    // CVV if required
    cvv: '832',
    // Address if AVS is on
    billingAddress: {
        postalCode: '94107'
    }
}, function (err, nonce) {
    // Send nonce to your server
});

Note

A nonce will be created even if there are input validation issues like empty fields or invalid input (see Client-side validation).

An error in the form of the string "Unable to tokenize card." will be returned if the tokenizeCard call does not return a nonce. This may happen if the Braintree gateway is unreachable at the time of the call.

Client-side validation

Integrations such as Drop-in and Hosted Fields handle validation and card type detection out of the box. However, when using a custom credit card integration it is up to you to run client-side validations and present appropriate UI to your users.

While you may use any library you wish to do this, we have built a couple to help you out:

3D Secure UI options

JavaScript

client.verify3DS({
    useDefaultLoader: true, // or false
    onLookupComplete: function () {
        // ...
    },
    onUserClose: function () {
        // ...
    }
});

useDefaultLoader indicates whether the default loading indicator should be displayed. Default value is true.
onLookupComplete is invoked after a successful lookup and before the authorization modal is displayed. If using a custom loading indicator, this callback can be used to remove necessary DOM elements.
onUserClose is invoked after the authorization modal has been closed from a user initiated action.