Learn about customisation options for the PayPal component.
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.
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
}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 |
|---|---|
styleobject | Details about the styling options. |
style.layoutstring (enum) | The layout of the PayPal button. Possible values:
|
style.colorstring (enum) | The colour of the PayPal button. Possible values:
blue |
style.shapestring (enum) | The shape of the PayPal button. Note: if style.borderRadius and style.shape are both defined, style.borderRadius takes priority. Possible values:
|
style.borderRadiusnumber | The border radius of the PayPal button, in pixels. Note: if style.borderRadius and style.shape are both defined, style.borderRadius takes priority. |
style.heightnumber | The height of the PayPal button, in pixels. |
style.disableMaxHeightboolean | Whether to disable the maximum height of the PayPal button. |
style.disableMaxWidthboolean | Whether to disable the maximum width of the PayPal button. |
style.labelstring (enum) | The label of the PayPal button. Possible values:
|
style.taglineboolean | Whether to show the tagline of the PayPal button. Set the style.layout to horizontal for taglines. |
messageobject | Configuration for the messaging for the most relevant Pay Later offer for every purchase. If provided, replaces the style.tagline. |
message.amountnumber | 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.alignstring (enum) | The alignment of the message, in relation to the button(s). Possible values:
|
message.colorstring (enum) | The colour of the message. Possible values:
|
message.positionstring (enum) | The position of the message, in relation to the button(s). Possible values:
|
{
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"
}
}