Hosted Iframe

ECRYPT’s hosted iframe allows you to embed a PCI compliant payment form on your webpages and securely collect payment details. Once details are collected, sensitive credit card information is tokenized in your ECRYPT account. You can customize the appearance of your payment form to match your brand and there are a variety of themes for quick implementation.

To get started, place the code snippet below on your site.

<button type='button' class='button-main40' 
onclick="window.location.href='https://secure.ecrypt.com/buynow/e5b
de865-9ae0-44ac-88c1-ebf93e279123'" style='background:#3769c6; 
color:#ffffff; font-family:trebuchet; border: 3px; border-color: #3769c6; 
font-size: 14pt; font-weight: normal;'>Buy Now</button>

Pick a prebuilt theme for quick implementation. Here is a list of themes you could use.

Juan to provide iframe demo embed. Code sample:

{/*  Add this element anywhere you want in the Body  */}
<div id="ecrypt-iframe-wrapper"></div>
{/*  Place this right before the closing body tag  */}
<script type="text/javascript">
  var ecryptConfig = { 
      theme: "long-form-border-light", // <------- PASTE IT HERE
      publicKey: "[PLACE YOUR PUBLIC KEY HERE]", // <------- ADD IT HERE
  }
</script>
<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js">

Customize your theme’s colors, fonts and form messages in the appearance config.

Juan to provide Iframe styling examples Code Example

{/*  Add this element anywhere you want in the Body  */}
<div id="ecrypt-iframe-wrapper"></div>
{/*  Place this right before the closing body tag  */}
<script type="text/javascript">
var ecryptConfig = {
  appearance: {
    bodyBackground: "#1A1A1A",
    formBackground: "#1A1A1A",
    inputColor: "#5C5C5C",
    inputBorderColor: "#1A1A1A",
    inputBackground: "#282828",
    errorColor: "#d90429",
    successColor: "#2BBD53",
    focusColor: "#FDD745",
    hidealerts: false,
    googleFontFamily: "'Roboto', sans-serif",
  },
  theme: "long-form-border-light",
  publicKey: "[PLACE YOUR PUBLIC KEY HERE]",
}
</script>
<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js"></script>

Appearance

This section covers the appearance config for both short-form and long-form themes.

Customizable form components include:

Color
Font Family
Form messages

The`short-form`theme appearance config options:

short-form-light-zip
short-form-Dark-zip

{/*  Add this element anywhere you want in the Body  */}
<div id="ecrypt-iframe-wrapper"></div>
{/*  Place this right before the closing body tag  */}
<script type="text/javascript">
  var ecryptConfig = { 
      appearance: {
        bodyBackground: "",
        inputBorderColor: "",
        inputColor: "",
        inputBackground: "",
        errorColor: "",
        successColor: "",
        hideAlerts: false,
        googleFontFamily: "",
      },
      theme: "short-form-light",
      publicKey: "[PLACE YOUR PUBLIC KEY HERE]",
  }
</script>
<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js"></script>

The`long-form`theme appearance config options:

long-form-light
long-form-dark
long-form-border-light
long-form-border-dark

{/*  Add this element anywhere you want in the Body  */}
<div id="ecrypt-iframe-wrapper"></div>
{/*  Place this right before the closing body tag  */}
<script type="text/javascript">
  var ecryptConfig = { 
  appearance: {
      bodyBackground: "",
      formBorderColor: "",
      formBackground: "",
      inputColor: "",
      inputBorderColor: "",
      inputBackground: "",
      errorColor: "",
      successColor: "",
      focusColor: "",
      hideAlerts: false,
      googleFontFamily: "",
  },
  theme: "long-form-light",
  publicKey: "[PLACE YOUR PUBLIC KEY HERE]",
}
</script>
<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js"></script>

Color

Ecrypt iframe will accept hex and letter color formats only.

Google Font

Go to Googe font site
Select a font you like, once you add the font to your selected family.
Apply the CSS rules to specify families. You should see a CSS code snippet font-family: 'Roboto', sans-serif;
Only copy the value of the CSS rule font-family ‘Roboto’, sans-serif
Then paste it in the config for example

<!-- Add this element anywhere you want in the Body -->
<div id="ecrypt-iframe-wrapper"></div>
<!-- Place this right before the closing body tag -->
<script type="text/javascript">
  var ecryptConfig = { 
    appearance: {
      googleFontFamily: "'Roboto', sans-serif",// <------- PASTE IT HERE
    },
    publicKey: "[PLACE YOUR PUBLIC KEY HERE]", // <------- ADD IT HERE
  }
</script>
<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js">

Capturing messages from the iframe

We are bubbling up the validation alerts to you using Post message via postMessage Here are all of the alert messages ECRYPT is passing back to you:

Alert Message	Description
credit-card-invalid	Credit card number is invalid from the input.
expiration-invalid	Expiration date is invalid from the input.
cvv-invalid	CVV is invalid from the input.
zip-invalid	Postal code is invalid from the input.
ecrypt-error-message	Token API error message

window.addEventListener('message', (event) => {
if(event.origin !== window.location.origin) {
    var msg = event.data;
    // ------- ERROR ALERTS
    // For credit card error
    if(msg.includes('credit-card-invalid')) {
        // fire any alert you want in you site
        console.log('Credit card error alert');
    }

    // For Postal code error
    if(msg.includes('zip-invalid')) {
        // fire any alert you want in you site
        console.log('zip error alert');
    }

    // For Expiration error
    if(msg.includes('expiration-invalid')) {
        // fire any alert you want in you site
        console.log('expiration error alert');
    }

    // For CVV error
    if(msg.includes('cvv-invalid')) {
        // fire any alert you want in you site
        console.log('CVV error alert');
    }
}
});

Succesful Responses

Once the user successfully inputs their credit card information the API will post back a token id. Here is an example of how you can listen for the success message.

 window.addEventListener('message', (event) => {
    if(event.origin !== window.location.origin ) {
      var msg = event.data;
      //grab success message
      if(msg.includes('token')) {
        console.log(JSON.parse(msg));
      }
    }
  });

Hide alert message in the iframe

The config option only accepts true or false. To hide alerts pass true.

<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js">
<!-- Add this element anywhere you want in the Body -->
<div id="ecrypt-iframe-wrapper"></div>

<!-- Place this right before the closing body tag -->
<script type="text/javascript">
  var ecryptConfig = {
      appearance: {
          hideAlerts: true,// <------- CHANGE IT HERE
      },
      publicKey: "[PLACE YOUR PUBLIC KEY HERE]",
  }
</script>
<!-- This should always go right after the config -->
<script src="https://iframe.ecrypt.com/js/ecrypt_iframe.js"></script>

Getting Started

Accept Payments

Payment Operations

Customers

Reporting

Developer Resources

To get started, place the code snippet below on your site.

Pick a prebuilt theme for quick implementation. Here is a list of themes you could use.

Customize your theme’s colors, fonts and form messages in the appearance config.

Appearance

Customizable form components include:

The`short-form`theme appearance config options:

The`long-form`theme appearance config options:

Color

Google Font

Capturing messages from the iframe

Succesful Responses

Hide alert message in the iframe

​To get started, place the code snippet below on your site.

​Pick a prebuilt theme for quick implementation. Here is a list of themes you could use.

​Customize your theme’s colors, fonts and form messages in the appearance config.

​Appearance

​Customizable form components include:

​Theshort-formtheme appearance config options:

​Thelong-formtheme appearance config options:

​Color

​Google Font

​Capturing messages from the iframe

​Succesful Responses

​Hide alert message in the iframe

To get started, place the code snippet below on your site.

Pick a prebuilt theme for quick implementation. Here is a list of themes you could use.

Customize your theme’s colors, fonts and form messages in the appearance config.

Appearance

Customizable form components include:

The`short-form`theme appearance config options:

The`long-form`theme appearance config options:

Color

Google Font

Capturing messages from the iframe

Succesful Responses

Hide alert message in the iframe