> ## Documentation Index
> Fetch the complete documentation index at: https://docs.y.uno/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Customize the visual appearance of the SDK's built-in views.

Match the SDK's built-in views to your brand.

<Note>
  There are **two ways** to style the SDK:

  * **In code (iOS and Android):** pass an `Appearance` object on the `TransactionConfig` (covered below). Web has no `appearance` option. See the Web tab for what you style in code.
  * **From the Checkout Builder:** configure styles server-side in your [Yuno Dashboard](https://dashboard.y.uno/), no code needed.

  If you set neither, the SDK falls back to its default styles.
</Note>

<Tabs>
  <Tab title="Web">
    The Web SDK renders into your page as regular DOM, so you style it with CSS plus a few config fields. There is no `appearance` object on Web.

    ## What you can style

    | Lever | Where | What it changes |
    | - | - | - |
    | Checkout Builder | Yuno Dashboard | Colors, fonts, and button shape of the built-in views. The SDK applies them on every mount, no code needed. |
    | CSS classes with the `sdk-payments-` prefix | Your stylesheet | Every element the SDK renders on your page carries a class with that prefix, for example `sdk-payments-payment-list__radio`, `sdk-payments-fieldset__box`, and `sdk-payments-input__label`. Target them from your own CSS. |
    | `card.styles` | `TransactionConfig` | A CSS string injected inside the card number, expiry, and CVV iframes, which your page CSS cannot reach. |
    | `card.fonts` | `TransactionConfig` | Fonts to load inside the card iframes. |
    | `inputDesignType` | `TransactionConfig` (payments only) | Label layout of the inputs: `float-label` (default), `float-label-static`, or `label-placeholder`. |
    | Wallet button options | `mount()` of each wallet view, or `externalButtons` on the config | Type, color, shape, size, and locale of the Apple Pay, Google Pay, PayPal, Samsung Pay, and Revolut Pay buttons. |
    | `options.styles` | `secureFields.create()` | CSS inside each secure field iframe. |

    ## Usage

    ```typescript theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
    const transaction = sdkPayments.transaction({
        checkoutSession: 'session-from-backend',
        countryCode: 'CO',
        inputDesignType: 'float-label',
        card: {
            styles: 'input { font-family: Inter, sans-serif; color: #111; }',
        },
        onStatus: (result) => showResult(result),
    })
    ```
  </Tab>

  <Tab title="iOS">
    Build a `SdkPayments.Appearance` with the fields you want to override and pass it to `TransactionConfig(appearance:)`. Every field is optional; unset fields fall back to the SDK default.

    ## Appearance fields

    | Field | Description |
    | - | - |
    | `fontFamily` | Font family used across the SDK. Provide the font name as registered in your app's assets. |
    | `accentColor` | Accent color used across several SDK elements. |
    | `buttonBackgroundColor` | Background color of primary buttons. |
    | `buttonTitleColor` | Text color of primary buttons. |
    | `buttonBorderColor` | Border color of primary buttons. |
    | `secondaryButtonBackgroundColor` | Background color of secondary buttons. |
    | `secondaryButtonTitleColor` | Text color of secondary buttons. |
    | `secondaryButtonBorderColor` | Border color of secondary buttons. |
    | `disableButtonBackgroundColor` | Background color of disabled buttons. |
    | `disableButtonTitleColor` | Text color of disabled buttons. |
    | `checkboxColor` | Color of checkboxes shown in the SDK (e.g. save card). |

    <Note>
      All colors must be `UIColor` (from Xcode's asset catalog or your own assets) to stay compatible.
    </Note>

    ## How styles are resolved

    Setting **any** `Appearance` field makes it the active style source for the transaction: dashboard styles are then ignored entirely. Resolution is all-or-nothing per source, never a field-by-field merge. An empty `Appearance()` does not count as custom, so dashboard styles still apply. Any custom appearance (in code or from the dashboard) renders in light mode.

    ## Usage

    Appearance is per-transaction: pass it on each `TransactionConfig`, not at `initialize`.

    ```swift theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
    import SdkPayments

    let appearance = SdkPayments.Appearance(
        fontFamily: "Climate Crisis",
        accentColor: .orange,
        buttonBackgroundColor: .yellow,
        buttonTitleColor: .black,
        buttonBorderColor: .black,
        secondaryButtonBackgroundColor: .yellow,
        secondaryButtonTitleColor: .black,
        secondaryButtonBorderColor: .black,
        disableButtonBackgroundColor: .gray,
        disableButtonTitleColor: .black,
        checkboxColor: .black
    )

    let config = SdkPayments.TransactionConfig(
        checkoutSession: "session-from-backend",
        countryCode: "US",
        appearance: appearance,
        controller: self
    )

    SdkPayments.Transaction(config: config)
        .start(paymentSelected: paymentSelected)
    ```
  </Tab>

  <Tab title="Android">
    Build an `Appearance` with the fields you want to override and pass it to `TransactionConfig(appearance = ...)`. Every field is optional; unset fields fall back to the SDK default.

    ## Appearance fields

    | Field | Description |
    | - | - |
    | `fontFamily` | Font family used across the SDK. Resolved against the system fonts and the fonts configured in your dashboard; a name that cannot be resolved falls back to the device's default system font. |
    | `accentColor` | Accent color used on focus strokes and cursors. It does not cascade into checkboxes or secondary button borders — those have their own fields. |
    | `buttonBackgroundColor` | Background color of primary buttons. |
    | `buttonTitleColor` | Text color of primary buttons. |
    | `buttonBorderColor` | Border color of primary buttons. |
    | `secondaryButtonBackgroundColor` | Background color of secondary buttons. |
    | `secondaryButtonTitleColor` | Text color of secondary buttons. |
    | `secondaryButtonBorderColor` | Border color of secondary buttons. |
    | `disableButtonBackgroundColor` | Background color of disabled buttons. |
    | `disableButtonTitleColor` | Text color of disabled buttons. |
    | `checkboxColor` | Color of checkboxes shown in the SDK (e.g. save card). |

    <Note>
      All colors are `@ColorInt` integers — use `Color.parseColor("#FFD600")`, `ContextCompat.getColor(context, R.color.brand)`, or the `android.graphics.Color` constants.
    </Note>

    ## How styles are resolved

    Setting **any** `Appearance` field makes it the active style source for the transaction: dashboard styles are then ignored entirely — resolution is all-or-nothing per source, never a field-by-field merge. An empty `Appearance()` does not count as custom, so dashboard styles still apply. Any custom appearance (in code or from the dashboard) renders in light mode.

    The SDK does not bundle a font of its own: with no `fontFamily` in code and no font configured in the dashboard, text renders with the device's default system font.

    ## Usage

    Appearance is per-transaction: pass it on each `TransactionConfig`, not at `initialize`.

    ```kotlin theme={"theme":{"light":"github-dark","dark":"github-dark-dimmed"}}
    import android.graphics.Color
    import com.yuno.payments.sdk.api.Appearance
    import com.yuno.payments.sdk.api.Transaction
    import com.yuno.payments.sdk.api.TransactionConfig

    val appearance = Appearance(
        fontFamily = "Climate Crisis",
        accentColor = Color.parseColor("#E65100"),
        buttonBackgroundColor = Color.parseColor("#FFD600"),
        buttonTitleColor = Color.BLACK,
        buttonBorderColor = Color.BLACK,
        secondaryButtonBackgroundColor = Color.parseColor("#FFD600"),
        secondaryButtonTitleColor = Color.BLACK,
        secondaryButtonBorderColor = Color.BLACK,
        disableButtonBackgroundColor = Color.GRAY,
        disableButtonTitleColor = Color.BLACK,
        checkboxColor = Color.BLACK,
    )

    val transaction = Transaction(
        TransactionConfig(
            countryCode = "US",
            checkoutSession = "session-from-backend",
            appearance = appearance,
            controller = this,
        ),
    )

    transaction.start(activity = this, paymentSelected = paymentSelected)
    ```
  </Tab>
</Tabs>

## Related

* [`TransactionConfig`](/docs/yuno-sdk/reference/objects-you-pass#transaction-config). Where `appearance` is passed.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.