Style Options and Guidelines
To provide a consistent experience to Fastlane payers, the following constraints have been enforced on the styling:
Payment Component UI
| Value | Description | Default | Minimum | Maximum | Guidance and Thresholds |
|---|---|---|---|---|---|
| root.backgroundColor | the background color of the components. | #ffffff | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| root.errorColor | The color of errors in the components. | #D9360B | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| root.fontFamily | The font family used throughout the UI. | PayPal-Open | N/A | N/A |
Must be one of the following: Arial,
Verdana, Tahoma, Trebuchet MS,
Times New Roman, Georgia,
Garamond, Courier New, or
Brush Script MT.
|
| root.fontSizeBase | The base font size. Increasing this value will change the text size of all text within the UI components. | 16px | 13px | 24px | |
| root.textColorBase | The text color used across all text outside of inputs. | #010B0D | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| root.padding | The padding between content and borders. | 4px | 0px | 10px |
May be any value between 0px and 10px.
|
| root.primaryColor | This value sets the default for the checkbox for billing address, and the link for the “change”, the toggle primary color, and the legal links for privacy and terms. | #0057FF | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| input.backgroundColor | the background color of the inputs within the components. | #ffffff | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| input.borderRadius | The border radius used for the email field. | 0.25em | 0px | 32px | Any value between 0px and 32px. |
| input.borderColor | The border color of the email field. | #DADDDD | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| input.focusBorderColor | The border color of the email field when focused. | #0057FF | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
| input.borderWidth | The width of the input borders. | 1px | 1px | 5px | Any value between 1px and 5px. |
| input.textColorBase | The text color used for text within input fields. | #010B0D | N/A | N/A | May be any valid CSS color. Transparency is not supported. |
Loading Card Assets
| Card brand | Image URL |
|---|---|
| Amex |  |
| Diners Club | |
| Discover |  |
| JCB |  |
| Mastercard |  |
| Union Pay |  |
| Visa |  |