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 |  |