Lending Service Hosted Fields

This provides a way for merchant channels to securely collect card details for customers paying with credit on their channels. It enables the merchant to control the experience and look and feel. This is supposed to be used in conjunction with the Get Tenured Offers API and the target is web merchants

The following fields are hosted securely in iframes which the merchant can embed in their checkout page;

PAN
Expiry Date
PIN
CVV

Step-by-step guide

For the duration of this guide, we will be using the form below.

Card form

<body>
  <form id="cardForm">
    <div class="panel">
      <header class="panel__header">
        <h2>Submit Card Details</h2>
      </header>
      <div class="panel__content">
        <div class="textfield--float-label">
          <label class="hosted-field--label" for="card-pan">
            <span class="icon"> </span> Card Number
          </label>
          <div id="card-pan" class="hosted-field"></div>
        </div>
        <div class="textfield--float-label">
          <label class="hosted-field--label" for="expiration-date">Expiration Date</label>
          <div id="expiration-date" class="hosted-field"></div>
        </div>
        <div class="textfield--float-label">
          <label class="hosted-field--label" for="card-cvv"> CVV</label>
          <div id="card-cvv" class="hosted-field"></div>
        </div>
        <div class="textfield--float-label">
          <label class="hosted-field--label" for="card-pin">Pin</label>
          <div id="card-pin" class="hosted-field"></div>
        </div>
      </div>
      <footer class="panel__footer">
        <button class="pay-button" type="submit">Submit</button>
      </footer>
    </div>
  </form>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="https://mufasa-qa.interswitchng.com/p/lending-service/build.js"></script>
</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<body>

<h2>Submit Card Details</h2>

</header>

<span class="icon"> </span> Card Number

</label>

</div>

<label class="hosted-field--label" for="expiration-date">Expiration Date</label>

</div>

</div>

</div>

<button class="pay-button" type="submit">Submit</button>

</footer>

</div>

</form>

</body>

Load the SDK.

Load javascript sdk

<script src="https://mufasa-qa.interswitchng.com/p/lending-service/build.js"></script>

Loading the SDK will make available a global interswitch.hostedFields variable available.

Create a hosted field instance calling the newInstance method on the interswitch.hostedFields variable. The method takes options and a callback. An hosted field instance which can be used to register events listeners and finally submit the customer’s request when the customer clicks on a the submit button will be returned to the callback

Create Hosted Fields Instance

interswitch.hostedFields.newInstance(options,
  function (err, hostedFieldInstance) {
    if (err) {
      // something is wrong,
      return;
    }
    function findLabel(field) {
      return $('.hosted-field--label[for="' + field.container.id + '"]');
    }
    hostedFieldInstance.on('focus', function (event) {
      var field = event.fields[event.emittedBy];
      findLabel(field).addClass('label-float').removeClass('filled');
    })
  })

The options include authorization, accept offer request, fields and styles as shown below.

Available Options

var options = {
  authorization: "eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOlsiY2FyZGxlc3Mtc2VydmljZSIsImZpbmdlcnByaW50LWFwaSIsImlzdy1sZW5kaW5nLXNlcnZpY2UiLCJwYXNzcG9ydCIsInJlZmVycmFsLXNlcnZpY2UtYXBpIiwic2NwIl0sInNjb3BlIjpbInByb2ZpbGUiXSwianRpIjoiODcwYmZiNDAtNWQyMS00MDVkLTkzMTQtMWFmM2IwOGZmNjY0IiwiY2xpZW50X2lkIjoicG9zdG1hbiJ9.fXPGEz4nuo2FW0M9Qi1cIeZxm0xGsJKQRK5D4jdo8pMALU4JNbCSQGugB7xjpBNcGPR13_i7Y_0y0awljrOtsp-dIyrQ9cBSRGjuDCPDXXEkOX0xVBt0IGZa8DyGmFfNFLsv15R3ZUBLmg2OAJRtJ95DXoKAs16Kd07eKJsDCcWBLlk-sHg1HyXtcYm9XiAAbqWHJTWhCDueDZtz68tLoErxusLVbd_CL4Ec06CacJdJDUy9__HZMrHCiz9lSkx3PCg2GRNZhDw-u90sizpVzVNCE92cFcmSpXkF4j_vhlSvGqJN4Qi4_XQJ-3qFT5uP5Pg4jLdsvLzGGRm1T6lA8A"
  request: {
    channelCode: "QTUSSD",
    customerId: "2348030583962",
    offerId: "OFFER1529932588104",
    providerCode: "MKT",
    merchantCode: "VNA"
  },
  styles: {
    'input': {
      'font-size': '16px',
      'font-family': 'roboto, verdana, sans-serif',
      'color': 'black'
    },
    ':focus': {
      'color': 'blue'
    },
    '.valid': {
      'color': 'black'
    },
    '.invalid': {
      'color': 'red'
    }
  },
  fields: {
    pan: {
      selector: '#card-pan',
      placeholder: '1111 1111 1111 1111'
    },
    cvv: {
      selector: '#card-cvv',
      placeholder: '111'
    },
    exp: {
      selector: '#expiration-date',
      placeholder: 'MM/YY'
    },
    pin: {
      selector: '#card-pin',
      placeholder: 'PIN'
    }
  }
}

As soon as the customer submits, initiate a submit request on the hostedFieldInstance returned in 2.

Submit Loan Application

var submit = document.querySelector('button[type="submit"]');
submit.addEventListener('click', function (evt) {
  evt.preventDefault();
  evt.stopPropagation();
  hostedFieldInstance.submit(function (err, payload) {
    if (err) {
      alert("Loan application failed");
      return;
    }
    else {
      console.log(payload);
      var payref = payload.body.loanId;
      console.log(payref);
      alert("Loan application was successful with loan Id of " + payref);
      return;
    }
  });
}, false)

Step-by-step guide

How can we help?