Credit Cards

Client-Side Implementationanchor

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 formanchor

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

  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 attributesanchor

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 JavaScriptanchor

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.

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 validationanchor

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.


Next Page: Server-side →