Skip to main content
Stylesheets customize the appearance of PCI Booking’s hosted forms (card capture, CVV capture, card display, and Card By Link). Upload your own CSS to match your brand. PCI Booking applies the stylesheet when rendering the form.

​
How It Works

  1. Create a stylesheet with your custom CSS rules.
  2. Give it a unique name that you will reference in your API requests.
  3. Reference the stylesheet name when generating a card entry or display form. PCI Booking renders the form with your styles applied.
If no stylesheet is specified, PCI Booking applies default styling.

​
Default Stylesheet

The default CSS applied to the card capture form is available for download: default-capture-form.css. Use it as the baseline for your own stylesheet — start from the default, adjust the rules you want to change, and upload the result under your own resource name. The file also shows the element classes and IDs the forms use (e.g. .card-container, .form-input), which you target when writing CSS from scratch — see the form structure reference below for the key selectors.

​
Form Structure Reference

The key elements you can target with custom CSS, per hosted form: Card entry form (Request Card Entry Form): CVV capture form (Request CVV Entry Form) uses the same structure with only the CVV field: #frmCardPayment, .card-container, #cardCvv, #card-enter, and the loader elements. Card display form (Request Card Display Form) renders read-only rows instead of inputs: .widjet-container (outer), .boxed (card panel), .row with .desc/.value pairs per field (card type, number, name, expiration), .row.footer, and .warning for virtual card notices.

​
Managing Stylesheets via the Portal

  1. Log into the PCI Booking portal.
  2. Navigate to GUI Settings > Stylesheet Settings.
  3. Click the plus icon to create a new stylesheet.
  4. Provide:
    • Resource name - a unique name used to reference this stylesheet in API requests.
    • Resource description - a free-text description for your reference.
    • Resource Content LTR - CSS rules for left-to-right page layouts.
    • Resource Content RTL - CSS rules for right-to-left page layouts (e.g. Arabic, Hebrew).

​
Managing Stylesheets via the API

The user performing API actions must have the System Configurator permission. If you are unsure, check with your account administrator or contact our support team.
You can also manage stylesheets programmatically:
When updating a stylesheet via the API, the new content overwrites the existing content entirely.

​
Next Steps

Hosted Card Entry Form

Card capture form that uses stylesheets

Card Display

Card display form that uses stylesheets

Custom Translations

Customize form text and labels