Skip to main content

PurseHeadlessCheckoutGetPaymentElementOptions

Shortcut options accepted by HeadlessCheckout.getPaymentElement.

Use this to instantiate a payment element directly from the checkout instance, without going through paymentMethods → find → getPaymentElement.

  • hostedForm and hostedFields are mutually exclusive. If both are provided, hostedForm wins and a warning is emitted.
  • method is required for hostedForm; it is optional when only hostedFields is provided (the first compatible method on partner is picked).
  • A warning is emitted when hostedFields is requested but the resolved method does not support hosted fields.
  • Throws PAYMENT_METHOD_NOT_FOUND if no matching method exists.

Properties​

hostedFields?​

optional hostedFields?: object & object;

Hosted fields configuration — see HostedFieldsUIOptions.fields.

Type Declaration​

brandSelector?​
optional brandSelector?: HostedFieldOptions;
cardNumber?​
optional cardNumber?: HostedFieldOptions;
expDate?​
optional expDate?: HostedFieldOptions;
holderName?​
optional holderName?: HostedFieldOptions;

Type Declaration​

cvv​
cvv: HostedFieldOptions;

hostedForm?​

optional hostedForm?: PurseHeadlessCheckoutHostedFormUIOptions;

Hosted form configuration — see HostedFormUIOptions.

locale?​

optional locale?: string;

Locale code (e.g. 'fr-FR').

method?​

optional method?: string;

Method identifier (e.g. 'creditcard'). Optional only when using hostedFields.

partner​

partner: string;

Partner identifier (e.g. 'ingenico', 'hipay').

theme?​

optional theme?: 
  | HostedFieldsTheme
  | {
  global?: {
     :invalid?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        gap?: string;
     };
     :valid?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        gap?: string;
     };
     color?: string;
     fontFamily?: string;
     fontSize?: string;
     fontSrc?: string;
     fontWeight?: string;
     gap?: string;
  };
  helperText?: {
     :disabled?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        margin?: string;
     };
     :invalid?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        margin?: string;
     };
     :valid?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        margin?: string;
     };
     color?: string;
     fontFamily?: string;
     fontSize?: string;
     fontWeight?: string;
     margin?: string;
  };
  input?: {
     :-webkit-autofill?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     ::placeholder?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     ::placeholder:disabled?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     :focus?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     :hover?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     :invalid?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     :valid?: {
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: string;
        borderStyle?: string;
        borderWidth?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontStyle?: string;
        fontWeight?: string;
        outlineColor?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        padding?: string;
     };
     backgroundColor?: string;
     borderColor?: string;
     borderRadius?: string;
     borderStyle?: string;
     borderWidth?: string;
     boxShadow?: string;
     color?: string;
     fontFamily?: string;
     fontSize?: string;
     fontStyle?: string;
     fontWeight?: string;
     outlineColor?: string;
     outlineStyle?: string;
     outlineWidth?: string;
     padding?: string;
  };
  label?: {
     :invalid?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        margin?: string;
     };
     :valid?: {
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        margin?: string;
     };
     color?: string;
     fontFamily?: string;
     fontSize?: string;
     fontWeight?: string;
     margin?: string;
  };
  tooltip?: {
     :focus?: {
        backgroundColor?: string;
        borderRadius?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        padding?: string;
     };
     :invalid?: {
        backgroundColor?: string;
        borderRadius?: string;
        boxShadow?: string;
        color?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
        padding?: string;
     };
     backgroundColor?: string;
     borderRadius?: string;
     boxShadow?: string;
     color?: string;
     fontFamily?: string;
     fontSize?: string;
     fontWeight?: string;
     padding?: string;
  };
};

Theme overrides — passed through as-is to the underlying element.