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.<\/p>\n

The following fields are hosted securely in iframes which the merchant can embed in their checkout page;<\/p>\n

\n
1. PAN<\/li>\n
2. Expiry Date<\/li>\n
3. PIN<\/li>\n
4. CVV<\/li>\n<\/ol>\n

   Step-by-step guide<\/h2>\n

   For the duration of this guide, we will be using the form below.<\/p>\n

   \n

   Card form<\/b><\/div>\n

   \n

   \n

   \n\n\n\n

   \n \n <<\/code>body<\/code>><\/code><\/div>\n \u00a0\u00a0<\/code><<\/code>form<\/code>\u00a0id<\/code>=<\/code>\"cardForm\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0class<\/code>=<\/code>\"panel\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>header<\/code>\u00a0class<\/code>=<\/code>\"panel__header\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>h2<\/code>>Submit Card Details<\/<\/code>h2<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>header<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0class<\/code>=<\/code>\"panel__content\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0class<\/code>=<\/code>\"textfield--float-label\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>label<\/code>\u00a0class<\/code>=<\/code>\"hosted-field--label\"<\/code>\u00a0for<\/code>=<\/code>\"card-pan\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>span<\/code>\u00a0class<\/code>=<\/code>\"icon\"<\/code>> <\/<\/code>span<\/code>> Card Number<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>label<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0id<\/code>=<\/code>\"card-pan\"<\/code>\u00a0class<\/code>=<\/code>\"hosted-field\"<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0class<\/code>=<\/code>\"textfield--float-label\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>label<\/code>\u00a0class<\/code>=<\/code>\"hosted-field--label\"<\/code>\u00a0for<\/code>=<\/code>\"expiration-date\"<\/code>>Expiration Date<\/<\/code>label<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0id<\/code>=<\/code>\"expiration-date\"<\/code>\u00a0class<\/code>=<\/code>\"hosted-field\"<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0class<\/code>=<\/code>\"textfield--float-label\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>label<\/code>\u00a0class<\/code>=<\/code>\"hosted-field--label\"<\/code>\u00a0for<\/code>=<\/code>\"card-cvv\"<\/code>> CVV<\/<\/code>label<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0id<\/code>=<\/code>\"card-cvv\"<\/code>\u00a0class<\/code>=<\/code>\"hosted-field\"<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0class<\/code>=<\/code>\"textfield--float-label\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>label<\/code>\u00a0class<\/code>=<\/code>\"hosted-field--label\"<\/code>\u00a0for<\/code>=<\/code>\"card-pin\"<\/code>>Pin<\/<\/code>label<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code>\u00a0id<\/code>=<\/code>\"card-pin\"<\/code>\u00a0class<\/code>=<\/code>\"hosted-field\"<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>footer<\/code>\u00a0class<\/code>=<\/code>\"panel__footer\"<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>button<\/code>\u00a0class<\/code>=<\/code>\"pay-button\"<\/code>\u00a0type<\/code>=<\/code>\"submit\"<\/code>>Submit<\/<\/code>button<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>footer<\/code>><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n \u00a0\u00a0<\/code><\/<\/code>form<\/code>><\/code><\/div>\n \u00a0\u00a0<\/code><<\/code>script<\/code>\u00a0src<\/code>=<\/code>'http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'<\/a><\/code>><\/<\/code>script<\/code>><\/code><\/div>\n \u00a0\u00a0<\/code><<\/code>script<\/code>\u00a0src<\/code>=<\/code>\"https:\/\/mufasa-qa.interswitchng.com\/p\/lending-service\/tokenize\/sandbox\/build.js<\/a>\"<\/code>><\/<\/code>script<\/code>><\/code><\/div>\n <\/<\/code>body<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n \n Load the SDK.\n \n Load javascript sdk<\/b><\/div>\n \n \n \n\n\n\n \n \n <<\/code>script<\/code>\u00a0src<\/code>=<\/code>\"https:\/\/mufasa-qa.interswitchng.com\/p\/lending-service\/tokenize\/sandbox\/build.js<\/a>\"<\/code>><\/<\/code>script<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n Loading the SDK will make available a global\u00a0interswitch.hostedFields<\/strong>\u00a0variable available.<\/li>\n Create a hosted field instance calling the\u00a0newInstance<\/strong>\u00a0method on the\u00a0interswitch.hostedFields\u00a0<\/strong>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\n \n Create Hosted Fields Instance<\/b><\/div>\n \n \n \n\n\n\n \n \n interswitch.hostedFields.newInstance(options,<\/a><\/code><\/div>\n \u00a0\u00a0<\/code>function<\/code>\u00a0(err, hostedFieldInstance) {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>\u00a0(err) {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/ something is wrong,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code>;<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>function<\/code>\u00a0findLabel(field) {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code>\u00a0$(<\/code>'.hosted-field--label[for=\"'<\/code>\u00a0+\u00a0field.container.id<\/a>\u00a0+\u00a0<\/code>'\"]'<\/code>);<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>hostedFieldInstance.on(<\/a><\/code>'focus'<\/code>,\u00a0<\/code>function<\/code>\u00a0(event) {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>var<\/code>\u00a0field =\u00a0event.fields[event.emittedBy];<\/a><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>findLabel(field).addClass(<\/code>'label-float'<\/code>).removeClass(<\/code>'filled'<\/code>);<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>})<\/code><\/div>\n \u00a0\u00a0<\/code>})<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n The options include authorization, accept offer request, fields and styles as shown below.<\/p>\n \n Available Options<\/b><\/div>\n \n \n \n\n\n\n \n \n var<\/code>\u00a0options = {<\/code><\/div>\n \u00a0\u00a0<\/code>authorization:\u00a0<\/code>\"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOlsiY2FyZGxlc3Mtc2VydmljZSIsImZpbmdlcnByaW50LWFwaSIsImlzdy1sZW5kaW5nLXNlcnZpY2UiLCJwYXNzcG9ydCIsInJlZmVycmFsLXNlcnZpY2UtYXBpIiwic2NwIl0sInNjb3BlIjpbInByb2ZpbGUiXSwianRpIjoiODcwYmZiNDAtNWQyMS00MDVkLTkzMTQtMWFmM2IwOGZmNjY0IiwiY2xpZW50X2lkIjoicG9zdG1hbiJ9.fXPGEz4nuo2FW0M9Qi1cIeZxm0xGsJKQRK5D4jdo8pMALU4JNbCSQGugB7xjpBNcGPR13_i7Y_0y0awljrOtsp-dIyrQ9cBSRGjuDCPDXXEkOX0xVBt0IGZa8DyGmFfNFLsv15R3ZUBLmg2OAJRtJ95DXoKAs16Kd07eKJsDCcWBLlk-sHg1HyXtcYm9XiAAbqWHJTWhCDueDZtz68tLoErxusLVbd_CL4Ec06CacJdJDUy9__HZMrHCiz9lSkx3PCg2GRNZhDw-u90sizpVzVNCE92cFcmSpXkF4j_vhlSvGqJN4Qi4_XQJ-3qFT5uP5Pg4jLdsvLzGGRm1T6lA8A<\/a>\"<\/code><\/div>\n \u00a0\u00a0<\/code>request: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>customerId:\u00a0<\/code>\"2348030583962\"<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>providerCode:\u00a0<\/code>\"MKT\"<\/code><\/div>\n \u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0<\/code>styles: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>'input'<\/code>: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'font-size'<\/code>:\u00a0<\/code>'16px'<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'font-family'<\/code>:\u00a0<\/code>'roboto, verdana, sans-serif'<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'color'<\/code>:\u00a0<\/code>'black'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>':focus'<\/code>: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'color'<\/code>:\u00a0<\/code>'blue'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>'.valid'<\/code>: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'color'<\/code>:\u00a0<\/code>'black'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>'.invalid'<\/code>: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'color'<\/code>:\u00a0<\/code>'red'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n \u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0<\/code>fields: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>pan: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>selector:\u00a0<\/code>'#card-pan'<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>placeholder:\u00a0<\/code>'1111 1111 1111 1111'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>cvv: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>selector:\u00a0<\/code>'#card-cvv'<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>placeholder:\u00a0<\/code>'111'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>exp: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>selector:\u00a0<\/code>'#expiration-date'<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>placeholder:\u00a0<\/code>'MM\/YY'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>pin: {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>selector:\u00a0<\/code>'#card-pin'<\/code>,<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>placeholder:\u00a0<\/code>'PIN'<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n \u00a0\u00a0<\/code>}<\/code><\/div>\n }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n As soon as the customer submits, initiate a submit request on the hostedFieldInstance returned in 2.\n \n Submit Loan Application<\/b><\/div>\n \n \n \n\n\n\n \n \n var<\/code>\u00a0submit =\u00a0document.querySelector(<\/a><\/code>'button[type=\"submit\"]'<\/code>);<\/code><\/div>\n submit.addEventListener(<\/a><\/code>'click'<\/code>,\u00a0<\/code>function<\/code>\u00a0(evt) {<\/code><\/div>\n \u00a0\u00a0<\/code>evt.preventDefault();<\/a><\/code><\/div>\n \u00a0\u00a0<\/code>evt.stopPropagation();<\/a><\/code><\/div>\n <\/div>\n \u00a0\u00a0<\/code>hostedFieldInstance.submit(<\/a><\/code>function<\/code>\u00a0(err, payload) {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>\u00a0(err) {<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>alert(<\/code>\"Loan application failed\"<\/code>);<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code>;<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>else<\/code>\u00a0{<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>console.log(payload);<\/a><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>var<\/code>\u00a0token =\u00a0payload.body.token;<\/a><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>var<\/code>\u00a0tokenExpiry =\u00a0payload.body.tokenExpiryDate;<\/a><\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code>;<\/code><\/div>\n \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n \u00a0\u00a0<\/code>});<\/code><\/div>\n <\/div>\n },\u00a0<\/code>false<\/code>)<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\n","protected":false},"author":169,"featured_media":0,"parent":2944,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":""},"doc_tag":[],"_links":{"self":[{"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/3006"}],"collection":[{"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/users\/169"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/comments?post=3006"}],"version-history":[{"count":1,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/3006\/revisions"}],"predecessor-version":[{"id":3007,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/3006\/revisions\/3007"}],"up":[{"embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/2944"}],"next":[{"title":"Value Financing Transaction Notification","link":"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/value-financing\/value-financing-transaction-notification\/","href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/4304"}],"prev":[{"title":"Lending Service Hosted Fields","link":"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/value-financing\/lending-service-hosted-fields\/","href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/2949"}],"wp:attachment":[{"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/media?parent=3006"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/doc_tag?post=3006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}