TS
createPaymentMethodManager(
type: string
): Promise<
| ICardPaymentMethodManager
| INativePaymentMethodManager
| IRedirectPaymentMethodManager
| IKlarnaPaymentMethodManager
| IAchPaymentMethodManager
| null
>
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>
ICardPaymentMethodManager, which can be used to manage credit card payments.
Parameters
Hide Parameters
Hide Parameters
"PAYMENT_CARD"
When it matches this type, a manager for card payment methods will be
returned.
object
Options to configure the payment method manager.
Called when Headless Checkout detects new card networks from the card number entered by the user.Makes available an
Called when card network information is being fetched from Primer’s servers.
Will only trigger when
Hide Properties
Hide Properties
(metadata: CardMetadata) => void
Called when the card metadata changes. Takes a
CardMetadata object as its argument.Show CardMetadata
Show CardMetadata
CardNetwork | null
deprecated
Deprecated: Use onCardNetworksChange insteadAllowed card networks for credit card payments, one of
CardNetwork.
CardNetwork[]
deprecated
Deprecated: Use onCardNetworksChange insteadAn array of CardNetwork. Reduces to one or zero elements as more digits on the card number are input.
number
Usually 3 digits, but can sometimes be 4.
number
Represents the length of the card number for the given card type.
(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
Hide BinDataAvailableEvent
BinDataDetails | undefined
The recommended card network to use, based on the order specified in
orderedAllowedCardNetworks.If no network is allowed, undefined.Show BinDataDetails
Show BinDataDetails
string
required
A human readable name for the card network.
string
required
A value that represents the card network in Primer’s systems.
boolean
required
Whether or not the card network is allowed, according to
orderedAllowedCardNetworks passed in the Client Session.string
The ISO 3166-1 alpha-2 country code of the card issuer.
string
The name of the card issuer (e.g., bank name).
string
The type of account funding (e.g., “CREDIT”, “DEBIT”, “PREPAID”).
string
Indicates whether a prepaid card is reloadable.
string
The usage type of the card product (e.g., “CONSUMER”, “BUSINESS”, “GOVERNMENT”).
string
The product code assigned by the card network.
string
The product name assigned by the card network (e.g., “Visa Signature”).
string
The ISO 4217 currency code associated with the card issuer.
string
Regional restrictions that apply to the card.
string
The type of account number (e.g., “PAN”, “TOKEN”).
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
Show BinDataDetails
string
required
A human readable name for the card network.
string
required
A value that represents the card network in Primer’s systems.
boolean
required
Whether or not the card network is allowed, according to
orderedAllowedCardNetworks passed in the Client Session.string
The ISO 3166-1 alpha-2 country code of the card issuer.
string
The name of the card issuer (e.g., bank name).
string
The type of account funding (e.g., “CREDIT”, “DEBIT”, “PREPAID”).
string
Indicates whether a prepaid card is reloadable.
string
The usage type of the card product (e.g., “CONSUMER”, “BUSINESS”, “GOVERNMENT”).
string
The product code assigned by the card network.
string
The product name assigned by the card network (e.g., “Visa Signature”).
string
The ISO 4217 currency code associated with the card issuer.
string
Regional restrictions that apply to the card.
string
The type of account number (e.g., “PAN”, “TOKEN”).
'complete' | 'partial'
The status of the BIN data retrieval.
Show Values
Show Values
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.
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.
string | undefined
The first digits (BIN prefix) of the card number, when available.
(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.truewhen BIN data retrieval startsfalsewhen BIN data retrieval completes (followed by anonBinDataAvailablecallback)
(event: CardNetworkChangeEvent) => void
deprecated
Deprecated: This callback is deprecated. Use
onBinDataAvailable instead, which provides richer BIN data including issuer information and card attributes.event of type CardNetworkChangeEvent.Hide CardNetworkChangeEvent
Hide CardNetworkChangeEvent
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
Show CardNetworks
CardNetworkDetails[]
CardNetworkDetails | undefined
The first allowed card network in
items.
In case no network is allowed, undefined.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
Show CardNetworks
CardNetworkDetails[]
CardNetworkDetails | undefined
The first allowed card network in
items.
In case no network is allowed, undefined.'REMOTE' | 'LOCAL' | 'LOCAL_FALLBACK'
The source of the information.
Show Values
Show Values
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.
This happens when 8 digits or more are entered in the cardnumber field.Headless Checkout retrieved the card networks using Primer’s BIN data.
This happens when Headless Checkout fails to contact Primer’s BIN data.Falls back to the static information bundled with the SDK (see
LOCAL).() => void
deprecated
Deprecated: This callback is deprecated. Use
onBinDataLoadingChange instead.event.source === 'REMOTE' in onCardNetworksChange.Returns
Hide Promise<ICardPaymentMethodManager | null>
Hide Promise<ICardPaymentMethodManager | null>
A promise that resolves to an instance of
ICardPaymentMethodManager or null.Show ICardPaymentMethodManager
Show ICardPaymentMethodManager
() => HostedInputs
Create an object with three hosted inputs:
cardNumberInput, expiryInput, and cvvInput.Show HostedInputs
Show HostedInputs
IHeadlessHostedInput
The headless hosted input for the card number.See HeadlessHostedInput.
IHeadlessHostedInput
The headless hosted input for the expiry date.See HeadlessHostedInput.
IHeadlessHostedInput
The headless hosted input for the CVV.See HeadlessHostedInput.
(cardholderName: string) => void
Set the name of the cardholder.
() => void
Remove the hosted inputs.
() => Promise<void>
Create a payment method based on the current values after tokenization.
Returns a Promise that resolves when the payment has been created.
() => Promise<Validation>
Validate the state of the payment method. Returns a Promise that resolves
with a Validation object.
Show Validation
Show Validation
boolean
required
Indicates whether the validation was successful or not.
InputValidationError[]
required
An array of objects containing information about any input validation errors that occurred during the validation
process.
Show InputValidationError
Show InputValidationError
string
required
The name of the input field that produced the 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 themessagefield.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.
string
required
A human-readable message describing the error that occurred.
string
A string describing any error that occurred during the validation process.
() => void
Reset the hosted fields to their initial state.
Native
TS
createPaymentMethodManager(
type: "PAYPAL" | "GOOGLE_PAY" | "APPLE_PAY",
): Promise<INativePaymentMethodManager | null>
INativePaymentMethodManager, which can be used to manage native payment methods like
PayPal, Google Pay, and Apple Pay.
Parameters
Hide Parameters
Hide Parameters
"PAYPAL" | "GOOGLE_PAY" | "APPLE_PAY"
The type of native payment method to manage.
Returns
Hide Promise<INativePaymentMethodManager | null>
Hide 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
Show INativePaymentMethodManager
() => IHeadlessPaymentMethodButton
Create a native payment method button. Returns a
HeadlessPaymentMethodButton.
Redirect
TS
createPaymentMethodManager(
type: PaymentMethodType,
): Promise<IRedirectPaymentMethodManager | null>
IRedirectPaymentMethodManager, which can be used to manage redirect-based payment
methods.
Parameters
Hide Parameters
Hide Parameters
PaymentMethodType
The type of redirect-based payment method to manage, one of PaymentMethodType.
Returns
Hide Promise<IRedirectPaymentMethodManager | null>
Hide Promise<IRedirectPaymentMethodManager | null>
Klarna
TS
createPaymentMethodManager(
type: "KLARNA",
options?: KlarnaPaymentMethodManagerOptions
): Promise<IKlarnaPaymentMethodManager | null>
IKlarnaPaymentMethodManager, which can be used to manage Klarna specific payment methods which also require an extra form and user interaction.
Parameters
Hide Parameters
Hide Parameters
"KLARNA"
The type of payment method to manage.
KlarnaPaymentMethodManagerOptions
Options to configure the payment method manager.
Hide Properties
Hide Properties
(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.
Returns
Hide Promise<IKlarnaPaymentMethodManager | null>
Hide Promise<IKlarnaPaymentMethodManager | null>
A promise that resolves to an instance of
IKlarnaPaymentMethodManager or null.Show IKlarnaPaymentMethodManager
Show IKlarnaPaymentMethodManager
(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
(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.
ACH
TS
createPaymentMethodManager(
type: "STRIPE_ACH",
options?: AchPaymentMethodManagerOptions
): Promise<IAchPaymentMethodManager | null>
IAchPaymentMethodManager, which can be used to manage ACH payment methods which also require an extra form and the mandate confirmation.
Parameters
Hide Parameters
Hide Parameters
"STRIPE_ACH"
The type of payment method to manage.
AchPaymentMethodManagerOptions
Options to configure the payment method manager.
Show Properties
Show Properties
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>
Hide Promise<IAchPaymentMethodManager | null>
A promise that resolves to an instance of
IAchPaymentMethodManager or null.Show IAchPaymentMethodManager
Show IAchPaymentMethodManager
(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;
}
() => 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.() => 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.