Payment Method Types/
Credit Cards/
Client-side

Client-Side Implementation

The following instructions demonstrate a custom credit card integration. See our JavaScript SDK guide if you need to initially configure the Braintree JavaScript SDK.

Create a formAnchorIcon

Create a form and annotate the fields that contain credit card information with the data-braintree-name attribute:
  1. HTML
<form id="checkout" action="/your/server/endpoint" method="post">
    <input data-braintree-name="number" value="4111111111111111">
    <input data-braintree-name="expiration_date" value="10/20">
    <input type="submit" id="submit" value="Pay">
</form>
If you want to use separate fields for the expiration month and year, replace the expiration_date input with expiration_month and expiration_year inputs.

Set up braintree with the DOM ID of the form in which you are collecting card information. Make sure to replace CLIENT-TOKEN-FROM-SERVER with your generated client token.
  1. JavaScript
braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'custom', {
    id: 'checkout'
});
When a user submits the form, a hidden input will be injected into the form named payment_method_nonce that you can use on your server to complete the action.
Set up data attributesAnchorIcon
The full set of options available to you as data-braintree-name attributes are shown below. You can optionally express the keys with camel case instead of underscores (e.g. expirationDate rather than expiration_date).
  1. HTML
<form id="checkout" action="/your/server/endpoint" method="post">
  <input data-braintree-name="number" value="4111111111111111">
  <input data-braintree-name="cvv" value="100">

  <input data-braintree-name="expiration_date" value="10/20">

  <!-- you can also split expiration date into two fields -->
  <input data-braintree-name="expiration_month" value="10">
  <input data-braintree-name="expiration_year" value="2020">

  <input data-braintree-name="postal_code" value="94107">
  <input data-braintree-name="cardholder_name" value="John Smith">

  <input type="submit" id="submit" value="Pay">
</form>

Set up JavaScriptAnchorIcon

Set up braintree with the DOM ID of the form in which you are collecting card information. Make sure to replace CLIENT-TOKEN-FROM-SERVER with your generated client token.
  1. JavaScript
braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'custom', {
    id: 'checkout'
});
When a user submits the form, all inputs with the data-braintree-name attribute will be removed from your form before it is submitted to your server, and a hidden input will be injected into the form named payment_method_nonce.

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:

We offer an SAQ A compliant solution to process credit cards called Hosted Fields. The benefits of this hosted solution include:

  • SAQ A compliant
  • Creating your own payment form using your existing styles and layout
  • Customizing the behavior and experience of your checkout
  • Allowing you to localize/translate your checkout

To get started, see the Hosted Fields guide.

Direct card tokenization is available as an alternative to Hosted Fields, but is not SAQ A compliant.