> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# showVaultManager

```ts TS theme={"dark"}
showVaultManager(
  clientToken: string,
  options: VaultManagerOptions
): Promise<PrimerVaultManager>
```

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

<Expandable defaultOpen title="Parameters">
  <ResponseField name="clientToken" type="string">
    A string containing a client token as returned by the Primer API when you
    [create a client session](/checkout/client-session#create-a-client-session).
  </ResponseField>

  <ResponseField name="options" type="object">
    An interface for configuring the behavior and appearance of the Vault Manager UI.

    <Expandable defaultOpen title="Properties">
      <ResponseField name="container" type="string | Element" required>
        The container element in which the checkout should be rendered.
      </ResponseField>

      <ResponseField name="locale" type="string">
        This option forces the locale. By default, the locale will be set to the browser's locale.
      </ResponseField>

      <ResponseField name="apiVersion" type="&#x22;legacy&#x22; | &#x22;2.4&#x22;" post={['Default: "2.4"']}>
        Specifies the API version to use when interacting with the Primer backend.

        * If not explicitly set, defaults to version `'2.4'`.
        * Set this to `'legacy'` if you encounter compatibility issues with the latest API version and wish to revert to the previous stable behavior.
      </ResponseField>

      <ResponseField name="vaultOnly" type="boolean">
        Whether the Vault Manager should only show saved payment methods.
      </ResponseField>

      <ResponseField name="deletionDisabled" type="boolean">
        Whether deleting a vaulted payment method is disabled or enabled.
      </ResponseField>
    </Expandable>

    <Expandable defaultOpen title="Payment method option">
      <ResponseField name="card" type="object">
        Customize the appearance and behavior of the card fields in the checkout form.

        <Expandable defaultOpen title="Properties">
          <ResponseField name="cardholderName" type="object">
            Options for the cardholder name input field.

            <Expandable defaultOpen title="Properties">
              <ResponseField name="required" type="boolean">
                Whether the cardholder name is required. Only works if the cardholder
                name is visible.
              </ResponseField>

              <ResponseField name="visible" type="boolean">
                Whether the cardholder name input field should be visible.
              </ResponseField>

              <ResponseField name="placeholder" type="string | (options: { locale: string }) => string">
                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.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="cardNumber" type="object">
            Customize the placeholder of the card number field.

            <Expandable defaultOpen title="Properties">
              <ResponseField name="placeholder" type="string | (options: { locale: string }) => string">
                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.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="expiryDate" type="object">
            Customize the placeholder of the expiry date field.

            <Expandable defaultOpen title="Properties">
              <ResponseField name="placeholder" type="string | (options: { locale: string }) => string">
                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.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="cvv" type="object">
            Customize the placeholder of the CVV field.

            <Expandable defaultOpen title="Properties">
              <ResponseField name="placeholder" type="string | (options: { locale: string }) => string">
                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.
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="paypal" type="object">
        Options for using PayPal as a payment method.

        <Expandable defaultOpen title="Properties">
          <ResponseField name="buttonColor" type="&#x22;gold&#x22; | &#x22;blue&#x22; | &#x22;silver&#x22; | &#x22;white&#x22; | &#x22;black&#x22;">
            The color of the PayPal button.
          </ResponseField>

          <ResponseField name="buttonShape" type="&#x22;pill&#x22; | &#x22;rect&#x22;">
            The shape of the PayPal button.
          </ResponseField>

          <ResponseField name="buttonSize" type="&#x22;small&#x22; | &#x22;medium&#x22; | &#x22;large&#x22; | &#x22;responsive&#x22;">
            The size of the PayPal button.
          </ResponseField>

          <ResponseField name="buttonHeight" type="number">
            The height of the PayPal button, in pixels.
          </ResponseField>

          <ResponseField name="buttonLabel" type="&#x22;checkout&#x22; | &#x22;credit&#x22; | &#x22;pay&#x22; | &#x22;buynow&#x22; | &#x22;paypal&#x22; | &#x22;installment&#x22;">
            The label displayed on the PayPal button.
          </ResponseField>

          <ResponseField name="buttonTagline" type="boolean">
            Whether to display the PayPal tagline beneath the button.
          </ResponseField>

          <ResponseField name="onClick" type="() => void">
            A function to be called when the PayPal button is clicked.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="threeDSecure" type="object">
        Options for customizing the 3D Secure verification flow.

        <Expandable defaultOpen title="Properties">
          <ResponseField name="order" type="object" required>
            The order details used for 3D Secure verification.

            <Expandable defaultOpen title="Properties">
              <ResponseField name="amount" type="object" required>
                The amount of the transaction.

                <Expandable defaultOpen title="Properties">
                  <ResponseField name="value" type="number | string" required>
                    The value of the transaction.
                  </ResponseField>

                  <ResponseField name="currency" type="string" required>
                    The currency of the transaction.
                  </ResponseField>
                </Expandable>
              </ResponseField>

              <ResponseField name="email" type="string" required>
                The email address associated with the transaction.
              </ResponseField>

              <ResponseField name="billingAddress" type="object">
                The billing address for the transaction.

                <Expandable defaultOpen title="Properties">
                  <ResponseField name="firstName" type="string">
                    The first name of the customer associated with the transaction.
                  </ResponseField>

                  <ResponseField name="lastName" type="string">
                    The last name of the customer associated with the transaction.
                  </ResponseField>

                  <ResponseField name="addressLine1" type="string">
                    The first line of the billing address for the transaction.
                  </ResponseField>

                  <ResponseField name="addressLine2" type="string">
                    The second line of the billing address for the transaction.
                  </ResponseField>

                  <ResponseField name="addressLine3" type="string">
                    The third line of the billing address for the transaction.
                  </ResponseField>

                  <ResponseField name="city" type="string">
                    The city of the billing address for the transaction.
                  </ResponseField>

                  <ResponseField name="state" type="string">
                    The state or province of the billing address for the transaction.
                  </ResponseField>

                  <ResponseField name="countryCode" type="string">
                    The ISO 3166-1 alpha-2 code of the country of the billing address for the transaction.
                  </ResponseField>

                  <ResponseField name="postalCode" type="string">
                    The postal code of the billing address for the transaction.
                  </ResponseField>
                </Expandable>
              </ResponseField>

              <ResponseField name="orderId" type="string" required>
                The unique identifier for the transaction.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="testScenario" type="string">
            A string specifying a test scenario for use in testing 3D Secure.
          </ResponseField>
        </Expandable>

        <Expandable defaultOpen title="Callbacks">
          <ResponseField name="onChallengeStart" type="() => void">
            Called when the 3D Secure challenge is started.
          </ResponseField>

          <ResponseField name="onChallengeEnd" type="() => void">
            Called when the 3D Secure challenge is completed.
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>

    <Expandable defaultOpen title="Customization options">
      <ResponseField name="style" type="CheckoutStyle">
        See the [CheckoutStyle](/sdk/web/v2.x.x/checkout-style/Overview) page.
      </ResponseField>

      <ResponseField name="form" type="object">
        <Expandable defaultOpen title="Properties">
          <ResponseField name="inputLabelsVisible" type="boolean">
            Choose whether to show the label above inputs.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="submitButton" type="object">
        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](/sdk/web/v2.x.x/primer-checkout/methods/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.

        ```ts TS theme={"dark"}
        const 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
            },
          },
        };
        ```

        <Expandable defaultOpen title="Properties">
          <ResponseField name="useBuiltInButton" type="boolean">
            Set whether to use built-in submit button or to display your own custom
            button.
          </ResponseField>

          <ResponseField name="amountVisible" type="boolean">
            Set whether the total order amount should be displayed in the submit button
            content.
          </ResponseField>
        </Expandable>

        <Expandable defaultOpen title="Callbacks">
          <ResponseField name="onVisible" type="(isVisible: boolean, context: object) => void">
            Show or hide your custom submit button.

            <Expandable defaultOpen title="context">
              <ResponseField name="currentSceneId" type="string">
                An identifier for the current scene.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="onDisable" type="(isDisabled: boolean, context: object) => void">
            Disable or enable your custom submit button.

            <Expandable defaultOpen title="context">
              <ResponseField name="currentSceneId" type="string">
                An identifier for the current scene.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="onLoading" type="(isLoading: boolean, context: object) => void">
            Put your submit button in a loading state.

            <Expandable defaultOpen title="context">
              <ResponseField name="currentSceneId" type="string">
                An identifier for the current scene.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="onContentChange" type="(content: string, context: object) => void">
            Set your submit button's content with either the content provided or your
            own custom content.

            <Expandable defaultOpen title="context">
              <ResponseField name="currentSceneId" type="string">
                An identifier for the current scene.
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="processingIndicator" type="object">
        <Expandable defaultOpen title="Properties">
          <ResponseField name="visible" type="boolean">
            Choose whether a processing indicator overlay should be shown on form
            submission.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="errorMessage" type="object">
        <Expandable defaultOpen title="Properties">
          <ResponseField name="disabled" type="boolean">
            Choose whether to allow Universal Checkout to show error messages.
          </ResponseField>
        </Expandable>

        <Expandable defaultOpen title="Callbacks">
          <ResponseField name="onErrorMessageShow" type="(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.
          </ResponseField>

          <ResponseField name="onErrorMessageHide" type="() => void">
            A callback for when the error message should be hidden, update own UI
            accordingly.
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>

    <Expandable defaultOpen title="Lifecycle Callbacks">
      <ResponseField name="onTokenizeShouldStart" type="(data: Data) => boolean | Promise<boolean>">
        Called when the tokenization process is about to start. Return a boolean indicating whether or not to proceed
        with the process.

        <Expandable defaultOpen title="Data">
          <ResponseField name="paymentMethodType" type="PaymentMethodType">
            Indicates which [PaymentMethodType](/sdk/web/v2.x.x/constants/payment-method-types) will be tokenized.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onTokenizeDidNotStart" type="(reason: string) => void">
        Called when the tokenization process is about to start, but is canceled for some reason.
      </ResponseField>

      <ResponseField name="onTokenizeStart" type="() => void">
        Called when the tokenization process starts.
      </ResponseField>

      <ResponseField name="onTokenizeSuccess" type="(data: PaymentMethodToken) => void">
        Called when the tokenization process is successful.
      </ResponseField>

      <ResponseField name="onTokenizeError" type="(message: PrimerClientError) => void">
        Called when the tokenization process fails.

        <Expandable defaultOpen title="PrimerClientError">
          <ResponseField name="code" type="ErrorCode">
            One of [ErrorCode](/sdk/web/v2.x.x/common-objects/PrimerClientError).
          </ResponseField>

          <ResponseField name="message" type="string">
            A human-readable error message.
          </ResponseField>

          <ResponseField name="diagnosticsId" type="string | null">
            A unique identifier for the error instance, used for troubleshooting purposes.
          </ResponseField>

          <ResponseField name="data" type="unknown">
            Optional additional data associated with the error.
          </ResponseField>

          <ResponseField name="isFromDeveloper" type="boolean">
            Whether the error was generated by the developer.
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## Returns

<Expandable defaultOpen title="Promise<PrimerVaultManager>">
  <ResponseField subtitle="Promise<PrimerVaultManager>">
    An interface for managing the customer's payment methods stored in the
    Primer Vault.

    <Expandable defaultOpen title="PrimerVaultManager">
      <ResponseField name="teardown" type="() => void">
        Remove the Vault Manager UI from the DOM and unbind all event listeners.
      </ResponseField>

      <ResponseField name="submit" type="() => void">
        Submit the payment method selected by the customer in the Vault Manager
        UI.
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## Example

```ts TS theme={"dark"}
import { 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...
  });
}
```