Embedded Vanilla (HTML 5)

Embedded mode uses iframes and supports fixed and variable heights with the width always being 100% of the container.

Front end instructions

  • Create a div where the ISX Vanilla embedded content will be contained.
  • Include the ISX vanilla embedded content source.
  • Setup and publish the ISX Vanilla embedded content.
  • Replace the REDIRECT_URL_FROM_GATEWAY_RESPONSE in the widget with the redirect url from the API.

API Interaction

Implement the following interactions with the ISX API: (Recommended)

  • History of transactions.
  • Ability to view status of transactions: “Completed, rejected, canceled, declined, pending, expired”.
  • Ability to Resume pending transactions.
  • Ability to Cancel pending transactions.
  • In case of APM, the cancel option should not be available.

UI Interaction

  • If ISX Payment selector is used, make sure the amount and currency are collected up front. In such a case, no logos for payment method are to be implemented by the Merchant.
  • Transaction currencies are to be allowed in client area, as per Payment Facilitation Agreement.
  • In case of APM (Alternative Payment Method), limit the currencies used to what the APM supports only.
  • Minimum/Maximum amount (Proper validation messages).
  • Account Identifier must be unique for each customer (such as customer’s CRM customer number).
  • The integration must only be implemented within the websites, as per the Agreement.

UAT Guide

Test the ISX implementation against different:

  • Devices.
  • Operating Systems.
  • Browsers.
  • Ad-blockers.
  • Screen Resolutions.
  • Settings (cookies, javascript, tracking, cross-site scripting, incognito etc).
  • Environments (website, applications etc).

Sample Vanilla Embedded HTML

<html>
<head>
    <title> iSignthis Vanilla Widget </title>
    <style>

        /* 
            Proportionally resizing (aka. responsive iframes)
        */
        .isignthis-container {
            overflow: hidden;
            padding-top: 56.25%;
            position: relative;
        }

        .isignthis-container iframe {
            border: 0;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        /* 
            Don’t forget to apply an aspect ratio class to your iframe. 
            If you don’t, it could cause the iframe to disappear. 
            Intrinsic ratios for responsive iframes.
            4x3 Aspect Ratio 
        */
        .isignthis-container-4x3 {
            padding-top: 75%;
        }

        /* 
            Here you can configure the width, height etc 
        */
        .isignthis-wrapper {
            margin: 0 auto;
            max-width: 1020px;
            width: 50%;
        }
    </style>

</head>

<body>
    <div class="isignthis-wrapper">
        <div class="isignthis-container">
            <!-- 
                Do not add the width and height attributes. 
                Keeping those attributes forces the content to stay at that size regardless of the screen size.
                This causes problems in responsive layouts when the screen size is smaller than the width of the iframe. 
                Though we could use CSS to force the size, why have them if they are not being used.

                Notice I removed the frameborder attribute. 
                If you’re using HTML5, that attribute is no longer supported.
            -->
            <iframe src="REDIRECT_URL_FROM_GATEWAY_RESPONSE" allowfullscreen></iframe>
        </div>
    </div>
</body>
</html>