Styling

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

There are two ways to style the SDK:

In code (iOS, Android and React Native): 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, no code needed.

If you set neither, the SDK falls back to its default styles.

Web
iOS
Android
React Native

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. 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.
`card.texts`	`TransactionConfig`	Custom labels for card form fields.
`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.
`options.externalFonts`	`secureFields.create()`	Fonts to load inside each secure field iframe.

CSS classes

Every element the SDK renders on your page carries a class with the sdk-payments- prefix. Target them from your stylesheet to customize colors, spacing, borders, and other visual properties. Common classes include:

Class pattern	What it styles
`sdk-payments-payment-list__*`	Payment method list container and rows
`sdk-payments-fieldset__*`	Form field containers and boxes
`sdk-payments-input__*`	Input fields and labels
`sdk-payments-button__*`	Buttons
`sdk-payments-card__*`	Card form elements

/* Example: customize the payment method list and inputs */
.sdk-payments-payment-list__radio {
    border-radius: 8px;
    margin-bottom: 8px;
}

.sdk-payments-input__label {
    color: #333;
    font-weight: 500;
}

.sdk-payments-user-form__submit {
    background-color: #6200ee;
    border-radius: 24px;
}

CSS classes may change between SDK versions. Inspect the rendered DOM in your browser’s developer tools to find the current class names.

Styling card iframes

Card number, expiry, and CVV render inside iframes for PCI compliance. Your page CSS cannot reach them. Use card.styles to inject CSS and card.fonts to load custom fonts inside the iframes.

const transaction = sdkPayments.transaction({
    checkoutSession: 'session-from-backend',
    countryCode: 'CO',
    card: {
        styles: `
            input {
                font-family: 'Inter', sans-serif;
                font-size: 16px;
                color: #111;
            }
            input::placeholder {
                color: #999;
            }
            input:focus {
                border-color: #6200ee;
            }
        `,
        fonts: [
            {
                familyName: 'Inter',
                files: [
                    { weight: 400, url: 'https://cdn.example.com/fonts/inter-400.woff2' },
                    { weight: 600, url: 'https://cdn.example.com/fonts/inter-600.woff2' },
                ],
            },
        ],
    },
    onStatus: (result) => showResult(result),
})

Custom fonts

card.fonts loads font files inside the card iframes. It does not apply them: reference the family by name in card.styles, as in the example above.

Field	Type	Description
`familyName`	string	Family name you reference from `font-family` in `card.styles`.
`files`	array	One entry per weight.
`files[].weight`	number	Font weight of the file, for example `400` or `600`.
`files[].url`	string	URL of the font file, for example a `.woff2`.

The iframes load the files from a different origin than your page, so the font host must allow cross-origin requests (send an Access-Control-Allow-Origin header). If a file fails to load, the field falls back to the next font in your font-family stack.

Input design types

The inputDesignType field controls how labels and placeholders appear on form inputs:

Value	Behavior
`float-label` (default)	Label floats above the input when focused or filled.
`float-label-static`	Label stays above the input at all times.
`label-placeholder`	Label appears as placeholder text inside the input.

const transaction = sdkPayments.transaction({
    checkoutSession: 'session-from-backend',
    countryCode: 'CO',
    inputDesignType: 'float-label-static',
    onStatus: (result) => showResult(result),
})

Wallet button options

Customize express wallet buttons through the mount() options or externalButtons on the config:

const views = transaction.getPaymentMethodsViews({
    types: ['applePay', 'googlePay'],
    onPaymentSelected: (pm) => { /* ... */ },
})

views.applePay?.mount({
    elementSelector: '#apple-pay',
    buttonType: 'buy',       // 'plain', 'buy', 'book', 'donate', etc.
    buttonStyle: 'black',    // 'black', 'white', 'white-outline'
})

views.googlePay?.mount({
    elementSelector: '#google-pay',
    buttonColor: 'black',    // 'black', 'white'
    buttonType: 'pay',       // 'pay', 'buy', 'book', 'donate', etc.
})

Secure fields styling

For Secure Fields, pass styles and externalFonts in the options of each field when you create it:

const cardNumber = secureFields.create({
    name: 'pan',
    options: {
        placeholder: 'Card number',
        styles: `
            input {
                font-family: 'Inter', sans-serif;
                font-size: 16px;
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 12px;
            }
        `,
        externalFonts: [
            {
                family_name: 'Inter',
                files: [{ weight: 400, url: 'https://cdn.example.com/fonts/inter-400.woff2' }],
            },
        ],
    },
})

cardNumber.mount('#pan')

Each field is its own iframe, so pass externalFonts to every field that uses the font. The entries have the same shape as card.fonts, but the family key is family_name (snake case), not familyName. The same cross-origin requirement applies.

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).

All colors must be UIColor (from Xcode’s asset catalog or your own assets) to stay compatible.

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.

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)

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).

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

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.

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)

Pass an Appearance object on the TransactionConfig. It has the same fields as on iOS and Android, every field is optional, and styles resolve as on the native SDK of the platform (see the iOS and Android tabs). Colors are hex strings, #RRGGBB or #AARRGGBB, converted to the native color types. fontFamily must name a font your native app can load.Appearance is per-transaction: pass it on each TransactionConfig, not at initialize.

const transaction = new Transaction({
  checkoutSession: 'session-from-backend',
  countryCode: 'US',
  appearance: {
    fontFamily: 'Climate Crisis',
    accentColor: '#E65100',
    buttonBackgroundColor: '#FFD600',
    buttonTitleColor: '#000000',
    buttonBorderColor: '#000000',
    secondaryButtonBackgroundColor: '#FFD600',
    secondaryButtonTitleColor: '#000000',
    secondaryButtonBorderColor: '#000000',
    disableButtonBackgroundColor: '#9E9E9E',
    disableButtonTitleColor: '#000000',
    checkboxColor: '#000000',
  },
  controller,
});

await transaction.start(paymentSelected);

TransactionConfig. Where appearance is passed.

Start here

Guides

Listen and take over

API reference

Upgrade from older SDKs

What you can style

CSS classes

Styling card iframes

Custom fonts

Input design types

Wallet button options

Secure fields styling

Appearance fields

How styles are resolved

Usage

Appearance fields

How styles are resolved

Usage

​What you can style

​CSS classes

​Styling card iframes

​Custom fonts

​Input design types

​Wallet button options

​Secure fields styling

​Appearance fields

​How styles are resolved

​Usage

​Appearance fields

​How styles are resolved

​Usage

​Related

What you can style

CSS classes

Styling card iframes

Custom fonts

Input design types

Wallet button options

Secure fields styling

Appearance fields

How styles are resolved

Usage

Appearance fields

How styles are resolved

Usage

Related