Create Form

This tutorial helps you to create a form to collect payment details.

You can choose either using Brick default form or creating your own form on your front end to get following parameters:

Onetime token. A generated 34 bit string starting with the prefix o_, eg: o_6da4e28d335c627003242fdd0a03a1d2. For sandbox environment, it starts with ot_ eg: ot_ccd2d68ef06d9c0e485d62b7039a6f64. Onetime token is only valid for 5 mins. See onetime token API as an alternative way to obtain it.
Fingerprint. A 32 bit string generated by Brick.js for payment risk purpose, eg: slZbOOhPlyDQKkoyYBkKdJ7dpDslaCer.

These two parameters should be sent to your backend to perform charge requests.

Tokenize payment details with default form

Terminal3 Payments provides you a default form for Brick to collect payment details. Include Brick.js in your page in order to implement it.

Old Brick form:

  <script type="text/javascript" src="https://payments.terminal3.com/brick/brick.1.4.js"></script>

New Brick form:

  <script type="text/javascript" src="https://payments.terminal3.com/brick/build/brick-default.1.5.0.min.js"></script>

Create a div tag with id, keep the consistency with the value of container in separate script tag.

  <div id="payment-form-container"></div>

This tutorial uses a test project key which is also available to test in the section below. Remember to replace the value of param public_key with your own Brick project key.

  <script src="https://payments.terminal3.com/brick/build/brick-default.1.5.0.min.js"> </script>
  <div id="payment-form-container"> </div>
  <script>
    var brick = new Brick({
      public_key: 'YOUR_PUBLIC_KEY', // please update it to Brick live key before launch your project
      amount: 9.99,
      currency: 'USD',
      container: 'payment-form-container',
      action: '/YOUR-CHARGE-ACTION',
      form: {
        merchant: 'Terminal3 Payments',
        product: 'Gold Membership',
        pay_button: 'Pay',
        show_zip: true, // show zip code 
        show_cardholder: true // show card holder name 
      }
    });

    brick.showPaymentForm(function(data) {
      // handle success
    }, function(errors) {
      // handle errors
    });
  </script>

Brick object would help you collect payment details, fingerprint and tokenize them automatically.

Tokenize payment details with your own form

To build your own payment form with Brick.js, we assume that you have the basic knowledge of HTML as well as a payment form to collect payment details as below.

  <form id="brick-creditcard-form" action="billing.php" method="POST">
    <input name="custom_parameter" type="hidden" value="custom_value"/>
    <div>
      <label>
        <span>Card number</span>
        <input data-brick="card-number" type="text" id="card-number"/>
      </label>
    </div>
    <div>
      <label>
        <span>Card expiration</span>
        <input data-brick="card-expiration-month" type="text" size="2" id="card-exp-month"/> /
        <input data-brick="card-expiration-year" type="text" size="4" id="card-exp-year"/>
      </label>
    </div>
    <div>
      <label>
        <span>Card CVV</span>
        <input data-brick="card-cvv" type="text" id="card-cvv"/>
      </label>
    </div>
    <button type="submit">Submit</button>
  </form>

Including Brick.js to implement tokenization. In this way, you don’t need to tokenize the credit card details on your own. It can be loaded directly from https://payments.terminal3.com/brick/.

<script type="text/javascript" src="https://payments.terminal3.com/brick/brick.1.4.js"></script>

The next step is to create a new script tag to declare Brick object and set API credentials with the Brick keys which can be found in dashboard.

We are using JQuery in this tutorial

  <script>
    var $form = $('#brick-creditcard-form');
    var brick = new Brick({
      public_key: 't_365891948ea844de751301cbcc1897', // please update it to Brick live key before launch your project
      form: { formatter: true }
    }, 'custom');
  </script>

In order to implement tokenization and send information to your server, this script should be added to collect payment details.

  $form.submit(function(e) {
    e.preventDefault();

    $form.find('button').prop('disabled', true); // prevent repeat click

    brick.tokenizeCard({ // Tokenize payment details
      card_number: $('#card-number').val(),
      card_expiration_month: $('#card-exp-month').val(),
      card_expiration_year: $('#card-exp-year').val(),
      card_cvv: $('#card-cvv').val()
    }, function(response) {
      if (response.type == 'Error') { // faile to create token
        // handle errors
      } else { // token created successfully
        $form.append($('<input type="hidden" name="brick_token"/>').val(response.token));
        $form.append($('<input type="hidden" name="brick_fingerprint"/>').val(Brick.getFingerprint()));
        $form.get(0).submit(); // submit token and fingerprint to your server
      }
    });

    return false;
  });

Next Step

Refer to the links below to choose your payment type:

Create Form

Tokenize payment details with default form

Tokenize payment details with your own form

Next Step

Questions?