PurseHeadlessCheckoutCreditcardMethod

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

• PurseHeadlessCheckoutPrimaryMethod

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

PurseHeadlessCheckoutPrimaryMethod.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

PurseHeadlessCheckoutPrimaryMethod.disabled

---

id

id: string;

Unique identifier of the payment method

Examples

'hipay-bancontact'

'illicado-giftcard'

'aci-creditcard'

Inherited from

PurseHeadlessCheckoutPrimaryMethod.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

Inherited from

PurseHeadlessCheckoutPrimaryMethod.integrationType

---

isSecondary

isSecondary: false;

Indicates if the payment method is a secondary mean of payment

Inherited from

PurseHeadlessCheckoutPrimaryMethod.isSecondary

---

limit

limit: number | null;

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

Inherited from

PurseHeadlessCheckoutPrimaryMethod.limit

---

maxAmount

maxAmount: number | null;

Maximum amount to use the payment method

Inherited from

PurseHeadlessCheckoutPrimaryMethod.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

PurseHeadlessCheckoutPrimaryMethod.method

---

minAmount

minAmount: number | null;

Minimum amount to use the payment method

Inherited from

PurseHeadlessCheckoutPrimaryMethod.minAmount

---

partner

partner: string;

Partner associated with the payment method

Examples

'hipay'

'paypal'

Inherited from

PurseHeadlessCheckoutPrimaryMethod.partner

---

position

position: number;

Position of the payment method in the list

Inherited from

PurseHeadlessCheckoutPrimaryMethod.position

---

registration

registration: Readable<RegistrationState>;

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

Inherited from

PurseHeadlessCheckoutPrimaryMethod.registration

---

simulable

simulable: boolean;

Whether the method can provide loan simulation or not

Inherited from

PurseHeadlessCheckoutPrimaryMethod.simulable

---

supportedBrands

supportedBrands: CardScheme[];

Brand supported by the method when a creditcard is involved.

---

type

type: "method";

Inherited from

PurseHeadlessCheckoutPrimaryMethod.type

Methods

getHostedFields()

getHostedFields(options?): PurseHeadlessCheckoutHostedFields;

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

Parameters

Parameter	Type	Description
options?	HostedFieldsOptions	HostedFieldsOptions: 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();

Inherited from

PurseHeadlessCheckoutPrimaryMethod.getHostedFields

---

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

Parameter	Type	Description
options?	PaymentElementOptions	Optional 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');

Inherited from

PurseHeadlessCheckoutPrimaryMethod.getPaymentElement

---

register()

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

Mark this mean of payment for registration upon validate.

Parameters

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

Returns

Promise<void>

Example

item.register(true);

Throws

• PurseHeadlessCheckoutError INVALID_TOKEN_NAME
  If the provided token name is invalid
• PurseHeadlessCheckoutError TOKEN_NOT_REGISTERABLE
  If the token is not registerable

Inherited from

PurseHeadlessCheckoutPrimaryMethod.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

• PurseHeadlessCheckoutError code: "ELEMENT_NOT_FULFILLED"
  If the method has empty or incomplete payment information

Example

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

Inherited from

PurseHeadlessCheckoutPrimaryMethod.setAsPrimarySource

---

simulateLoan()

simulateLoan(product): Promise<LoanSimulation>;

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

Parameters

Parameter	Type
product	LoanProduct

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',...  });

Inherited from

PurseHeadlessCheckoutPrimaryMethod.simulateLoan