createPaymentMethodManager

TS

createPaymentMethodManager(
  type: string
): Promise<
  | ICardPaymentMethodManager
  | INativePaymentMethodManager
  | IRedirectPaymentMethodManager
  | IKlarnaPaymentMethodManager
  | IAchPaymentMethodManager
  | null
>

There are five types of manager that can be returned by this function, depending on the type provided as first argument: Card, Native, Redirect, Klarna Payment Method and ACH.

In case the type specified is not supported, the function will return null instead.

​

Card

TS

createPaymentMethodManager(
	type: "PAYMENT_CARD",
	options?: PaymentMethodManagerOptions
): Promise<ICardPaymentMethodManager | null>

Create an instance of the ICardPaymentMethodManager, which can be used to manage credit card payments.

​

Parameters

Hide Parameters

type · "PAYMENT_CARD"

When it matches this type, a manager for card payment methods will be returned.

options · object

Options to configure the payment method manager.

Hide Properties

onCardMetadataChange · (metadata: CardMetadata) => void

Called when the card metadata changes. Takes a CardMetadata object as its argument.

Show CardMetadata

type · CardNetwork | null · deprecated

Deprecated: Use onCardNetworksChange instead

Allowed card networks for credit card payments, one of CardNetwork.

possibleTypes · CardNetwork[] · deprecated

Deprecated: Use onCardNetworksChange instead

An array of CardNetwork. Reduces to one or zero elements as more digits on the card number are input.

cvvLength · number

Usually 3 digits, but can sometimes be 4.

cardNumberLength · number

Represents the length of the card number for the given card type.

onBinDataAvailable · (event: BinDataAvailableEvent) => void

Called when Headless Checkout detects BIN data from the card number entered by the user. This callback provides detailed information about the card including issuer details and card attributes.

Makes available an event of type BinDataAvailableEvent.

Hide BinDataAvailableEvent

preferred · BinDataDetails | undefined

The recommended card network to use, based on the order specified in orderedAllowedCardNetworks.

If no network is allowed, undefined.

Show BinDataDetails

displayName · string · required

A human readable name for the card network.

network · string · required

A value that represents the card network in Primer’s systems.

allowed · boolean · required

Whether or not the card network is allowed, according to orderedAllowedCardNetworks passed in the Client Session.

issuerCountryCode · string

The ISO 3166-1 alpha-2 country code of the card issuer.

issuerName · string

The name of the card issuer (e.g., bank name).

accountFundingType · string

The type of account funding (e.g., “CREDIT”, “DEBIT”, “PREPAID”).

prepaidReloadableIndicator · string

Indicates whether a prepaid card is reloadable.

productUsageType · string

The usage type of the card product (e.g., “CONSUMER”, “BUSINESS”, “GOVERNMENT”).

productCode · string

The product code assigned by the card network.

productName · string

The product name assigned by the card network (e.g., “Visa Signature”).

issuerCurrencyCode · string

The ISO 4217 currency code associated with the card issuer.

regionalRestriction · string

Regional restrictions that apply to the card.

accountNumberType · string

The type of account number (e.g., “PAN”, “TOKEN”).

alternatives · BinDataDetails[]

All the detected card networks, including the ones that are not allowed. For co-badged cards, this array contains multiple networks.

To get the list of selectable networks for co-badged cards, use:

[preferred, ...alternatives].filter(n => n.allowed)

Show BinDataDetails

displayName · string · required

A human readable name for the card network.

network · string · required

A value that represents the card network in Primer’s systems.

allowed · boolean · required

Whether or not the card network is allowed, according to orderedAllowedCardNetworks passed in the Client Session.

issuerCountryCode · string

The ISO 3166-1 alpha-2 country code of the card issuer.

issuerName · string

The name of the card issuer (e.g., bank name).

accountFundingType · string

The type of account funding (e.g., “CREDIT”, “DEBIT”, “PREPAID”).

prepaidReloadableIndicator · string

Indicates whether a prepaid card is reloadable.

productUsageType · string

The usage type of the card product (e.g., “CONSUMER”, “BUSINESS”, “GOVERNMENT”).

productCode · string

The product code assigned by the card network.

productName · string

The product name assigned by the card network (e.g., “Visa Signature”).

issuerCurrencyCode · string

The ISO 4217 currency code associated with the card issuer.

regionalRestriction · string

Regional restrictions that apply to the card.

accountNumberType · string

The type of account number (e.g., “PAN”, “TOKEN”).

status · 'complete' | 'partial'

The status of the BIN data retrieval.

Show Values

complete

This happens when 8 digits or more are entered in the card number field.

Headless Checkout retrieved the BIN data using Primer’s BIN data service. This provides the most accurate information including issuer details.

partial

This happens when less than 8 digits are entered in the card number field, or when Headless Checkout fails to contact Primer’s BIN data service.

Headless Checkout retrieved the card networks using static information bundled with the SDK. This information can only identify international card networks and does not include issuer details.

firstDigits · string | undefined

The first digits (BIN prefix) of the card number, when available.

onBinDataLoadingChange · (loading: boolean) => void

Called when BIN data is being fetched from Primer’s servers. Use this to show a loading indicator while card network and issuer information is being retrieved.

Makes available a loading parameter of type boolean.

• true when BIN data retrieval starts
• false when BIN data retrieval completes (followed by an onBinDataAvailable callback)

onCardNetworksChange · (event: CardNetworkChangeEvent) => void · deprecated

Deprecated: This callback is deprecated. Use onBinDataAvailable instead, which provides richer BIN data including issuer information and card attributes.

Called when Headless Checkout detects new card networks from the card number entered by the user.

Makes available an event of type CardNetworkChangeEvent.

Hide CardNetworkChangeEvent

detectedCardNetworks · CardNetworks

All the detected card networks, including the ones that are not allowed.

Use the following snippet to get the card network that should be presented to the user:

detectedCardNetworks.preferred ?? detectedCardNetworks.items[0]

Show CardNetworks

items · CardNetworkDetails[]

An array of the card networks.

Show CardNetworkDetails

allowed · boolean

Whether or not the card network is allowed, according to orderedAllowedCardNetworks passed in the Client Session.

displayName · string

A human readable name for the card network.

network · string

A value that represents the card network in Primer’s systems.

preferred · CardNetworkDetails | undefined

The first allowed card network in items. In case no network is allowed, undefined.

Show CardNetworkDetails

allowed · boolean

Whether or not the card network is allowed, according to orderedAllowedCardNetworks passed in the Client Session.

displayName · string

A human readable name for the card network.

network · string

A value that represents the card network in Primer’s systems.

selectableCardNetworks · CardNetworks | undefined

In case the card has zero or only one network that is allowed, undefined. Otherwise, all the allowed cards.

Use this to show the card networks the user can choose from in the case of a co-badged cards.

Show CardNetworks

items · CardNetworkDetails[]

An array of the card networks.

Show CardNetworkDetails

allowed · boolean

Whether or not the card network is allowed, according to orderedAllowedCardNetworks passed in the Client Session.

displayName · string

A human readable name for the card network.

network · string

A value that represents the card network in Primer’s systems.

preferred · CardNetworkDetails | undefined

The first allowed card network in items. In case no network is allowed, undefined.

Show CardNetworkDetails

allowed · boolean

Whether or not the card network is allowed, according to orderedAllowedCardNetworks passed in the Client Session.

displayName · string

A human readable name for the card network.

network · string

A value that represents the card network in Primer’s systems.

source · 'REMOTE' | 'LOCAL' | 'LOCAL_FALLBACK'

The source of the information.

Show Values

LOCAL

This happens when less than 8 digits are entered in the cardnumber field.

Headless Checkout retrieved the card networks using static information bundled with the SDK. This information can only identify international cards.

REMOTE

This happens when 8 digits or more are entered in the cardnumber field.

Headless Checkout retrieved the card networks using Primer’s BIN data.

LOCAL_FALLBACK

This happens when Headless Checkout fails to contact Primer’s BIN data.

Falls back to the static information bundled with the SDK (see LOCAL).

onCardNetworksLoading · () => void · deprecated

Deprecated: This callback is deprecated. Use onBinDataLoadingChange instead.

Called when card network information is being fetched from Primer’s servers. Will only trigger when event.source === 'REMOTE' in onCardNetworksChange.

​

Returns

Hide Promise<ICardPaymentMethodManager | null>

Promise<ICardPaymentMethodManager | null>

A promise that resolves to an instance of ICardPaymentMethodManager or null.

Show ICardPaymentMethodManager

createHostedInputs · () => HostedInputs

Create an object with three hosted inputs: cardNumberInput, expiryInput, and cvvInput.

Show HostedInputs

cardNumberInput · IHeadlessHostedInput

The headless hosted input for the card number.

See HeadlessHostedInput.

expiryInput · IHeadlessHostedInput

The headless hosted input for the expiry date.

See HeadlessHostedInput.

cvvInput · IHeadlessHostedInput

The headless hosted input for the CVV.

See HeadlessHostedInput.

setCardholderName · (cardholderName: string) => void

Set the name of the cardholder.

removeHostedInputs · () => void

Remove the hosted inputs.

submit · () => Promise<void>

Create a payment method based on the current values after tokenization. Returns a Promise that resolves when the payment has been created.

validate · () => Promise<Validation>

Validate the state of the payment method. Returns a Promise that resolves with a Validation object.

Show Validation

valid · boolean · required

Indicates whether the validation was successful or not.

validationErrors · InputValidationError[] · required

An array of objects containing information about any input validation errors that occurred during the validation process.

Show InputValidationError

name · string · required

The name of the input field that produced the error.

error · string · required

The type of error that occurred.

Possible values:

• cardNameRequired: cardholder’s name is not provided.
• cardNameContainsNumbers: cardholder’s name contains numbers.
• cardNameLength: cardholder’s name does not match the expected length (minimum: 2, maximum: 45 characters).
• cardNameContainsInvalidCharacters: cardholder’s name contains characters that are not supported (only Latin characters are allowed).
• cardRequired: card number is not provided.
• unsupportedCardType: provided card number does not match the allowed card networks.
• cardIncomplete: provided card number does not match the expected length.
• cardInvalid: provided card number is invalid. Additional details might be available in the message field.
• cvvRequired: card’s security code (CVV) is not provided.
• cvvIncomplete: card’s security code (CVV) does not match the expected length (minimum: 3 characters).
• cvvInvalid3: card’s security code (CVV) does not match the expected length (exact: 3 characters).
• cvvInvalid4: card’s security code (CVV) does not match the expected length (exact: 4 characters).
• expiryRequired: card’s expiry date is not provided.
• cardExpired: card has expired.
• expiryMonthInvalid: expiry date’s month is invalid.
• expiryYearInvalid: expiry date’s year is invalid.

message · string · required

A human-readable message describing the error that occurred.

error · string

A string describing any error that occurred during the validation process.

reset · () => void

Reset the hosted fields to their initial state.

​

Native

TS

createPaymentMethodManager(
	type: "PAYPAL" | "GOOGLE_PAY" | "APPLE_PAY",
): Promise<INativePaymentMethodManager | null>

Create an instance of the INativePaymentMethodManager, which can be used to manage native payment methods like PayPal, Google Pay, and Apple Pay.

​

Parameters

Hide Parameters

type · "PAYPAL" | "GOOGLE_PAY" | "APPLE_PAY"

The type of native payment method to manage.

​

Returns

Hide Promise<INativePaymentMethodManager | null>

Promise<INativePaymentMethodManager | null>

A promise that resolves to an instance of INativePaymentMethodManager or null. An interface for creating a native payment method button.

Show INativePaymentMethodManager

createButton · () => IHeadlessPaymentMethodButton

Create a native payment method button. Returns a HeadlessPaymentMethodButton.

​

Redirect

TS

createPaymentMethodManager(
	type: PaymentMethodType,
): Promise<IRedirectPaymentMethodManager | null>

Create an instance of the IRedirectPaymentMethodManager, which can be used to manage redirect-based payment methods.

​

Parameters

Hide Parameters

type · PaymentMethodType

The type of redirect-based payment method to manage, one of PaymentMethodType.

​

Returns

Hide Promise<IRedirectPaymentMethodManager | null>

Promise<IRedirectPaymentMethodManager | null>

A promise that resolves to an instance of IRedirectPaymentMethodManager or null.

Hide IRedirectPaymentMethodManager

start · () => Promise<void>

Start the redirect payment flow.

addEventListener · (event: EventTypes, callback: EventListener) => void

Add an event listener to the button.

Show Parameters

EventTypes · "blur" | "change" | "click" | "close" | "error" | "focus"

EventListener · (event?: Event) => void

​

Klarna

TS

createPaymentMethodManager(
	type: "KLARNA",
	options?: KlarnaPaymentMethodManagerOptions
): Promise<IKlarnaPaymentMethodManager | null>

Create an instance of the IKlarnaPaymentMethodManager, which can be used to manage Klarna specific payment methods which also require an extra form and user interaction.

​

Parameters

Hide Parameters

type · "KLARNA"

The type of payment method to manage.

options · KlarnaPaymentMethodManagerOptions

Options to configure the payment method manager.

Hide Properties

onPaymentMethodCategoriesChange · (paymentMethodCategories: KlarnaPaymentMethodCategory[]) => void

A callback that is called when the payment categories for Klarna have changed. Sends back an array with the values needed to render the payment categories for Klarna.

Show Parameters

paymentMethodCategories · KlarnaPaymentMethodCategory[] | []

Show Properties

id · string · Represents the id of the payment method category

name · string · Represents the name of the payment method category

descriptiveAssetUrl · string · Represents the url of the asset that can be used to indicate a Klarna Payment

standardAssetUrl · string · Represents the url of the asset that can be used to indicate a Klarna Payment

​

Returns

Hide Promise<IKlarnaPaymentMethodManager | null>

Promise<IKlarnaPaymentMethodManager | null>

A promise that resolves to an instance of IKlarnaPaymentMethodManager or null.

Show IKlarnaPaymentMethodManager

start · (paymentPayload: KlarnaPaymentPayload) => Promise<void>

This function starts the payment process. It should be called with the selected payment method category id, when the user has selected and confirmed the desired payment category. The payment method category id which needs to be sent to the start function can be retrieved from the onPaymentMethodCategoriesChange function

Show child attributes

paymentPayload · { paymentMethodCategoryId: string }

Show Properties

paymentMethodCategoryId · string · Represents the id of the payment method category

renderCategory · (details: RenderCategoryDetails) => Promise<void>

This function is used so that Klarna can render the selected payment category details (paymentMethodCategoryId) in a DOM element (containerId). It uses a callback (onHeightChange) to inform when the height of the contianer has changed.

Show child attributes

details · { containerId: string, paymentMethodCategoryId: string, onHeightChange:(newHeight:number)=> void }

Show Properties

containerId · string · The container id of a DOM element in which the payment methods category details will be displayed

paymentMethodCategoryId · string · The id of the payment method category selected i.e. 'pay_later', 'pay_now', 'pay_over_time'

onHeightChange · (height: number) => void · The callback used to retrieve thew new height of the selected payment method categoy

Show Parameters

height · number · Represents the new height that should be used for the container that displays the details of the category

​

ACH

TS

createPaymentMethodManager(
	type: "STRIPE_ACH",
	options?: AchPaymentMethodManagerOptions
): Promise<IAchPaymentMethodManager | null>

Create an instance of the IAchPaymentMethodManager, which can be used to manage ACH payment methods which also require an extra form and the mandate confirmation.

​

Parameters

Hide Parameters

type · "STRIPE_ACH"

The type of payment method to manage.

options · AchPaymentMethodManagerOptions

Options to configure the payment method manager.

Show Properties

stripePublishableKey · string

Stripe Publishable Key, used to interact with Stripe’s SDK and collect the bank account details, necessary for the STRIPE_ACH payment method. The Publishable Key can be found in the Stripe Dashboard API keys.

​

Returns

Hide Promise<IAchPaymentMethodManager | null>

Promise<IAchPaymentMethodManager | null>

A promise that resolves to an instance of IAchPaymentMethodManager or null.

Show IAchPaymentMethodManager

start · (data: T) => Promise<Validation | undefined>

Submits and validates the customer data starting the ACH payment method flow.

When the payment method is STRIPE_ACH, the required data T is:

TS

interface StripeAchFormData {
  firstName: string;
  lastName: string;
  emailAddress: string;
}

collectBankAccountDetails · () => Promise<void>

When the payment method is STRIPE_ACH, displays the Stripe UI to collect the bank account details.

Throws an error if the start method didn’t run successfully or wasn’t called before.

confirmMandate · () => Promise<void>

Submits the mandate confirmation. Should be triggered by a “Confirm” button next to the mandate text.

Throws an error if the methods start and collectBankAccountDetails weren’t successfully called before.