There are two ways to style the SDK:
- In code (iOS and Android): pass an
Appearanceobject on theTransactionConfig(covered below). Web has noappearanceoption. 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.
- Web
- iOS
- Android
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
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),
})
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 anyAppearance 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 eachTransactionConfig, 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 anyAppearance 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 eachTransactionConfig, 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)
Related
TransactionConfig. Whereappearanceis passed.