> ## Documentation Index > Fetch the complete documentation index at: https://docs.switch.vaultera.co/llms.txt > Use this file to discover all available pages before exploring further. # Customization Customize your Web Unified Checkout ## 1. Layouts Choose a layout that fits well with your UI pattern. There are two types of layout options as listed below. The layout defaults to accordion if not explicitly specified. ### 1.1 Accordion Layout The accordion layout displays payment methods vertically using an accordion. To use this layout, set the value for `layout` to `accordion`. You also have the option to specify other properties, such as those shown in the following example: ```javascript theme={"system"} var paymentElementOptions = { layout: { type: 'accordion', defaultCollapsed: false, radios: true, spacedAccordionItems: false }, } ``` **or** ```javascript theme={"system"} var paymentElementOptions = { layout: 'accordion' } ``` ### 1.2 Tabs Layout The tabs layout displays payment methods horizontally using tabs. To use this layout, set the value for `layout` to `tabs`. You also have the option to specify other properties, such as `tabs` or `collapsed`: ```javascript theme={"system"} var paymentElementOptions = { layout: 'tabs' } ``` ## 2. Wallets The wallet customization feature lets users configure payment options like Apple Pay, Google Pay, PayPal, and Klarna. It includes a `walletReturnUrl` for post-payment redirects and a `style` property to customize the wallet's appearance, offering flexibility for seamless integration: ```javascript theme={"system"} var paymentElementOptions = { wallets: { walletReturnUrl: `${window.location.origin}`, applePay: "auto", googlePay: "auto", payPal: "auto", klarna: "never", style: { theme: "dark", type: "default", height: 55, buttonRadius: 4, }, }, } ``` | Variable | Description | Values | | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `walletReturnUrl: string` | Defines the URL to redirect users to after completing a payment | This will take a URL string as its value | | `applePay: showType`
`googlePay: showType`
`payPal: showType`
`klarna: showType` | Determines the visibility of Apple Pay, Google Pay, PayPal, and Klarna | `showType` can take two values:
• `"auto"`: Display when supported
• `"never"`: Always hidden | | `style: { theme, type, height, buttonRadius }` | Configures the wallet's appearance with the following options:
• `theme`: Sets the theme
• `type`: Defines the style type (e.g., buy)
• `height`: Specifies the height of the wallet
• `buttonRadius`: Adjusts the button corner radius | • `theme`: Can take values as `dark`, `light`, or `outline`
• `type`: Specifies the wallet button style with options including `checkout`, `pay`, `buy`, `installment`, `default`, `book`, `donate`, `order`, `addmoney`, `topup`, `rent`, `subscribe`, `reload`, `support`, `tip`, and `contribute` | ## 3. Styling Variables The Styling APIs can be used to blend the Unified Checkout with the rest of your app or website. | Variable | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fontFamily` | The font family used throughout Widgets. Widget supports CSS fonts and custom fonts by passing the fonts option; reference to elements consumer | | `fontSizeBase` | The font size that's set on the root of the Widget. By default, other font size variables like `fontSizeXs` or `fontSizeSm` are scaled from this value using rem units | | `spacingUnit` | The base spacing unit that all other spacing is derived from. Increase or decrease this value to make your layout more or less spacious | | `borderRadius` | The border radius used for tabs, inputs, and other components in the Widget | | `colorPrimary` | A primary color used throughout the Widget. Set this to your primary brand color | | `colorBackground` | The color used for the background of inputs, tabs, and other components in the Widget | | `colorText` | The default text color used in the Widget | | `colorDanger` | A color used to indicate errors or destructive actions in the Widget | | `fontVariantLigatures` | The font-variant-ligatures setting of text in the Widget | | `fontVariationSettings` | The font-variation-settings setting of text in the Widget | | `fontWeightLight` | The font weight used for light text | | `fontWeightNormal` | The font weight used for normal text | | `fontWeightMedium` | The font weight used for medium text | | `fontWeightBold` | The font weight used for bold text | | `fontLineHeight` | The line-height setting of text in the Widget | | `fontSizeXl` | The font size of extra-large text in the Widget. By default this is scaled from `var(--fontSizeBase)` using rem units | | `fontSizeLg` | The font size of large text in the Widget. By default this is scaled from `var(--fontSizeBase)` using rem units | | `fontSizeSm` | The font size of small text in the Widget. By default this is scaled from `var(--fontSizeBase)` using rem units | | `fontSizeXs` | The font size of extra-small text in the Widget. By default this is scaled from `var(--fontSizeBase)` using rem units | | `fontSize2Xs` | The font size of double-extra small text in the Widget. By default this is scaled from `var(--fontSizeBase)` using rem units | | `fontSize3Xs` | The font size of triple-extra small text in the Widget. By default this is scaled from `var(--fontSizeBase)` using rem units | | `colorSuccess` | A color used to indicate positive actions or successful results in the Element | | `colorWarning` | A color used to indicate potentially destructive actions in the Element | | `colorPrimaryText` | The color of text appearing on top of any `var(--colorPrimary)` background | | `colorBackgroundText` | The color of text appearing on top of any `var(--colorBackground)` background | | `colorSuccessText` | The color of text appearing on top of any `var(--colorSuccess)` background | | `colorDangerText` | The color of text appearing on top of any `var(--colorDanger)` background | | `colorWarningText` | The color of text appearing on top of any `var(--colorWarning)` background | | `colorTextSecondary` | The color used for text of secondary importance. For example, this color is used for the label of a tab that isn't currently selected | | `colorTextPlaceholder` | The color used for input placeholder text in the Widget | ## 4. Rules The `rules` option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components. After defining your theme and variables, use rules to seamlessly integrate Elements to match the design of your site. The selector for a rule can target any of the public class names in the Element, as well as the supported states, pseudo-classes, and pseudo-elements for each class. For example, the following are valid selectors: * `.Tab`, `.Label`, `.Input`, `.InputLogo`, `.SaveWalletDetailsLabel`, `.OrPayUsingLabel`, `.TermsTextLabel`, `.InfoElement`, `.OrPayUsingLine` * `.Tab:focus` * `.Input--invalid`, `.Label--invalid`, `.InputLogo--invalid` * `.Input::placeholder` * `.billing-section`, `.billing-details-text` * `.Input--empty`, `.InputLogo--empty` Each class name used in a selector supports an allowlist of CSS properties that you specify using camel case (for example, `boxShadow` for the `box-shadow` property). ### Supported Class Names #### Tabs | Class Name | States | Pseudo-Classes | Pseudo-Elements | | ---------- | ------------ | ------------------------------------------ | --------------- | | `.Tabs` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.Tab` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | #### Form Inputs | Class Name | States | Pseudo-Classes | Pseudo-Elements | | ---------- | ---------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | #### Checkbox | Class Name | States | Pseudo-Classes | Pseudo-Elements | | ---------------- | ----------- | -------------- | --------------- | | `.Checkbox` | `--checked` | `:hover` | | | `.CheckboxLabel` | `--checked` | `:hover` | | | `.CheckboxInput` | `--checked` | `:hover` | | #### InputLogo | Class Name | States | Pseudo-Classes | Pseudo-Elements | | ------------ | ---------------------- | -------------- | --------------- | | `.InputLogo` | `--invalid`, `--empty` | `:hover` | | #### Other Elements | Class Name | States | Pseudo-Classes | Pseudo-Elements | | ------------------------- | ------ | -------------- | --------------- | | `.SaveWalletDetailsLabel` | | `:hover` | | | `.OrPayUsingLabel` | | `:hover` | | | `.OrPayUsingLine` | | `:hover` | | | `.TermsTextLabel` | | `:hover` | | | `.InfoElement` | | `:hover` | | ### Example Usage ```javascript theme={"system"} const appearance = { variables: { buttonBackgroundColor: "#FFFFFF", buttonTextColor: "#000000", // ... along with other variables }, rules: { ".TabLabel": { overflowWrap: "break-word", }, ".Tab--selected": { display: "flex", gap: "8px", flexDirection: "row", justifyContent: "center", alignItems: "center", padding: "15px 32px", background: "linear-gradient(109deg,#f48836,#f4364c)", color: "#ffffff", fontWeight: "700", borderRadius: "25px", }, ".Tab--selected:hover": { display: "flex", gap: "8px", flexDirection: "row", justifyContent: "center", alignItems: "center", padding: "15px 32px", background: "linear-gradient(109deg,#f48836,#f4364c)", borderRadius: "25px", color: "#ffffff !important", fontWeight: "700", }, }, }; const elements = hyper.elements({ clientSecret, appearance }); ``` ## 5. Languages vaultera Switch Unified Checkout supports localization in multiple languages. By default, the Unified Checkout SDK will detect the locale of the customer's browser and display the localized version of the payment sheet if that locale is supported. In case it is not supported, we default to English. To override, you can send locale in `hyper.elements(options)`. ### Supported Locales * Arabic (ar) * Catalan (ca) * Chinese (zh) * German (de) * Dutch (nl) * English (en) * English GB (en-GB) * French Belgium (fr-BE) * French (fr) * Hebrew (he) * Italian (it) * Japanese (ja) * Polish (pl) * Portuguese (pt) * Russian (ru) * Spanish (es) * Swedish (sv) If you need support for locales other than the ones mentioned above, please contact the Vaultera Switch team. ## 6. Confirm Button The Styling APIs can be used to blend the Confirm Payment Button (handled by SDK) with your app. | Variable | Description | | ----------------------- | ------------------------------------------------------------------ | | `buttonBackgroundColor` | Sets the background color of the payment button | | `buttonHeight` | Define the height of the payment button | | `buttonWidth` | Specify the width of the payment button | | `buttonBorderRadius` | Adjust the border radius of the payment button for rounded corners | | `buttonBorderColor` | Sets the color of the border surrounding the payment button | | `buttonTextColor` | Define the color of the text displayed on the payment button | | `buttonTextFontSize` | Customize the font size of the text on the payment button | | `buttonTextFontWeight` | Specify the font weight of the text on the payment button | | `buttonBorderWidth` | Specify the border width of the button | ## 7. More Configurations ### Branding You can decide whether to display the Vaultera Switch branding using the `branding` prop: ```javascript theme={"system"} var paymentElementOptions = { // ... branding: "never", // choose between "never" and "always" } ``` ### Payment Methods Header Text Customize the header text for the section displaying available payment methods: ```javascript theme={"system"} var paymentElementOptions = { // ... paymentMethodsHeaderText: "Select Payment Method", } ``` ### Saved Payment Methods Header Text Customize the header text for the section displaying saved payment methods: ```javascript theme={"system"} var paymentElementOptions = { // ... savedPaymentMethodsHeaderText: "Saved Payment Methods", } ``` ### Custom Message for Card Terms We provide a default message for card terms: ``` By providing your card information, you allow ${company_name} to charge your card for future payments in accordance with their terms. ``` If you would like to customize this message, you can do so by using the `customMessageForCardTerms` property: ```javascript theme={"system"} var paymentElementOptions = { // ... customMessageForCardTerms: "Custom message for Card terms", } ``` ### Hide Card Nickname Field The `hideCardNicknameField` property allows you to hide the card nickname field when saving a card: ```javascript theme={"system"} var paymentElementOptions = { // ... hideCardNicknameField: true, // default - false }; ``` ### Hide Expired Saved Payment Methods The `hideExpiredPaymentMethods` property allows you to control whether expired saved payment methods are hidden or not: ```javascript theme={"system"} var paymentElementOptions = { // ... hideExpiredPaymentMethods: false, // default - false }; ``` ### Show Card Form by Default The `showCardFormByDefault` property determines whether the card form is displayed by default or not: ```javascript theme={"system"} var paymentElementOptions = { // ... showCardFormByDefault: true, }; ``` ### Terms The `terms` property allows you to configure the display of terms for various payment methods: ```javascript theme={"system"} var paymentElementOptions = { // ... terms: { auBecsDebit: "always", bancontact: "auto", card: "never", ideal: "auto", sepaDebit: "always", sofort: "never", usBankAccount: "auto", }, }; ``` ### Display Saved Payment Methods The `displaySavedPaymentMethods` property determines whether saved payment methods are displayed: ```javascript theme={"system"} var paymentElementOptions = { // ... displaySavedPaymentMethods: false, }; ``` ### Display Saved Payment Methods Checkbox The `displaySavedPaymentMethodsCheckbox` property determines whether the "Save payment methods" checkbox is displayed: ```javascript theme={"system"} var paymentElementOptions = { // ... displaySavedPaymentMethodsCheckbox: false, }; ``` ### Payment Method Order The `paymentMethodOrder` property allows you to specify the order in which payment methods are displayed: ```javascript theme={"system"} var paymentElementOptions = { // ... paymentMethodOrder: ["card", "ideal", "sepaDebit", "sofort"], }; ``` ### Business The `business` property allows you to specify a business name to be attached to the terms. By default, the merchant name will be taken as the business name: ```javascript theme={"system"} var paymentElementOptions = { // ... business: { name: "Example Business", }, }; ``` ### Read Only The `readOnly` property puts the SDK into read-only mode, disabling all interactions: ```javascript theme={"system"} var paymentElementOptions = { // ... readOnly: true, }; ``` ### Show Short Surcharge Message The `showShortSurchargeMessage` property allows merchants to display a short message when a surcharge is applied, instead of the default message provided by the SDK. The short message format will be: **Fee: {Currency} {Amount}** ```javascript theme={"system"} var paymentElementOptions = { // ... showShortSurchargeMessage: true, // default - false }; ``` Now you can test the payments on your app and go live!