{"id":4339,"date":"2022-08-31T08:35:23","date_gmt":"2022-08-31T08:35:23","guid":{"rendered":"http:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/"},"modified":"2022-08-31T08:50:37","modified_gmt":"2022-08-31T08:50:37","slug":"hosted-fields-sdk","status":"publish","type":"docs","link":"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/","title":{"rendered":"Hosted fields SDK"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Description\">Description&nbsp;<\/h2>\n\n\n\n<p>This provides a way for the merchant ( channels: Regular or Value Financing ) to securely collect card details for customers paying with debit or credit card to complete the loan application on their channels. It enables the merchant to control the experience; look and feel (that is, the merchant is in complete control of their UI\/UX).<\/p>\n\n\n\n<p>The following fields are hosted securely in iframes which the merchant can embed in their checkout page:<\/p>\n\n\n\n<ul><li>PAN<\/li><li>Expiry Date<\/li><li>PIN<\/li><li>CVV<\/li><li>OTP<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Stepstoimplementhostedfields\">Steps to implement hosted fields<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-samplecode\">sample code<\/h5>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><th>&lt;body&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;create-payment-container&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;style=&#8221;display: none;&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ISW Hosted Fields Demo Parameters<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;amount (in minor currency)&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;input&nbsp;id=&#8221;demo-amount&#8221;&nbsp;value=&#8221;1500&#8243;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;style=&#8221;display: none;&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;currencyCode&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;input&nbsp;id=&#8221;demo-currencyCode&#8221;&nbsp;value=&#8221;566&#8243;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;style=&#8221;display: none;&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;merchantCode&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;input&nbsp;id=&#8221;demo-merchantCode&#8221;&nbsp;value=&#8221;MX6072&#8243;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;style=&#8221;display: none;&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;payableCode&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;input&nbsp;id=&#8221;demo-payableCode&#8221;&nbsp;value=&#8221;9405967&#8243;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;merchantCustomerName&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;input&nbsp;id=&#8221;demo-merchantCustomerName&#8221;&nbsp;value=&#8221;Sample Customer&#8221;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;transactionReference&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;input&nbsp;id=&#8221;demo-transactionReference&#8221;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;button&nbsp;id=&#8221;create-fields-button&#8221;&gt;Provide Payment Info&lt;\/button&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;payment-form-container&#8221;&nbsp;style=&#8221;display: none&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;notification-box&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;content&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-header&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;img&nbsp;src=&#8221;.\/logo.png&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;info&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;title&#8221;&gt;ISW Hosted Fields Demo&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;id=&#8221;amount-placeholder&#8221;&nbsp;class=&#8221;amount&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-page card-details show&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-control&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;Card Number&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;id=&#8221;cardNumber-container&#8221;&nbsp;class=&#8221;payment-field&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-group&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-control&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;EXP&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;id=&#8221;expirationDate-container&#8221;&nbsp;class=&#8221;payment-field&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-control&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;CVV&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;id=&#8221;cvv-container&#8221;&nbsp;class=&#8221;payment-field&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;button-container&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;button&nbsp;id=&#8221;pay-button&#8221;&nbsp;class=&#8221;blue&#8221;&gt;Pay&lt;\/button&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-page pin&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;back-control&#8221;&nbsp;id=&#8221;pin-back-button&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;img&nbsp;src=&#8221;.\/back-icon.png&#8221;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;Back&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-text&#8221;&gt;Please provide your PIN&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-control&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;id=&#8221;pin-container&#8221;&nbsp;class=&#8221;payment-field&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;button-container&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;button&nbsp;id=&#8221;continue-button&#8221;&nbsp;class=&#8221;green&#8221;&gt;Continue&lt;\/button&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-page otp&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;back-control&#8221;&nbsp;id=&#8221;otp-back-button&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;img&nbsp;src=&#8221;.\/back-icon.png&#8221;&nbsp;\/&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;Back&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-text&#8221;&gt;Please input the OTP sent to your mobile number&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-control&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;label&gt;&lt;\/label&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;id=&#8221;otp-container&#8221;&nbsp;class=&#8221;payment-field&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;button-container&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;button&nbsp;id=&#8221;validate-button&#8221;&nbsp;class=&#8221;orange&#8221;&gt;Validate&lt;\/button&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;form-page cardinal&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&#8221;cardinal-container&#8221;&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;\/div&gt;<br><br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;script&nbsp;src=&#8221;<a href=\"https:\/\/mufasa-qa.interswitchng.com\/p\/lending-service\/sdk.js\">https:\/\/mufasa-qa.interswitchng.com\/p\/lending-service\/sdk.js<\/a>&#8220;&gt;&lt;\/script&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;script&nbsp;src=&#8221;<a href=\"https:\/\/mufasa-qa.interswitchng.com\/p\/lending-service\/index.js\">https:\/\/mufasa-qa.interswitchng.com\/p\/lending-service\/index.js<\/a>&#8220;&gt;&lt;\/script&gt;<br>&nbsp; &nbsp;<br>&nbsp; &nbsp;&nbsp;&lt;\/body&gt;<\/th><\/tr><\/tbody><\/table>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-LoadtheSDK\">Load the SDK<\/h2>\n\n\n\n<p>Loading the SDK will make available global&nbsp;<strong>lending service hosted fields<\/strong>&nbsp;variable available.<\/p>\n\n\n\n<p>n\/b: The path\/location below does not indicate the actual path of the SDK<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"740\" height=\"23\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_7.jpg\" alt=\"\" data-id=\"4341\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_7-2\/\" class=\"wp-image-4341\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_7.jpg 740w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_7-300x9.jpg 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Hostedfieldsdemointerface\">Hosted fields demo interface<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-sampleofthehostedfieldsdemopage\">sample of the hosted fields demo page<\/h5>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"281\" height=\"307\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_1.jpg\" alt=\"\" data-id=\"4340\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_1-3\/\" class=\"wp-image-4340\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_1.jpg 281w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_1-275x300.jpg 275w\" sizes=\"(max-width: 281px) 100vw, 281px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Aftersuccessfulcardvalidation,userwillinputpin\">After successful card validation, user will input pin<\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-5 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"270\" height=\"307\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_2.jpg\" alt=\"\" data-id=\"4342\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_2-5\/\" class=\"wp-image-4342\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_2.jpg 270w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_2-264x300.jpg 264w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Aftersuccessfulpinvalidation,userwillinputOTP\">After successful pin validation, user will input OTP<\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-7 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"254\" height=\"311\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_3.jpg\" alt=\"\" data-id=\"4343\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_3-4\/\" class=\"wp-image-4343\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_3.jpg 254w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_3-245x300.jpg 245w\" sizes=\"(max-width: 254px) 100vw, 254px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-AftersuccessfulOTPvalidation,TokenizationandAcceptOfferistriggered\">After successful OTP validation, Tokenization and Accept Offer is triggered<\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-9 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"285\" height=\"304\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_4.jpg\" alt=\"\" data-id=\"4344\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_4-6\/\" class=\"wp-image-4344\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_4.jpg 285w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_4-281x300.jpg 281w\" sizes=\"(max-width: 285px) 100vw, 285px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-HostedfieldsdemointerfacewithVISACard\">Hosted fields demo interface with VISA Card<\/h2>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-11 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"282\" height=\"311\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_5.jpg\" alt=\"\" data-id=\"4345\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_5-4\/\" class=\"wp-image-4345\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_5.jpg 282w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_5-272x300.jpg 272w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Aftersuccessfulcardvalidation,userwillinputpin.1\">After successful card validation, user will input pin<\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-13 is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"270\" height=\"315\" src=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_6.jpg\" alt=\"\" data-id=\"4346\" data-link=\"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-sdk\/screenshot_6-4\/\" class=\"wp-image-4346\" srcset=\"https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_6.jpg 270w, https:\/\/sandbox.interswitchng.com\/docbase\/wp-content\/uploads\/2022\/08\/Screenshot_6-257x300.jpg 257w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ilshostedfieldssetup-Aftersuccessfulvalidation,AcceptOfferistriggered\">After successful validation, Accept Offer is triggered<\/h4>\n","protected":false},"author":228,"featured_media":0,"parent":3998,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/4339"}],"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\/228"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/comments?post=4339"}],"version-history":[{"count":1,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/4339\/revisions"}],"predecessor-version":[{"id":4347,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/4339\/revisions\/4347"}],"up":[{"embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/3998"}],"prev":[{"title":"Hosted Fields Instance Events","link":"https:\/\/sandbox.interswitchng.com\/docbase\/docs\/ils\/hosted-fields\/hosted-fields-instance-events\/","href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/docs\/4014"}],"wp:attachment":[{"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/media?parent=4339"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/sandbox.interswitchng.com\/docbase\/wp-json\/wp\/v2\/doc_tag?post=4339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}