Customization

iOS Unified Checkout Customization

[!warning] Beta in Progress – The beta version is under active development and coming soon to our platform.

You can customize the iOS 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 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.

var configuration = PaymentSheet.Configuration()
configuration.appearance?.font?.base = UIFont(name: "Helvetica", size: UIFont.systemFontSize)!
configuration.allowsDelayedPaymentMethods = true
configuration.defaultBillingDetails = [
    "address": [
        "city": "San Francisco",
        "country": "US",
        "line1": "1467",
        "line2": "Harrison Street",
        "postalCode": "94122",
        "state": "California"
    ],
    "email": "johndoe@pesaswap.com",
    "name": "John",
    "phone": "1234567890"
]

Colors

Modify the color categories in PaymentSheet.Colors to customize the colors on the mobile payment sheet as follows:

Color Category	Usage
`appBarIcon`	Color used for icons in the payment page (e.g., close (x) button)
`component`	Background color of inputs, tabs, and other components
`componentBorder`	Border color for inputs, tabs, and other components
`componentDivider`	Color for divider lines used inside inputs, tabs, and other components
`error`	Color for error messages to the user on the payment page
`onComponent`	Color of text and other elements inside components
`onSurface`	Color for items appearing on the surface of the payment page (e.g., text prompts)
`placeholderText`	Color for input fields placeholder text
`primary`	The primary color to be used across the payment page
`subtitle`	Color of secondary text like prompts for input fields
`surface`	Color of the payment page

Shapes

Modify the corner radius and border width used across the payment page using appearance.shapes.

Shape Category	Usage
`borderStrokeWidthDp`	Width of the border used across input fields, tabs, and other components of the payment page
`cornerRadiusDp`	Corner radius of the input fields, tabs, and other components

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

About Pesaswap

Payments Guide

Integrations

Foreign Exchange

Account Setup

Use Cases

Explore Pesaswap

Checklist for Production

FAQ

iOS Unified Checkout Customization

Fonts

Colors

Shapes

​iOS Unified Checkout Customization

​Fonts

​Colors

​Shapes

iOS Unified Checkout Customization

Fonts

Colors

Shapes