Skip to main content

PurseHeadlessCheckoutPrimaryMethod

Represents a primary payment method in the Purse checkout system. Primary methods are the main payment options like credit cards, digital wallets, or bank transfers.

Example​

// Get payment element for a primary method
const primaryMethod: PurseHeadlessCheckoutPrimaryMethod = ...
const element = await primaryMethod.getPaymentElement({
  hostedForm: {
    panPlaceholder: 'Enter your card number',
    cvvPlaceholder: 'Enter your CVV'
    // Add more options here
  }
});

// Mount the payment element to your UI
element.appendTo('#payment-container');

Extends​

Extended by​

Properties​

canBeRegistered​

canBeRegistered: boolean;

This property exposes the saveToken configuration of the method. A mean of payment cannot be saved if the method is not registerable.

Inherited from​

PurseHeadlessCheckoutRegisterable.canBeRegistered

disabled​

disabled: Writable<DisabledState | null>;

Indicates if the payment method is disabled with an error code and message DisabledState error code and message

Inherited from​

PurseHeadlessCheckoutMethod.disabled

id​

id: string;

Unique identifier of the payment method

Examples​

'hipay-bancontact'
'illicado-giftcard'
'aci-creditcard'

Inherited from​

PurseHeadlessCheckoutMethod.id

integrationType?​

optional integrationType: "redirection" | "popup";

Some partners are available under several forms For instance paypal or klarna can exist as a redirection or as a popup

isSecondary​

isSecondary: false;

Indicates if the payment method is a secondary mean of payment

Overrides​

PurseHeadlessCheckoutMethod.isSecondary

limit​

limit: number | null;

Amount limit for the payment method (null if no limit)

Inherited from​

PurseHeadlessCheckoutMethod.limit

maxAmount​

maxAmount: number | null;

Maximum amount to use the payment method

Inherited from​

PurseHeadlessCheckoutMethod.maxAmount

method​

method: string;

Type of payment method, it can be a card, a wallet, a bank transfer, etc.

Examples​

'applepay'
'googlepay'
'creditcard'

Inherited from​

PurseHeadlessCheckoutMethod.method

minAmount​

minAmount: number | null;

Minimum amount to use the payment method

Inherited from​

PurseHeadlessCheckoutMethod.minAmount

partner​

partner: string;

Partner associated with the payment method

Examples​

'hipay'
'paypal'

Inherited from​

PurseHeadlessCheckoutMethod.partner

position​

position: number;

Position of the payment method in the list

Inherited from​

PurseHeadlessCheckoutMethod.position

registration​

registration: Readable<RegistrationState>;

This property exposes if the mean of payment is bound for registration upon validate.

Inherited from​

PurseHeadlessCheckoutRegisterable.registration

simulable​

simulable: boolean;

Whether the method can provide loan simulation or not

type​

type: "method";

Inherited from​

PurseHeadlessCheckoutMethod.type

Methods​

getHostedFields()​

getHostedFields(options?): PurseHeadlessCheckoutHostedFields;

Creates and returns a hosted fields UI instance for this payment method.

Parameters​

ParameterTypeDescription
options?HostedFieldsOptionsHostedFieldsOptions: settings for the hosted fields

Returns​

PurseHeadlessCheckoutHostedFields

A hosted fields instance for this payment method

Example​

  const hostedFields = primaryMethod.getHostedFields({
     fields: {
       pan: {
         target: '#card-number',
         placeholder: 'Card number',
       },
       cvv: {
         target: '#card-cvv',
         placeholder: 'CVV',
       },
       expirationDate: {
         target: '#card-expiration-date',
         placeholder: 'MM / YY',
       },
     },
     theme: {
       global: {
         fontSrc: 'https://fonts.googleapis.com/css?family=Roboto',
       },
       input: {
         color: '#333',
         fontSize: '16px',
         fontFamily: 'Arial, sans-serif',
         backgroundColor: '#fff',
         fontWeight: '400',
         ':valid': {
           color: 'green',
         },
       }
     }
   });
  await hostedFields.render();

getPaymentElement()​

getPaymentElement(options?): PurseHeadlessCheckoutPaymentElement;

Creates and returns a payment element UI instance for this payment method. The instance is created only on the first call and cached for subsequent calls.

Parameters​

ParameterTypeDescription
options?PaymentElementOptionsOptional UI customization settings for the payment element

Returns​

PurseHeadlessCheckoutPaymentElement

A payment element instance for this payment method

Example​

const paymentElement = primaryMethod.getPaymentElement({
  hostedForm: {
    panPlaceholder: 'Enter your card number',
    cvvPlaceholder: 'Enter your CVV'
    // Add more options here
  }
})
await paymentElement.appendTo('#payment-container');

register()​

register(value?, params?): Promise<void>;

Mark this mean of payment for registration upon validate.

Parameters​

ParameterTypeDescription
value?boolean{boolean} true to register, false to unregister
params?{ name?: string; }
params.name?string-

Returns​

Promise<void>

Example​

item.register(true);

Throws​

Inherited from​

PurseHeadlessCheckoutRegisterable.register

setAsPrimarySource()​

setAsPrimarySource(): void;

Changes the active primary payment source in the current payment split. Use this when you have multiple primary payment elements mounted (e.g., Wallet AND installments).

Returns​

void

Throws​

Example​

// Switch to this payment method as the primary source
await method.setAsPrimarySource();

simulateLoan()​

simulateLoan(product): Promise<LoanSimulation>;

Some method are 'simulable' and can give a loan simulation if provided with a product description

Parameters​

ParameterType
productLoanProduct

Returns​

Promise<LoanSimulation>

Throws​

  • PurseHeadlessCheckoutError INVALID_LOAN_SIMULATION
    If the method is not simulable or when an error happened during the simulation.

Example​

await method.simulateLoan({ amount: 200, shipments: [], currency_code: 'EUR',...  });