HTTPS requirements

All submissions of payment info using Elements are made via a secure HTTPS connection. However, to protect yourself from certain forms of man-in-the-middle attacks, and to prevent your customers from seeing Mixed Content warnings in modern browsers, you must serve the page containing the payment form over HTTPS as well. In short, the address of the page containing Elements must start with https:// rather than just http://. If you are not familiar with the process of buying SSL certificates and integrating them with your server to enable a secure HTTPS connection, Please ask a server administrator to set it up.

Step 1: Set up TAP JS Elements

Elements is available as part of TAP JS library. To get started, include this script on your pages—it should always be loaded directly from https://secure.gosell.io/js/sdk/tap.min.js: In the header of your html web page.

            
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
<script src="https://secure.gosell.io/js/sdk/tap.min.js"></script>                
            

Responsive Dimension Optional

To make JS element scale to dimensions of the device, You should include the following meta tag in your html header.

            

<meta name="viewport" content="width=device-width, initial-scale=1.0">
             
            

Step 2: Create your payment form

To securely collect card details from your customers, Elements creates UI components for you that are hosted by Tap payments. They are then placed into your payment form, rather than you creating them directly. To determine where to insert these components, create empty DOM elements (containers) with unique IDs within your payment form.

For example:

            
<form id="form-container" method="post" action="/charge">
  <!-- Tap element will be here -->
  <div id="element-container"></div>  
  <div id="error-handler" role="alert"></div>
  <div id="success" style=" display: none;;position: relative;float: left;">
        Success! Your token is <span id="token"></span>
  </div>
  <!-- Tap pay button -->
  <button id="tap-btn">Submit</button>
</form>               
            

When the form above has loaded, in javascript create an instance of an Element and mount it to the Element container created above. Tap provides a public key to access js library and initialized to your TAP account. This public key should be passed as parameter to Tapjsli().

Javascript

            
//pass your public key from tap's dashboard
var tap = Tapjsli('pk_test_EtHFV4BuPQokJT6jiROls87Y');

var elements = tap.elements({});

var style = {
  base: {
    color: '#535353',
    lineHeight: '18px',
    fontFamily: 'sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: 'rgba(0, 0, 0, 0.26)',
      fontSize:'15px'
    }
  },
  invalid: {
    color: 'red'
  }
};
// input labels/placeholders
var labels = {
    cardNumber:"Card Number",
    expirationDate:"MM/YY",
    cvv:"CVV",
    cardHolder:"Card Holder Name"
  };
//payment options
var paymentOptions = {
  currencyCode:["KWD","USD","SAR"],
  labels : labels,
  TextDirection:'ltr'
}
//create element, pass style and payment options
var card = elements.create('card', {style: style},paymentOptions);
//mount element
card.mount('#element-container');
//card change event listener
card.addEventListener('change', function(event) {
  if(event.loaded){
    console.log("UI loaded :"+event.loaded);
    console.log("current currency is :"+card.getCurrency())
  }
  var displayError = document.getElementById('error-handler');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

            
    

Step 3: Create a token to securely transmit card information

The payment details collected using Elements can then be converted into a token. Create an event handler that handles the submit event on the form. The handler sends the fields to TAP for tokenization and prevents the form’s submission (the form is submitted by JavaScript in the next step).

Javascript

            
// Handle form submission
var form = document.getElementById('form-container');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  tap.createToken(card).then(function(result) {
    console.log(result);
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('error-handler');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      var errorElement = document.getElementById('success');
      errorElement.style.display = "block";
      var tokenElement = document.getElementById('token');
      tokenElement.textContent = result.id;
    tapTokenHandler(token)
      
    }
  });
});
              
            

tap.createToken returns a Promise which resolves with a result object. This object has either:

• result.id: a Token was created successfully.
• result.error: there was an error. This includes client-side validation errors.

Step 4: Submit the token and the rest of your form to your server

The last step is to submit the token, along with any additional information that has been collected, to your server.

Javascript

            
function tapTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'tapToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}
            
            

Get Card Details

The leading six digits of the card number is the "bank identification number (BIN)", sometimes referred to as the "issuer identification number (IIN)".
TAP JS Card element also returns BIN details in real time. Check the highlighted part of the script below if you want to use the BIN in your application(s).

Javascript

            
card.addEventListener('change', function(event) {
  if(event.BIN){
    console.log(event.BIN)
  }
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});
            
            

BIN response sample

            
{  
   "bin":"424242",
   "bank":"",
   "card_brand":"VISA",
   "card_type":"CREDIT",
   "card_category":"",
   "card_scheme":"VISA",
   "country_name":"UNITED KINGDOM",
   "country":"GB",
   "website":"",
   "phone":"",
   "address_required":false,
   "api_version":"V2"
}
            
            

Possible utilities of BIN

• Card origin identification
• Targeted campaigns for card origins
• Currency identification
• Shipping feasibility

Element Options

Library methods