JavaScript v2

Credit Cards

Credit card direct tokenizationAnchorIcon

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 cardAnchorIcon

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:
  1. 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.

OptionsAnchorIcon

The full set of options available to you in client.tokenizeCard are:
  1. 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 validationAnchorIcon

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 optionsAnchorIcon

  1. 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.

If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more