Skip to main content

PurseHeadlessCheckoutXPayButtonUIOptions

Apple, Google and PayPal buttons are treated differently and all the config is exposed through this object.

Properties​

apple?​

optional apple?: object;

borderRadius?​

optional borderRadius?: string;

buttonstyle?​

optional buttonstyle?: "black" | "white" | "white-outline";

height?​

optional height?: string;

label?​

optional label?: string;

Text preceding the Apple Pay logo, on partners rendering their own button label (e.g. Lyra smart form). Native Apple Pay buttons ignore it, they carry their own localized wording. Defaults to a locale-based translation.

Example​
'Buy with'

locale?​

optional locale?: string;

Locale code is a combination of ISO 639-1 language code and ISO 3166-1 country code . For example, fr_FR is a locale code for French language in France.

Example​
'fr-FR'

padding?​

optional padding?: string;

type?​

optional type?: 
  | "plain"
  | "buy"
  | "donate"
  | "check-out"
  | "book"
  | "subscribe"
  | "add-money"
  | "contribute"
  | "order"
  | "reload"
  | "rent"
  | "support"
  | "tip"
  | "top-up";

width?​

optional width?: string;

google?​

optional google?: Partial<Pick<ButtonOptions, 
  | "buttonColor"
  | "buttonType"
  | "buttonLocale"
  | "buttonRadius"
  | "buttonSizeMode">> & object;

Type Declaration​

height?​
optional height?: number;
label?​
optional label?: string;

Text preceding the Google Pay logo, on partners rendering their own button label (e.g. Lyra smart form). Native Google Pay buttons ignore it, they carry their own localized wording. Defaults to a locale-based translation.

Example​
'Buy with'

paypal?​

optional paypal?: object;

borderRadius?​

optional borderRadius?: number;

Corner radius of the button, in pixels. Takes precedence over shape. See https://developer.paypal.com/sdk/js/reference/#borderRadius

color?​

optional color?: "black" | "white" | "silver" | "gold" | "blue";

disableMaxWidth?​

optional disableMaxWidth?: boolean;

When true, removes the max-width constraint applied by PayPal on the button container. See https://developer.paypal.com/sdk/js/reference/#width

height?​

optional height?: number;

label?​

optional label?: 
  | "paypal"
  | "checkout"
  | "donate"
  | "subscribe"
  | "buynow"
  | "pay"
  | "installment";

Button wording. paypal renders the wordmark alone and is the default; installment was dropped by the PayPal JS SDK v6 and falls back to it.

layout?​

optional layout?: "vertical" | "horizontal";
Deprecated​

Ignored since the migration to PayPal JS SDK v6: layout was a property of the v5 multi-button paypal.Buttons() container, and v6 renders exactly one button web component per <purse-partner-ui> element. Kept for source compatibility — remove on the next breaking release.

shape?​

optional shape?: "rect" | "pill" | "sharp";

revolut?​

optional revolut?: object;

Revolut Pay button, passed to the Revolut Web SDK as buttonStyle. See https://developer.revolut.com/docs/sdks/merchant-web-sdk/payment-methods/revolut-pay

action?​

optional action?: "buy" | "donate" | "subscribe" | "pay";

Button wording.

cashback?​

optional cashback?: boolean;

Shows Revolut's "new users get up to …" cashback banner under the button. Defaults to false.

height?​

optional height?: string;

CSS length, e.g. '48px'. Defaults to the height of the container.

radius?​

optional radius?: "none" | "small" | "large" | "round";

size?​

optional size?: "small" | "large";

variant?​

optional variant?: "dark" | "light" | "light-outlined";