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 - unless you’ve set one of your own uploaded stylesheets as your account’s default via the IsDefault flag on Add/Update CSS, in which case that stylesheet is used automatically for any request that doesn’t explicitly specify a css parameter.
Want to customize or hide the “PCI Booking” branding shown in the form? This is possible through your custom stylesheet. The exact selector isn’t in the downloadable default CSS reference below at time of writing - contact support@pcibooking.net if you can’t locate it there and need it identified.

​
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.
Field layout is fixed and cannot be reordered. Custom CSS controls appearance (colors, borders, spacing, hover states) of the existing field structure, not its layout or sequence. A small number of fields can be shown or hidden - e.g. showOwnerId and showCVV on the Request Card Entry Form - but their position in the form is not configurable.
Custom fonts are not supported by default, due to the risk exposure of loading an external font file into the card capture page. Exceptions can be made case-by-case: contact support@pcibooking.net with your font file, PCI Booking hosts it, and you reference it in your custom CSS.

​
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