TS
Copy
Ask AI
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
Copy
Ask AI
createPaymentMethodManager(
type: "PAYMENT_CARD",
options?: PaymentMethodManagerOptions
): Promise<ICardPaymentMethodManager | null>
ICardPaymentMethodManager, which can be used to manage credit card payments.
Parameters
Hide Parameters
Hide Parameters
When it matches this type, a manager for card payment methods will be
returned.
Options to configure the payment method manager.
Hide Properties
Hide Properties
Called when the card metadata changes. Takes a
CardMetadata object as its argument.Show CardMetadata
Show CardMetadata
Deprecated: Use onCardNetworksChange insteadAllowed card networks for credit card payments, one of
CardNetwork.
Deprecated: Use onCardNetworksChange insteadAn array of CardNetwork. Reduces to one or zero elements as more digits on the card number are input.
Usually 3 digits, but can sometimes be 4.
Represents the length of the card number for the given card type.
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
Hide CardNetworkChangeEvent
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
An array of the card networks.
The first allowed card network in
items.
In case no network is allowed, 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
An array of the card networks.
The first allowed card network in
items.
In case no network is allowed, undefined.The source of the information.
Show Values
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).Called when card network information is being fetched from Primer’s servers.
Will only trigger when
Will only trigger when
event.source === 'REMOTE' in onCardNetworksChange.Returns
Hide Promise<ICardPaymentMethodManager | null>
Hide Promise<ICardPaymentMethodManager | null>
Promise<ICardPaymentMethodManager | null>
A promise that resolves to an instance of
ICardPaymentMethodManager or null.Show ICardPaymentMethodManager
Show ICardPaymentMethodManager
Create an object with three hosted inputs:
cardNumberInput, expiryInput, and cvvInput.Show HostedInputs
Show HostedInputs
The headless hosted input for the card number.See HeadlessHostedInput.
The headless hosted input for the expiry date.See HeadlessHostedInput.
The headless hosted input for the CVV.See HeadlessHostedInput.
Set the name of the cardholder.
Remove the hosted inputs.
Create a payment method based on the current values after tokenization.
Returns a Promise that resolves when the payment has been created.
Validate the state of the payment method. Returns a Promise that resolves
with a Validation object.
Show Validation
Show Validation
Indicates whether the validation was successful or not.
An array of objects containing information about any input validation errors that occurred during the validation
process.
Show InputValidationError
Show InputValidationError
The name of the input field that produced the error.
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.
A human-readable message describing the error that occurred.
A string describing any error that occurred during the validation process.
Reset the hosted fields to their initial state.
Native
TS
Copy
Ask AI
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
The type of native payment method to manage.
Returns
Hide Promise<INativePaymentMethodManager | null>
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
Show INativePaymentMethodManager
Create a native payment method button. Returns a
HeadlessPaymentMethodButton.
Redirect
TS
Copy
Ask AI
createPaymentMethodManager(
type: PaymentMethodType,
): Promise<IRedirectPaymentMethodManager | null>
IRedirectPaymentMethodManager, which can be used to manage redirect-based payment
methods.
Parameters
Hide Parameters
Hide Parameters
The type of redirect-based payment method to manage, one of PaymentMethodType.
Returns
Hide Promise<IRedirectPaymentMethodManager | null>
Hide Promise<IRedirectPaymentMethodManager | null>
Promise<IRedirectPaymentMethodManager | null>
Klarna
TS
Copy
Ask AI
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
The type of payment method to manage.
Options to configure the payment method manager.
Hide Properties
Hide Properties
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>
Promise<IKlarnaPaymentMethodManager | null>
A promise that resolves to an instance of
IKlarnaPaymentMethodManager or null.Show IKlarnaPaymentMethodManager
Show IKlarnaPaymentMethodManager
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
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
Copy
Ask AI
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
The type of payment method to manage.
Options to configure the payment method manager.
Show Properties
Show Properties
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>
Promise<IAchPaymentMethodManager | null>
A promise that resolves to an instance of
IAchPaymentMethodManager or null.Show IAchPaymentMethodManager
Show IAchPaymentMethodManager
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
Copy
Ask AI
interface StripeAchFormData {
firstName: string;
lastName: string;
emailAddress: string;
}
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.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.