Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt

Use this file to discover all available pages before exploring further.

Customize your Android Unified checkout
You can customize the Android Unified Checkout to support your checkout context and brand guidelines by changing fonts, colors, shapes and layouts.
Create a PaymentSheet.Configuration object with an appearance object in order to be able to match the design of your app.

​
Fonts

Set typography.fontResId to your custom font’s resource ID to customize your font. Set a typography.sizeScaleFactor multiplier to increase or decrease the font size: 
val appearance = PaymentSheet.Appearance(
  typography = PaymentSheet.Typography(10.0f, R.font.MY_FONT)
)

​
Colors

Modify the color categories in PaymentSheet.Colors to customize the colors on the mobile payment sheet as follows:
Color CategoryUsage
appBarIconColor used for icons in the payment page ex: close (x) button
componentBackground color of inputs, tabs and other components
componentBorderBorder color for inputs, tabs and other components
componentDividerColor for divider lines used inside inputs, tabs and other components
errorColor for error messages to the user on the payment page
onComponentColor of text and other elements inside components
onSurfaceColor for items appearing on the surface of the payment page, Ex: text prompts
placeholderTextColor for input fields placeholder text
primaryThe primary color to be used across the payment page
subtitleColor of secondary text like prompts for input fields
surfaceColor of the payment page

​
Shapes

Modify the corner radius and border width used across the payment page using appearance.shapes.
Shape CategoryUsage
borderStrokeWidthDpWidth of the border used across input fields, tabs and other components of the payment page
cornerRadiusDpCorner radius of the input fields, tabs and other components

​
Next Steps

Now you can test the payments on your app and go-live!