Create Card Token Using Custom Form In Clover

Hello Everyone. Today I come up new payment gateway service which provide a flawless payment integration in US and Canada as well many other countries.

Before going to the integration part we need to create a clover sandbox account. Please click the link here.

Once you create an account you will be able to see two sections. One is the developer and another is the business detail. Select the business section and go to the Account & Setup to get the public keys

Select the public key from the key section show below.

To generate the token we need to create the clover Iframe using the clover Js. Below is the code for the same

<form method="post" id="payment-form">
    <div class="form-row top-row">
        <div id="amount" class="field card-number">
            <input class="form-control" name="amount" placeholder="Amount">
        </div>
    </div>

    <div class="form-row top-row">
        <div id="card-number" class="field form-control card-number"></div>
        <div class="input-errors" id="card-number-errors" role="alert"></div>
    </div>

    <div class="form-row">
        <div id="card-date" class="field form-control third-width"></div>        
        <div class="input-errors" id="card-date-errors" role="alert"></div>
    </div>

    <div class="form-row">
        <div id="card-cvv" class="field form-control third-width"></div>        
        <div class="input-errors" id="card-cvv-errors" role="alert"></div>
    </div>

    <div class="form-row">
        <div id="card-postal-code" class="field form-control third-width"></div>        
        <div class="input-errors" id="card-postal-code-errors" role="alert"></div>
    </div>
    
    <div class="button-container">
        <button class="btn btn-primary">Submit Payment</button>
    </div>
</form>

Now, use the below js script code to generate the token.

<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
<script src="https://checkout.sandbox.dev.clover.com/sdk.js"></script>
<script>
  const clover = new Clover('Your Public Key');
  const elements = clover.elements();

  const form = document.getElementById('payment-form');	

  const cardNumber = elements.create('CARD_NUMBER');
  const cardDate = elements.create('CARD_DATE');
  const cardCvv = elements.create('CARD_CVV');
  const cardPostalCode = elements.create('CARD_POSTAL_CODE');

  cardNumber.mount('#card-number');
  cardDate.mount('#card-date');
  cardCvv.mount('#card-cvv');
  cardPostalCode.mount('#card-postal-code');


  form.addEventListener('submit', function (event) {
    event.preventDefault();
    // Use the iframe's tokenization method with the user-entered card details
    clover.createToken()
      .then(function (result) {
        if (result.errors) {
          Object.values(result.errors).forEach(function (value) {
            alert(value);						
          });
        } else {
          cloverTokenHandler(result.token);
        }
      });
  });

  function cloverTokenHandler(token) {	
    alert(token);		
  }
</script>

On submit we will receive the card token which we can use for making clover payment.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories