iFrame Tutorial

The iFrame integration is a fast & easy way to integrate Simplex without any API calls.
You can inject a customizable quote form that will allow your customers to get a quote that can be pre-filled with parameters that were passed through URL, and then be redirected to a mutually branded checkout page that can be opened either in a new window, or as a widget within the same page (checkout SDK).

Below is an example of the iFrame. If you do not see it please refresh this page.

The below integration steps use our iFrame snippet, and possibly checkout SDK, so that all you need to do is run a code snippet which will inject all the code you need in order to initiate the Simplex quote form and checkout.

Methods

iFrame - New Window

Place this snippet to load the iFrame as part of your HTML.

<head>
<style id="simplex-css">
.simplex-continue-button {
background-color: rgba(67,176,42,0.77) !important;
}
</style>
</head>
<body>
<div id="simplex-form"></div>
<script src='https://iframe.sandbox.test-simplexcc.com/form.js'
type="text/javascript"></script>
<script>
window.simplex.createForm();
</script>
</body>

<div id="simplex-form"></div>
<script src='https://iframe.simplex-affiliates.com/form.js' type="text/javascript"></script>
<script>
    window.simplex.createForm();
</script>
<script src="https://checkout.simplexcc.com/splx.js"></script>

iFrame - Widget

If you would like to open the checkout as a widget in the same page as the quote form, please use the below code snippet instead.
Please note that this widget requires the use of a _public_key _provided by the integration team.

<head>
    <script>
        window.simplexAsyncFunction = function () {
            Simplex.init({public_key: '<partner_public_key>'})
        };
    </script>
    <script src="https://cdn.test-simplexcc.com/sdk/v1/js/sdk.js" async></script>
</head>

<body>
    <form id="simplex-form">
        <div id="checkout-element">
        </div>
    </form>
    <script src='https://iframe.sandbox.test-simplexcc.com/form-sdk.js' type="text/javascript"></script>
    <script>
        window.simplex.createForm();
    </script>
</body>

<head>
    <script>
        window.simplexAsyncFunction = function () {
            Simplex.init({public_key: '<partner_public_key>'})
        };
    </script>
    <script src="https://cdn.simplex.com/sdk/v1/js/sdk.js" async></script>
</head>

<body>
    <form id="simplex-form">
        <div id="checkout-element">
        </div>
    </form>
    <script src='https://iframe.simplex-affiliates.com/form-sdk.js' type="text/javascript"></script>
    <script>
        window.simplex.createForm();
    </script>
  <script src="https://checkout.simplexcc.com/splx.js"></script>
</body>

Available URL Parameters

Simplex supports inserting URL parameters into your URL to pass data in to the iFrame. For example you can pass the default crypto-fiat pair to display and the default amount to purchase as well as as the users wallet address (if you have it). The parameters are made of a key and a value separated by an equals sign (=) and joined by an ampersand (&). The first parameter always comes after a question mark in a URL.

Parameter	Description
crypto	The initial cryptocurrency selection option from the dropdown we will present to the end-user on load of the iFrame
fiat	The initial fiat currency selection from the dropdown we will present to the end-user on load Must be used together with the amount parameter
amount	The amount of fiat money that will be presented to the end-users once they quote form is loaded
wallet_address	The wallet address field will be prefilled on load. requires integration team to approve and enable using the feature
tag	The wallet address tag/memo will be prefilled if required
ref_id	A parameter for tracking reference to the iFrame page. It allows to get tracking information and optimize your campaigns or business profitability accordingly. The reference ID can be either a number, integer or a mix of both and it is limited for 100 characters.

Example of a redirect URL

https://{your_whitelisted_domain}/?crypto=ETH&fiat=EUR&amount=5000&wallet_address=<wallet_address>&ref_id=simplex

Form Customization

You can write custom CSS to design the quote form to match your general design.
In sandbox please write it inline with "style" tag.
For production, please send the integration team a .CSS file with the overrides.
The following CSS elements can be overridden:

Quote form part	Possible elements to override
Crypto input	Wrapper: .crypto Input: #crypto_amount DropDown: .crypto-dd Error: .error-tooltip
Fiat input	Wrapper: .fiat Input: #fiat_amount DropDown: .fiat-dd Error: .error-tooltip
Crypto address	Wrapper: .crypto-address Input: #cryptoAddress Don’t have one: .wallet-url Error: .error-message
Submit button	.simplex-continue-button
Form body	.simplex-form

Checkout customization

It's possible to customize the checkout page to fit the color scheme of your brand.
See here!