# Customisation

Learn about customisation options for the PayPal component.

## Overview

The PayPal component comes with responsive and accessible default styling, but is designed to be customisable.

You can find PayPal's official rules around button styling in their JavaScript SDK reference.

### Default styling

By default, the following styling is applied to the PayPal component:


```
style: {
 layout: 'vertical',
 color: 'gold',
 shape: 'rect',
 label: 'paypal',
 tagline: true,
 height: 55,          
 borderRadius: 4
}
```

## Configuration options


```typescript
style: {
  layout: 'vertical' | 'horizontal',        
  color: 'gold' | 'blue' | 'silver' | 'white' | 'black',
  shape: 'rect' | 'pill' | 'sharp',       
  borderRadius: number,                   
  height: number,                         
  disableMaxHeight: boolean,              
  disableMaxWidth: boolean,               
  label: 'paypal' | 'checkout' | 'buynow' | 'pay', 
  tagline: boolean                         
},
message: { 
  amount: number,                         
  align: 'center' | 'left' | 'right',    
  color: 'black' | 'white',              
  position: 'top' | 'bottom'            
}
```

| Property | Description |
|  --- | --- |
| `style`object | Details about the styling options. |
| `style.layout`string (enum) | The layout of the PayPal button.  Possible values:  `vertical``horizontal` |
| `style.color`string (enum) | The colour of the PayPal button.  Possible values:`gold``blue``silver``white``black` |
| `style.shape`string (enum) | The shape of the PayPal button. Note: if `style.borderRadius` and `style.shape` are both defined, `style.borderRadius` takes priority. Possible values: `rect``pill``sharp` |
| `style.borderRadius`number | The border radius of the PayPal button, in pixels. Note: if `style.borderRadius` and `style.shape` are both defined, `style.borderRadius` takes priority. |
| `style.height`number | The height of the PayPal button, in pixels. |
| `style.disableMaxHeight`boolean | Whether to disable the maximum height of the PayPal button. |
| `style.disableMaxWidth`boolean | Whether to disable the maximum width of the PayPal button. |
| `style.label`string (enum) | The label of the PayPal button.Possible values:`paypal``checkout``buynow``pay` |
| `style.tagline`boolean | Whether to show the tagline of the PayPal button. Set the `style.layout` to horizontal for taglines. |
| `message`object | Configuration for the messaging for the most relevant Pay Later offer for every purchase. If provided, replaces the `style.tagline`. |
| `message.amount`number | Use this option to show the most relevant offer and price breakdown to your customers. Set this to a number that is greater than 0. This value should reflect the current product or cart value that will be used once a checkout session has started. |
| `message.align`string (enum) | The alignment of the message, in relation to the button(s).  Possible values:`center``left``right` |
| `message.color`string (enum) | The colour of the message.Possible values:`black``white` |
| `message.position`string (enum) | The position of the message, in relation to the button(s).Possible values:`top``bottom` |


## Example


```typescript
{
  payeeEmailAddress: "john.doe@pxp.io",
  paymentDescription: "",
  shippingPreference: "SET_PROVIDED_ADDRESS",
  userAction: "PAY_NOW",
  renderType: "standalone"
  fundingSources: "paypal",
  style: {
    layout: "horizontal",
    color: "blue",
    shape: "rect",
    borderRadius: 12,
    height: 64,
    disableMaxHeight: false,
    disableMaxWidth: false,
    label: "pay",
    tagline: false,
  },
  message: {
   amount: 20,
   align: "left",
   color: "black",
   position: "top"
  }
}
```