iFrame checkout Options

xfvs

1. iFrame Pop up

This option renders a pop up iFrame within the same web page.

All interactions between the merchant app or website and the payment service will be done via the iFrame

*Context URL will be provided during integration

curl 'https://gatewaybackend-uat.quickteller.co.ke/ipg-backend/api/checkout' -H 'User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'Accept-Language: en-GB,en;q=0.5' --compressed -H 'Referer: https://gatewaybackend-uat.quickteller.co.ke/ipg-backend/examples/' -H 'Content-Type: application/x-www-form-urlencoded' -H 'Origin: https://gatewaybackend-uat.quickteller.co.ke' -H 'Connection: keep-alive' -H 'Upgrade-Insecure-Requests: 1' --data-raw 'merchantCode=BMATKE0001&domain=ISWKE&transactionReference=u7djzh&orderId=rgf8j&expiryTime=2021-02-10T05%3A57%3A16.342Z&currencyCode=KES&amount=100&narration=Test+from+new+gateway&redirectUrl=https%3A%2F%2Fuat.quickteller.co.ke%2F&iconUrl=&merchantName=&providerIconUrl=&cardTokensJson=%5B%7B%22panLast4Digits%22%3A%221895%22%2C%22panFirst6Digits%22%3A%22506183%22%2C%22token%22%3A%22C48FA7D7F466914A3E4440DE458AABC1914B9500CC7780BEB4%22%2C%22expiry%22%3A%2205%2F20%22%7D%2C%7B%22panLast4Digits%22%3A%221111%22%2C%22panFirst6Digits%22%3A%22411111%22%2C%22token%22%3A%223105E927EF17A245977CDA0ED62B257E4378592E8D7C7A5272-016153570198200%22%2C%22expiry%22%3A%2202%2F22%22%7D%5D&reqId=&field1=&dateOfPayment=2016-09-05T10%3A20%3A26&terminalId=3TLP0001&terminalType=What%3F&channel=WEB&fee=0&preauth=0&customerId=1002&customerFirstName=Japheth&customerSecondName=Ongeri&customerEmail=japheth.ongeri%40interswitchgroup.com&customerMobile=86-13012345678&customerCity=NBI&customerCountry=KE&customerPostalCode=wstlnds&customerStreet=1002&customerState=NBI'

2. iframe Redirect

This integration redirects the customer away from the merchant’s website and renders the iframe on Interswitch IPG page where payment is processed. You will be required to provide redirect URLs for success or cancellation of transaction

This option is for merchants who want to quickly add a checkout option in their existing website or app without interfering with existing structure

Step 1: Collect the values into a single js object as follows:

<script type="text/javascript">
                        var paymentValues = {
                            amount: 100,
                            channel: "WEB",
                            currencyCode: "KES",
                            customerInfor: "1002|kelvin|mwangi| [email protected] |0714171282|NBI|KE|00200|wstlnds|NBI|41.215.3.130|kelvin-pc|mozilla ",
                            dateOfPayment: "2016-09-05T10:20:26",
                            domain: "ISWKE",
                            fee: "0",
                            iconUrl: "https://photos.lci.fr/images/613/344/[email protected]",
                            merchantCode: "ISWKEN0001",
                            narration: "Payment",
                            orderId: "OID123453",
                            preauth: "0",
                            redirectUrl: "https://testmerchant.interswitch-ke.com",
                            terminalId: "3TLP0001",
                            transactionReference: "1234890",
                            cardTokensJson: '[{"panLast4Digits":"1895","panFirst6Digits":"506183","token":"C48FA7D7F466914A3E4440DE458AABC1914B9500CC7780BEB4","expiry":"05/20"},{"panLast4Digits":"1111","panFirst6Digits":"411111","token":"DBA747BC30109711E8A1A2FDAFCD27A851B37DDA24F8BE2724","expiry":"04/20"}]'
                        };
                    </script>

Step 2: Create a pay button which builds a form with the values and submits it to checkout

<button class="btn btn-md btn-primary"
                            onclick="{
    console.log(“Values: ”, paymentValues);
    <!--TODO Change this to correct live source url-->
    postCheckout({context}/webpay/checkout', paymentValues);
}">Pay button via JS
                        <script type="text/javascript">function postCheckout(url, paymentValues) {
                            var form = document.createElement('form');
                            document.body.appendChild(form);
                            form.method = 'post';
                            form.action = url;
                            for (var paymentValue in paymentValues) {
                                var input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = paymentValue;
                                console.log(paymentValue, paymentValues[paymentValue]);
                                input.value = paymentValues[paymentValue];
                                form.appendChild(input);
                            }
                            form.submit();
                        }</script>
                    </button>

Step 3: Once clicked the button will then launch a new page with the checkout iframe and handle the rest of the payment based on the values that were passed by the button to the postCheckout function

iframe Billing info checkout

This option is used to check out when the merchant has not collected customer details and would like to pass that responsibility to Interswitch.

Step 1: Collect all the required payment information

<script type="text/javascript">
                        var paymentValues = {
                            amount: 100,
                            channel: "WEB",
                            currencyCode: "KES",
                            customerInfor: "1002|kelvin|mwangi| [email protected] |0714171282|NBI|KE|00200|wstlnds|NBI|41.215.3.130|kelvin-pc|mozilla ",
                            dateOfPayment: "2016-09-05T10:20:26",
                            domain: "ISWKE",
                            fee: "0",
                            iconUrl: "https://photos.lci.fr/images/613/344/[email protected]",
                            merchantCode: "ISWKEN0001",
                            narration: "Payment",
                            orderId: "OID123453",
                            preauth: "0",
                            redirectUrl: "https://testmerchant.interswitch-ke.com",
                            terminalId: "3TLP0001",
                            transactionReference: "1234890",
                            cardTokensJson: '[{"panLast4Digits":"1895","panFirst6Digits":"506183","token":"C48FA7D7F466914A3E4440DE458AABC1914B9500CC7780BEB4","expiry":"05/20"},{"panLast4Digits":"1111","panFirst6Digits":"411111","token":"DBA747BC30109711E8A1A2FDAFCD27A851B37DDA24F8BE2724","expiry":"04/20"}]'
                        };
                    </script>

Step 2. Post them to the billing checkout endpoint (/webpay/cless_checkout) as below

<button onclick="{
    console.log(paymentValues);
    <!--TODO Change this to correct live source url-->
    postCheckout('/webpay/cless_checkout', paymentValues);
}">Billing Checkout
                    </button>