Primer Docs

1234showVaultManager(  clientToken: string,  options: VaultManagerOptions): Promise<PrimerVaultManager>

copy

Show the vault at the specified container, and get an instance of PrimerVaultManager, which is used to manage the customer's payment methods stored in the Primer Vault.

Parameters

A string containing a client token as returned by the Primer API when you create a client session.

An interface for configuring the behavior and appearance of the Vault Manager UI.

The container element in which the checkout should be rendered.

This option forces the locale. By default, the locale will be set to the browser's locale.

Whether the Vault Manager should only show saved payment methods.

Whether deleting a vaulted payment method is disabled or enabled.

Payment method option

Customize the appearance and behavior of the card fields in the checkout form.

Properties

Options for the cardholder name input field.

Properties

Whether the cardholder name is required. Only works if the cardholder name is visible.

Whether the cardholder name input field should be visible. This property is **deprecated**, set it on your Dashboard instead.

The placeholder text to display in the cardholder name input field. It can be either a string or a function that returns a string. The function receives an options object as first argument.

Customize the placeholder of the card number field.

Properties

The placeholder text to display in the cardholder number input field. It can be either a string or a function that returns a string. The function receives an options object as first argument.

Customize the placeholder of the expiry date field.

Properties

The placeholder text to display in the expiry date input field. It can be either a string or a function that returns a string. The function receives an options object as first argument.

Customize the placeholder of the CVV field.

Properties

The placeholder text to display in the CVV input field. It can be either a string or a function that returns a string. The function receives an options object as first argument.

Options for using PayPal as a payment method.

Properties

The color of the PayPal button.

The shape of the PayPal button.

The size of the PayPal button.

The height of the PayPal button, in pixels.

The label displayed on the PayPal button.

Whether to display the PayPal tagline beneath the button.

A function to be called when the PayPal button is clicked.

Options for customizing the 3D Secure verification flow.

Properties

The order details used for 3D Secure verification.

Properties

The amount of the transaction.

Properties

The value of the transaction.

The currency of the transaction.

The email address associated with the transaction.

The billing address for the transaction.

Properties

The first name of the customer associated with the transaction.

The last name of the customer associated with the transaction.

The first line of the billing address for the transaction.

The second line of the billing address for the transaction.

The third line of the billing address for the transaction.

The city of the billing address for the transaction.

The state or province of the billing address for the transaction.

The ISO 3166-1 alpha-2 code of the country of the billing address for the transaction.

postalCode

string

The postal code of the billing address for the transaction.

The unique identifier for the transaction.

A string specifying a test scenario for use in testing 3D Secure.

Callbacks

Called when the 3D Secure challenge is started.

Called when the 3D Secure challenge is completed.

Customization options

See the CheckoutStyle page.

Properties

Choose whether to show the label above inputs.

Drop-In Checkout allows you to use your own submit button for submitting forms. By default, the built-in submit button will be favored.

Note that when disabling the built-in submit button and using your own custom submit button, it is required to implement the submit function in order to notify Drop-In Checkout of form submissions.

When using your own custom submit button, it's important to use the following callbacks to ensure that your submit button is in the correct state and in sync with the checkout as your customers interact with it.

123456789101112131415161718192021222324252627const options = {    /* Other options ... */
    submitButton: {        useBuiltInButton: false, // Default to true
        // Callback for receiving the submit button's visible state in the current scene        onVisible(isVisible, context: { currentSceneId }) {            // Show or hide your custom submit button        },
        // Callback for receiving the submit button's disabled state in the current scene        onDisable(isDisabled, context: { currentSceneId }) {            // Disable or enable your custom submit button        },
        // Callback for receiving the submit button's loading state in the current scene        onLoading(isLoading, context: { currentSceneId }) {            // Show your submit button in a loading state        },
        // Callback for receiving the submit button's content in the current scene        onContentChange(content, context: { currentSceneId }) {            // Set your submit button's content with either the content provided or your own custom content        },    },}

copy

Properties

Set whether to use built-in submit button or to display your own custom button.

Set whether the total order amount should be displayed in the submit button content.

Callbacks

Show or hide your custom submit button.

context

currentSceneId

string

An identifier for the current scene.

Disable or enable your custom submit button.

context

currentSceneId

string

An identifier for the current scene.

Put your submit button in a loading state.

context

currentSceneId

string

An identifier for the current scene.

onContentChange

(content: string, context: object) => void

Set your submit button's content with either the content provided or your own custom content.

context

currentSceneId

string

An identifier for the current scene.

Properties

Choose whether a processing indicator overlay should be shown on form submission.

errorMessage

object

Properties

Choose whether to allow Universal Checkout to show error messages.

Callbacks

onErrorMessageShow

(message: string) => void

A callback for when the error message should be displayed, you can choose to use the provided message for your own purposes.

onErrorMessageHide

() => void

A callback for when the error message should be hidden, update own UI accordingly.

Lifecycle Callbacks

Called when the tokenization process is about to start. Return a boolean indicating whether or not to proceed with the process.

Data

Indicates which PaymentMethodType will be tokenized.

Called when the tokenization process is about to start, but is canceled for some reason.

Called when the tokenization process starts.

Called when the tokenization process is successful.

Called when the tokenization process fails.

PrimerClientError

One of ErrorCode.

message

string

A human-readable error message.

A unique identifier for the error instance, used for troubleshooting purposes.

Optional additional data associated with the error.

Whether the error was generated by the developer.

Returns

An interface for managing the customer's payment methods stored in the Primer Vault.

PrimerVaultManager

Remove the Vault Manager UI from the DOM and unbind all event listeners.

Submit the payment method selected by the customer in the Vault Manager UI.

Example

12345678910import { Primer } from '@primer-io/checkout-web'
const clientToken = 'YOUR_CLIENT_TOKEN'
async function showVaultManager() {    const primerVaultManager = await Primer.showVaultManager(clientToken, {        container: '#my-element',        // other options...    })}

copy