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

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

Brick form:

  <script src="https://api.paymentwall.com/brick/1.6/build/brick.1.6.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://api.paymentwall.com/brick/1.6/build/brick.1.6.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: 'Paymentwall',
        product: 'Gold Membership',
        pay_button: 'Pay',
        show_zip: true, // show zip code 
        show_cardholder: true, // show card holder name,
        lang: 'en'
      }
    });

    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="/YOUR-CHARGE-ACTION" method="POST">
      <input name="custom_parameter" type="hidden" value="custom_value"/>
      <div>
        <label for="card-number">Card number</label>
        <input data-brick="card-number" type="text" id="card-number" class="custom"/>
      </div>
      <div>
        <label for="card-expiration">Card expiration</label>
        <input data-brick="card-expiration" type="text" id="card-expiration" class="custom" placeholder="MM/YY"/>
      </div>
      <div>
        <label for="card-cvv">Card CVV</label>
        <input data-brick="card-cvv" type="text" id="card-cvv" class="custom"/>
      </div>
      <div>
        <label for="email">Email</label>
        <input type="email" id="email" name="email" class="custom" required/>
      </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://api.paymentwall.com/brick/.

<script src="https://api.paymentwall.com/brick/1.6/build/brick.1.6.0.min.js"></script>

In order to implement tokenization and send information to your server, this script should be added to collect payment details. The API credentials with the Brick keys which can be found in dashboard.

  <script>
    var form = document.querySelector('#brick-creditcard-form');
    var submitButton = form.querySelector('button');
    var brick = new Brick({
        public_key: 'YOUR_PUBLIC_KEY', // please update it to Brick live key before launching your project
        form: form,
        onTokenized: function (response) { // token created successfully
            form.submit()
        },
        onError: function (response) { // handle errors
            console.log(response)
            submitButton.disabled = false // This will enable submit button because the submit button will be disabled during the tokenization process
        }
    }, 'custom');
    brick.showPaymentForm();
  </script>

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?