Skip to main content
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

​
Theshort-formtheme 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>

​
Thelong-formtheme 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.
Shortformiframeimage
Longformiframeexample 1

​
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 MessageDescription
credit-card-invalidCredit card number is invalid from the input.
expiration-invalidExpiration date is invalid from the input.
cvv-invalidCVV is invalid from the input.
zip-invalidPostal code is invalid from the input.
ecrypt-error-messageToken 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>