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

# Wallet Item Page

> Place the fusionCore: Wallet Items component on a portal page, and see how members add and manage their saved payment methods.

The **fusionCore: Wallet Items** component lets a portal member view, add, and manage their saved payment methods on a Portal page. It is a thin managed wrapper that surfaces the Commerce wallet UI — the wallet screens, controllers, and the `FCORE_PAY__Wallet_Item__c` object all belong to the managed Commerce (`FCORE_PAY`) package. You can place the component and set its two properties, but you cannot modify the wallet UI or its behavior.

A Wallet Item a member creates here is the same Commerce `FCORE_PAY__Wallet_Item__c` record that staff manage from the contact's **Wallet** action. For how staff create, edit, and pay with Wallet Items, see [Wallet Items Overview](/end-user-guides/accounts/wallet-items/index).

The component exposes two properties:

* **Header** (`header`) — the heading shown above the wallet.
* **Payment Provider Account Id** (`paymentProviderAccountId`) — the Payment Provider Account (`FCORE_PAY__Payment_Provider_Account__c`) whose saved methods the wallet shows. This is not required; leaving it blank changes which methods render rather than producing an error.

## Prerequisites

* A configured and validated Payment Provider Account (`FCORE_PAY__Payment_Provider_Account__c`) for Stripe. See [Stripe](/end-user-guides/stripe/index).
* The `FC_Portal_My_Wallet` permission set is assigned to the portal members who will manage their wallet. It grants the record access and Commerce controllers the component relies on.

## Setting Up the Wallet Item Component

<Steps>
  <Step title="Create the page">
    Make sure you have [created a page](/end-user-guides/portal/creating-portal-site-pages) with an appropriate title.
  </Step>

  <Step title="Add the Wallet Items component">
    Drag and drop the **fusionCore: Wallet Items** component onto the page. Give it an appropriate name and set the **Payment Provider Account Id** to the account whose saved methods the wallet should show.

    <Frame>
      <img src="https://mintcdn.com/fusionspan/PQhCyVfBbt1uWfmh/images/end-user-guides/5247008769/image-20260410-154306.png?fit=max&auto=format&n=PQhCyVfBbt1uWfmh&q=85&s=d02604a46b124827d9423f52f5b47999" alt="The fusionCore: Wallet Items component placed on a portal page with its properties" width="1912" height="819" data-path="images/end-user-guides/5247008769/image-20260410-154306.png" />
    </Frame>
  </Step>

  <Step title="Add the component registration">
    Drag and drop the **FS Portal - Component Registration** component onto the page. It registers the payment, wallet, and checkout-summary components — including the Stripe payment provider and payment method — into the fusionCore component registry so the wallet and checkout UI can load them at runtime. The component renders nothing itself, but a Stripe-backed wallet page needs it.

    <Frame>
      <img src="https://mintcdn.com/fusionspan/PQhCyVfBbt1uWfmh/images/end-user-guides/5247008769/image-20260410-154701.png?fit=max&auto=format&n=PQhCyVfBbt1uWfmh&q=85&s=668f5104642f703b02e3289e3029594d" alt="The FS Portal - Component Registration component placed on a portal page" width="1917" height="808" data-path="images/end-user-guides/5247008769/image-20260410-154701.png" />
    </Frame>
  </Step>

  <Step title="Publish">
    Click **Publish** to save your changes.
  </Step>
</Steps>

## Creating a Wallet Item as a Portal Member

Once the page is live, members save their own payment methods through it. A member can save a method while checking out, or add one directly on the **My Wallet** page.

### Saving a method in checkout

<Steps>
  <Step title="Enter your payment information">
    On the Checkout page, fill out your payment information, then check the box below the payment details to save the method.

    <Frame>
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4859363529/image-20250519-173554.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=050cc0014ff842c20dc75018f9929d7f" alt="The Portal checkout payment form with the save-payment checkbox selected" width="1431" height="803" data-path="images/end-user-guides/4859363529/image-20250519-173554.png" />
    </Frame>
  </Step>

  <Step title="Check out">
    Click **Checkout** to complete the payment and save the method.
  </Step>
</Steps>

### Saving a method from My Wallet

<Steps>
  <Step title="Add a method on the My Wallet page">
    On the My Wallet page, click **Add New Wallet Item** for the business unit you want to save the method under.

    <Frame caption="The My Wallet page as a member sees it">
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4859363529/my-wallet-member.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=30b4c086f61a0c5f48d944aa6e4a6d8d" alt="The rendered My Wallet page in the portal, with a section per business unit and an Add New Wallet Item button in each" width="1256" height="203" data-path="images/end-user-guides/4859363529/my-wallet-member.png" />
    </Frame>
  </Step>

  <Step title="Select a payment method">
    Select the payment method you want to add.

    <Frame>
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4859363529/image-20250605-174953.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=87c99ff8f4bd0930d8dbf8548c2c1d5f" alt="The payment method selection step on the My Wallet page" width="963" height="501" data-path="images/end-user-guides/4859363529/image-20250605-174953.png" />
    </Frame>
  </Step>

  <Step title="Save the method">
    Enter the payment details, check the box below them to save the method, then click **Save**.

    <Frame>
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4859363529/image-20250605-175103.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=1a2dfea1047a5385051c9f46740bebbd" alt="The payment detail form with the save checkbox selected" width="1091" height="705" data-path="images/end-user-guides/4859363529/image-20250605-175103.png" />
    </Frame>
  </Step>
</Steps>

## Limitations and Common Pitfalls

* **The wallet UI is managed and not customizable.** This component wraps the managed Commerce wallet. You control its placement and its two properties only — the wallet UI and its code cannot be changed.
* **The wallet needs a configured Stripe account.** The wallet draws its methods from a configured and validated Payment Provider Account (`FCORE_PAY__Payment_Provider_Account__c`). Without one, there is nothing for the wallet to show.
* **Members need the permission set.** Without `FC_Portal_My_Wallet`, a portal member cannot view or manage Wallet Items even when the component is on the page.
* **Only Card and ACH are supported.** As of version 1.5, members can save Stripe Card and ACH methods only.

{/* Source: https://fusionspan.atlassian.net/wiki/spaces/fcdocs/pages/4859363529/Creating+a+Wallet+Item+as+a+Portal+User */}
