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 code sample 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: Payment form

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.

Example: Browser's developer toolbar

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

Example: Error from the browser's developer toolbar