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

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.

Create a form

Create a form and annotate the fields that contain credit card information with the data-braintree-name attribute:

HTML
Copy
Copied
<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>
important

Make sure you don't include name attributes in your form elements. If the form is accidentally submitted and name attributes are present, sensitive data can reach your server.

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.

JavaScript
Copy
Copied
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 attributes

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

HTML
Copy
Copied
<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 JavaScript

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.

JavaScript
Copy
Copied
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.

note

If you are doing more complex things with your form, such as your own submit callbacks or custom validation, we recommend a lower-level integration using direct tokenization.

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:

Next Page: Server-side →

Still have questions?

If you can’t find an answer, contact our Support team