Overview

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

ℹ️
You can find PayPal's official recommendations 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

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

{
  payeeEmailAddress: "[email protected]",
  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"
  }
}