> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecrypt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```javascript theme={null} theme={null}
<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:**

```text theme={null} theme={null}
{/*  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

```text theme={null} theme={null}
{/*  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`

```text theme={null} theme={null}
{/*  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`

```text theme={null} theme={null}
{/*  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.

<Frame>
  <img src="https://mintcdn.com/ecrypt/1eE7UHfXKMS4fOc7/images/Shortformiframeimage.png?fit=max&auto=format&n=1eE7UHfXKMS4fOc7&q=85&s=4c60fd00bc12e5775c987d922811ab7c" alt="Shortformiframeimage" width="1166" height="540" data-path="images/Shortformiframeimage.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/ecrypt/1eE7UHfXKMS4fOc7/images/longformiframeexample-1.png?fit=max&auto=format&n=1eE7UHfXKMS4fOc7&q=85&s=9707b87c70857503e98e9abaf9deee11" alt="Longformiframeexample 1" width="1242" height="673" data-path="images/longformiframeexample-1.png" />
</Frame>

## **Google Font**

* Go to [**Googe font site**](https://fonts.google.com/)
* 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

```text theme={null} theme={null}
<!-- 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**](https://developer.mozilla.org/en-US/docs/Web/API/Window/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*                       |

```text theme={null} theme={null}

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.

```text theme={null} theme={null}
 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`.

```text theme={null} theme={null}
<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>
```