Customization

Both the Drop-in and the Components offer a number of customization options to allow you to match the appearance of your app.

For example, to change the section header titles and form field titles in the Drop-in to red, and turn the submit button's background to black with white foreground:

var style = DropInComponent.Style()
style.listComponent.sectionHeader.title.color = .red
style.formComponent.textField.title.color = .red
style.formComponent.mainButtonItem.button.backgroundColor = .black
style.formComponent.mainButtonItem.button.title.color = .white

let dropInComponent = DropInComponent(paymentMethods: paymentMethods,
                                      configuration: configuration,
                                      style: style)
dropInComponent.delegate = session

Or, to create a black Card Component with white text:

var style = FormComponentStyle()
style.backgroundColor = .black
style.header.title.color = .white
style.textField.title.color = .white
style.textField.text.color = .white
style.switch.title.color = .white

let component = CardComponent(paymentMethod: paymentMethod,
                              context: context,
                              style: style)
component.delegate = session

Customization

Customization

On this page