Payment Widget styling capabilities

Last Updated: 27 Aug 2022

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;}
				
			

"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;
}
				
			

"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;
}
				
			

Page Contents