Search site
Payment Widget
Payment Widget styling capabilities
Widget theme
By default, the “card” theme is applied.
Card theme
theme: card
Without tokenisation
Card
Payment Widget card without any saved cards.
Truevo form container
The Truevo form container’s background can be customised.
#truevo_form_container{background: #ffe5b4;}
Transparent background
The widget background colour and shadow can be transparent.
#truevo_form_container {
background: transparent;
box-shadow: 0 4px 8px transparent;
}
"Pay by card" heading
- The heading text colour and font can be customised.
- The border line colour and size can also be customised.
/* Heading text */
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-container
> .truevo-pay-by-card
> .truevo-pay-by-card-txt {
color: #fc9d44;
font-size: 18px;
}
/* Border line */
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-container
> .truevo-pay-by-card {
border-bottom: 3px solid #a6c54c;
}
Tooltip
The tooltip background and text colour can be customised.
.truevo-default-ip-label.truevo-security-label-div
> .truevo-card-cvc-img-div
> .cvv-info {
background: #fc9d44;
color: #fff;
}
"Save card details" checkbox
The “Save card details” checkbox can be customised.
/* Change Checkbox label color */
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-container
> .truevo-buttons-div
> .truevo-options-div
> .truevo-each-option-div
> label {
color: #787878;
}
/* To style checkbox */
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-container
> .truevo-buttons-div
> .truevo-options-div
> .truevo-each-option-div
> label
> span {
border: 2px solid #fc9d44;
}
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-container
> .truevo-buttons-div
> .truevo-options-div
> .truevo-each-option-div
> label
> input:checked
~ span {
border: 2px solid #fc9d44;
background: #fff;
}
/* Style after it is checked */
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-container
> .truevo-buttons-div
> .truevo-options-div
> .truevo-each-option-div
> label
> input:checked
~ span:after {
border: solid #fc9d44;
border-width: 2px 2px 0 0;
left: 1.5px;
}
Active "Pay" button
The “Pay” button can be customised when it’s in active state.
.truevo-default-btn.truevo-pay-btn {
background: #fc9d44 !important;
color: #000;
}
"OR" separator
The text size and colour of the “OR” separator can be customised.
.truevo-apple-pay-or-span {
color: #fc9d44;
font-size: 12px;
}
Footer
The border line and text style of the footer can be customised.
#truevo_form_container > .truevo-footer-div {
border-top: 2px solid #a6c54c;
color: #fc9d44;
}
With tokenisation
Card
Payment Widget card with cards already saved.
Truevo form container
The Truevo form container’s background can be customised.
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-each-card {
background: #ffe5b4 !important;
}
Transparent backgound
The widget background colour and shadow can be transparent.
#truevo_form_container {
background: transparent;
box-shadow: 0 4px 8px transparent;
}
"Pay with a saved card" heading
- The heading text colour and font can be customised.
- The border line colour and size can also be customised.
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-saved-cards-title-div {
color:#FC9D44;
font-size: 18px;
border-bottom: 2px solid #A6C54C;
}
Tooltip
The tooltip background and text colour can be customised.
.truevo-default-ip-label.truevo-security-label-div
> .truevo-card-cvc-img-div
> .cvv-info {
background: #fc9d44;
color: #fff;
}
Saved card selector
The saved card selector colour can be customised.
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-each-card
> .truevo-select-card[checked="true"]:before {
border: 2px solid #fc9d44;
background: #fff;
}
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-each-card
> .truevo-select-card[checked="true"]:after {
background: #fc9d44;
}
Cardholder name
The cardholder name colour and text size can be changed.
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-each-card
> .truevo-card-details
> .truevo-card-details-div
> .truevo-card-name {
color: #fc9d44;
font-size: 14px;
}
Card details
The card details colour and text size can be changed.
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-each-card
> .truevo-card-details
> .truevo-card-details-div {
color: #fc9d44;
font-size: 14px;
}
"Remove" button
The saved card’s “Remove” button can be customised.
#truevo_form_container
> .truevo-card-main-container
> .truevo-saved-cards-container
> .truevo-each-card
> .truevo-card-details
> .truevo-each-card-button-div
> button {
color: #fc9d44;
}
"Use new card" button
The “Use new card” button can be customised.
/* To style button label */
#truevo_form_container
> .truevo-card-main-container
> .truevo-new-card-btn-div
> label {
color: #fc9d44;
}
/* To style button icon */
.truevo-plus-button {
border: 2px solid #fc9d44;
background: white;
}
.truevo-plus-button:before,
.truevo-plus-button:after {
background: #fc9d44;
}
Active "Pay" button
The “Pay” button can be customised when it’s in active state.
.truevo-default-btn.truevo-pay-btn {
background: #fc9d44 !important;
color: #000;
}
"OR" separator
The text size and colour of the “OR” separator can be customised.
.truevo-apple-pay-or-span {
color: #fc9d44;
font-size: 12px;
}
Footer
The border line and text style of the footer can be customised.
#truevo_form_container > .truevo-footer-div {
border-top: 2px solid #a6c54c;
color: #fc9d44;
}
"Use a new card" heading
The “Use a new card” heading and text size can be customised.
#truevo_form_container>
.truevo-card-main-container>
.truevo-new-card-container>
.truevo-pay-by-card>
.truevo-pay-by-card-txt {
color: #fc9d44;
font-size: 18px;
}
Messages
"Remove card" confirmation
The “Remove card” confirmation message is displayed when a customer selects the “Remove” button.
Background
The confirmation message background colour can be customised.
.truevo-modal-block {
background: #ffe5b4;
}
Heading
The heading colour and size can be customised.
.truevo-card-header {
color: #fc9d44;
font-size: 18px;
}
Descriptor text
The descriptor text colour and size can be customised.
.truevo-info-text {
color: #fc9d44;
font-size: 13px;
}
Buttons
The button colours can be customised.
/* card buttons color */
/* confirm button */
.truevo-btn-modal-remove__popup {
background: #fc9d44;
color: #fff;
}
/* cancel button */
.truevo-btn-modal-cancel__popup {
background: #fff;
color: #fc9d44;
border-color: #fc9d44;
}
"Success" heading
The heading colour of the “Success” or “Rejected” message can be customised.
#truevo_form_container
> .truevo-card-result-div
> .truevo-card-result-div-title {
color: #fc9d44;
}
"Success" descriptor text
The descriptor text colour of the “Success” or “Rejected” message can be customised.
#truevo_form_container
> .truevo-card-result-div
> .truevo-card-result-div-description {
color: #fc9d44;
}
