This documentation is for Taxamo v1. If your account is with Taxamo v2 use the documentation at integrate.taxamo.com/doc.
If you are uncertain of your version please contact support@taxamo.com for assistance.

How to customize the Checkout form Look & Feel?

There are several ways to customize the Checkout form Look and Feel.

Display settings in Taxamo Merchant Portal

Under the Taxamo Checkout - Display settings page in the Taxamo Merchant Portal you have options to:

  • Set logo image
  • Set background image (for redirect mode only)
  • Set custom CSS

Display options in Taxamo.js

When running the Checkout form using Taxamo.js (new Taxamo.Checkout(transaction, metadata) documented here) there are several (metadata) options which can control the display elements on the form.

Field
Type
Description
show_invoice_address
boolean
If true the invoice address will be shown.
require_invoice_address
boolean
If true the invoice address will be shown and required.
show_buyer_name
boolean
If true the buyer’s name field will be shown.
require_buyer_name
boolean
If true the buyer’s name will have to be provided.
ask_for_cardholder_name
boolean
If true, and credit card option is used, the cardholder name field will be shown. Defaults to buyer name if not provided. The value does not get stored on the transaction, it only propagates to the relevant PSP.
show_email
boolean
If true the buyer’s email field will be shown.
require_email
boolean
If true the buyer’s email will have to be provided.
show_eu_vat_number
boolean
If true the buyer’s VAT number field will be shown for EU countries.
selected_language_code
string
Lowercase language code of the language to be used when the form is launched (the default language is English). Language must be configured on Taxamo Checkout - Internationalization page in the Taxamo Merchant Portal.
show_summary
boolean
If true the checkout summary will be expanded on launch of the form in an overlay mode. The default mode is false and the checkout summary is collapsed, it can be expanded with one click.
show_certificate_provider_logo
boolean
If true the certificate provider’s logo will be shown in bottom left corner of the form. The default mode is false.
show_payment_provider_logo
boolean
If true the payment provider’s logo will be shown in bottom left corner of the form. The default mode is false.
show_cc_provider_logo
boolean
If false the credit card logo (Visa or MasterCard) will not be shown on the right side of the card number input field.The default mode is true.

Display elements

Overlay mode

0. Close button
CSS element: button.close { }

1. Logo
Logo image can be set on Taxamo Checkout - Display settings portal page.
CSS element (parent): .logo-image { }

2. Order details (checkout summary)
By default order details are collapsed, with the option to click on the Order details link to expand them. Expanded view is shown on the image above:

It is possible to run the Checkout form with Order details expanded by setting metadata.show_summary = true when running new Taxamo.Checkout(transaction, metadata).

3. Language selector
Visible if languages are set on the page Taxamo Checkout - Internationalization in the Taxamo portal.
The language to be used when form is launched can be chosen by setting metadata.selected_language_code = "fr"(lowercase languge code, "fr" is an example value) when running new Taxamo.Checkout(transaction, metadata).
CSS element: div[src="'/widgets/select-language.html'"] { } (e.g. you can use display: none; rule to hide it)

4. Buyer name
Visible (and required) if metadata.show_buyer_name = true or metadata.require_buyer_name = true are set when running new Taxamo.Checkout(transaction, metadata). Saved to transaction.buyer_name.

5. Buyer email
Visible (and required) if metadata.show_email = true or metadata.require_email = true are set when running new Taxamo.Checkout(transaction, metadata). Saved to transaction.buyer_email.

6. Billing country
Required field. Set to transaction.billing_country_code.

7. EU VAT number
Visible if EU country is selected and it is not setmetadata.show_eu_vat_number = false when running new Taxamo.Checkout(transaction, metadata). Saved to transaction.buyer_name.

8. Address details
Visible (and required) if metadata.show_invoice_address = true or metadata.require_invoice_address = true are set when running new Taxamo.Checkout(transaction, metadata). Saved to transaction.invoice_address.

9. PSP options
Visible if multiple PSP providers are connected and enabled for the checkout.

10. Cardholder name
Visible if metadata.ask_for_cardholder_name = true is set when running new Taxamo.Checkout(transaction, metadata) and credit card option is used. Defaults to buyer name if not provided. Value doesn't get stored on transaction, only propagates to PSP.

11. Credit card details
Required fields if the credit card option is used.

12. Credit card logo
Credit card logo (Visa or Mastercard). Can be hidden by setting metadata.show_cc_provider_logo = false when running new Taxamo.Checkout(transaction, metadata)

13. Certificate provider logo
Visible if metadata.show_certificate_provider_logo = true is set when running new Taxamo.Checkout(transaction, metadata)

14. PSP logo
Visible if metadata.show_payment_provider_logo = true is set when running new Taxamo.Checkout(transaction, metadata)

15. Proceed button
CSS element: button.proceed { }

16. Message box
Area where info/error messages are shown.

Redirect mode

17. Background image
Set on Taxamo Checkout - Display settings page in Taxamo portal.

18. Order details group
Logo image can be set on Taxamo Checkout - Display settings portal page.
CSS element: .details { }

CSS examples

Here we present several examples of CSS rules that can be set under Custom CSS on the Taxamo Checkout - Display settings page in the Taxamo Merchant Portal.

  • Removing modal background in an overlay mode

    body.xdm {
    background: none !important;
    }
    
  • Styling modal border in an overlay mode

    .xdm .payment-form {
    border-radius: 0 !important;
    border: 0 none !important;
    -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.8) !important;
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.8) !important;
    }
    
  • Changing styling of Proceed and other buttons

    button.proceed,
    button.dismiss,
    button.sms-verify,
    button.sms-send {
    background-color: yellow !important;
    color: #000 !important;
    }
    .coupon-input button {
    background-color: yellow !important;
    color: #000 !important;
    }
    
  • Changing color of Order details title/link in an overlay mode

    .summary-toggle h3 a {
    color: red;
    }
    
  • Move overlay popup down from the top of the page

    .wrapper {
    margin-top: 30px;
    }
    
  • Change border styling of input elements in focus

    .pure-form input[type=text]:focus,
    .pure-form input[type=password]:focus,
    .pure-form input[type=email]:focus,
    .pure-form input[type=url]:focus,
    .pure-form input[type=date]:focus,
    .pure-form input[type=month]:focus,
    .pure-form input[type=time]:focus,
    .pure-form input[type=datetime]:focus,
    .pure-form input[type=datetime-local]:focus,
    .pure-form input[type=week]:focus,
    .pure-form input[type=number]:focus,
    .pure-form input[type=search]:focus,
    .pure-form input[type=tel]:focus,
    .pure-form input[type=color]:focus,
    .pure-form select:focus,
    .pure-form textarea:focus { border-color: #00FFFF; }
    
  • Change styling of message boxes

    .proceed-msg {
    font: normal 14px / 16px Helvetica, Arial, sans-serif !important;
    color: #555 !important;
    }
    .alert-success {
    background: #ebf7fd !important;
    color: #6495ED !important;
    border-radius: 0 !important;
    border: none !important;
    font: normal 14px / 16px Helvetica, Arial, sans-serif !important;
    }
    .alert-danger {
    background: #fff1f0 !important;
    color: #d85030 !important;
    border-radius: 0 !important;
    border: none !important;
    font: normal 14px / 16px Helvetica, Arial, sans-serif !important;
    }
    
  • Change styling of group titles and labels

    h2 {
    font: bold 16px / 20px  Helvetica, Arial, sans-serif !important;
    color: #555 !important;
    }
    label {
    font: normal 15px / 18px Helvetica, Arial, sans-serif !important;
    color: #555 !important;
    }
    
  • Change styling of ordr detials block

    .summary-toggle {
    background:#F0FFFF;
    padding:10px;
    }
    .summary-toggle h3 a {
    	color:#6495ED;
    }
    .order-item {
    	padding:10px;
    }
    .order-item:last-child h4,
    .order-item:last-child h3 {
    	font-weight:bold;
    	color:#006400;
    }
    .horizontal-line {
    	padding:0 10px;
    }
    

To discover additional CSS selectors simply inspect the Taxamo Checkout form with your browser’s dev tools.