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

# Card Connect

export const ParamList = ({items = [], is_child = false}) => {
  return items.map(item => {
    const field_props = {
      id: Math.random().toString(),
      body: item.name,
      name: item.name,
      type: item.type,
      required: item.required
    };
    const enums = item.enums || [];
    const items = item.items || [];
    const has_items = items?.length > 0;
    const has_enums = enums?.length > 0;
    const should_default_open = item.defaultOpen || false;
    const render_child_item = () => {
      const child_props = {
        title: has_enums ? "Possible enum values" : "properties"
      };
      if (should_default_open) child_props.defaultOpen = true;
      const has_inline_enums = has_enums && enums.every(enum_item => typeof enum_item === 'string') && enums.map((enum_item, idx) => {
        const is_last = idx === enums.length - 1;
        const is_2nd_to_last = idx === enums.length - 2;
        return <>
            <code>{enum_item}</code>
            {is_last && ''}
            {is_2nd_to_last && ' or '}
            {!is_last && !is_2nd_to_last && ', '}
          </>;
      });
      const enum_list = has_enums && !has_inline_enums && <Accordion {...child_props}>
          {enums.map((enum_item, index) => <div key={`enum-${index}`}>
              <code>{enum_item.name}</code>
              <br />
              <p>{enum_item.description}</p>
            </div>)}
        </Accordion>;
      const item_list = has_items && <Expandable {...child_props}>
          <ParamList items={items || []} is_child />
        </Expandable>;
      return <>
          <p>
            {item.description}
            {has_inline_enums && [has_inline_enums.length > 1 ? ' One of ' : ' Must be ', ...has_inline_enums]}
          </p>

          {enum_list}
          {item_list}
        </>;
    };
    return is_child ? <ResponseField {...field_props}>{render_child_item()}</ResponseField> : <ParamField {...field_props}>{render_child_item()}</ParamField>;
  });
};

<Note>Mode: `card_connect`</Note>

Opal Card Connect is the primary way to connect user credit cards with Method.
This pre-built flow gathers a user's consent, verifies their identity, and completes any needed verifications to ensure their cards are connected to the Method ecosystem.

<img src="https://mintcdn.com/methodfinancial/eYCszB8Xv_iFcf77/images/account-verification-hero.svg?fit=max&auto=format&n=eYCszB8Xv_iFcf77&q=85&s=7343cf799839b01b410bdcc9c362b04b" alt="account-verification-hero" width="1920" height="1080" data-path="images/account-verification-hero.svg" />

## What this mode does

Card Connect lets users select and verify credit cards. Configure whether users may select a single card or multiple cards. Verified cards are eligible for payments and transactions.

## Parameters

<ParamList
  items={[
{
  name: "selection_type",
  type: "enum",
  required: true,
  description: "Whether to select a single card or multiple cards.",
  enums: ["single", "multiple"],
},
{
  name: "account_filters",
  type: "object",
  required: false,
  description: "Filters to mark cards as ineligible during selection.",
  items: [
    {
      name: "account_filters.exclude",
      type: "object",
      required: false,
      description: "Cards to exclude from the flow.",
      items: [
        {
          name: "account_filters.exclude.mch_ids",
          type: "string[]",
          required: false,
          description: "Mark cards belonging to specific merchant IDs as ineligible.",
        },
        {
          name: "account_filters.exclude.unverified_account_numbers",
          type: "boolean",
          required: false,
          description: "Mark cards with unverified account numbers as ineligible.",
        },
      ],
    },
  ],
},
{
  name: "skip_pii",
  type: "string[]",
  description: "The PII to skip.",
  enums: ["name", "dob", "address", "ssn_4"],
}
]}
/>

## Create a token

You can create a card connect session token using one of the supported patterns:

* Existing entity: provide `entity_id` + `mode` + `card_connect`
* Create new entity: provide `entity` + `mode` + `card_connect`
* Resume session: provide `session_id` only (omit `mode` and `card_connect`)

### Existing Entity

```json theme={null}
{
  "entity_id": "ent_...",
  "mode": "card_connect",
  "card_connect": {
    "selection_type": "single",
    "account_filters": {
      "exclude": {
        "mch_ids": ["mch_123"],
        "unverified_account_numbers": true
      }
    }
  }
}
```

### Create New Entity

```json theme={null}
{
  "entity": {
    "type": "individual",
    "individual": {
      "first_name": "Kevin",
      "last_name": "Doyle",
      "phone": "+15125551234"
    }
  },
  "mode": "card_connect",
  "card_connect": {
    "selection_type": "multiple"
  }
}
```

### Response

```json theme={null}
{
  "token": "otkn_...",
  "valid_until": "2025-06-10T22:50:53.024Z",
  "session_id": "osess_..."
}
```

## Testing in Development

When testing the frontend for Card Connect in the dev environment, use the following test values:

* **Verification code**: When the modal prompts you to enter a six-digit verification code, you can use any six-digit code. For example: `123456`. This applies to any test case (e.g. identity verification, connect, etc.).
* **Card verification**: Select the Chase card ending in `1580` and use `878` as the CVV.

## Launch Opal

<Tabs>
  <Tab title="React (Web)">
    ```tsx theme={null}
    import { OpalProvider, useOpal } from "@methodfi/opal-react";

    function Screen() {
      const { open } = useOpal({ env: "dev", onEvent: (e) => {} });
      const start = async () => {
        const { token } = await getTokenFromBackend();
        open({ token });
      };
      return <button onClick={start}>Connect Card</button>;
    }
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={null}
    import { OpalProvider, useOpal } from "@methodfi/opal-react-native";

    function Screen() {
      const { open } = useOpal({ env: "dev", onEvent: (e) => {} });
      const start = async () => {
        const { token } = await getTokenFromBackend();
        open({ token });
      };
      return <Button title="Connect Card" onPress={start} />;
    }
    ```
  </Tab>
</Tabs>