Formatting the Payment Form

Clearent’s JavaScript SDK payment frame allows you to format the content using the style attributes when you call the ClearentSDK.init() method.

The following example code generates a form where the input fields display blue text by default, and the text changes to purple when the field is selected for input:

Example code:

<script type="text/javascript">
    ClearentSDK.init({
        "baseUrl": "https://gateway-sb.clearent.net",
        "pk": "YOUR PUBLIC KEY GOES HERE",
        "styles": ".form-control{color: blue;}.form-control:focus{color: purple;}"
    });
</script>

Tip: Access the element classes, IDs, and structure from the browser’s Developer toolbar to build any override styles for your payment page.

Note: Clearent’s JavaScript SDK payment frame restricts from using the style that references external resources to avoid scripting attack.

The following example sets a background-URL to block an external resource:

<script type="text/javascript">
    ClearentSDK.init({
        "baseUrl": "https://gateway-sb.clearent.net",
        "pk": "YOUR PUBLIC KEY GOES HERE",
        "styles": ".form-control{background: url('http://bad-guy-server/evil-endpoint/logo.jpg');}"
    });
</script>

The following error will be displayed when you set an external resource or data/blob content in the style attributes during formatting the content.