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

# Item Selection

> Specify which items to purchase with Embedded Checkout

The Embedded Checkout allows you to specify which items your users can purchase using the `lineItems` property. This guide explains how to configure item selection for different asset types.

<Snippet file="item-selection-common.mdx" />

## Item Selection Examples

<CodeGroup>
  ```tsx collectionLocator theme={null}
  <CrossmintProvider apiKey="_YOUR_CLIENT_API_KEY_">
      <CrossmintEmbeddedCheckout
          lineItems={{
              collectionLocator: "crossmint:_YOUR_COLLECTION_ID_", // Crossmint managed collection
              // collectionLocator: "crossmint:_YOUR_COLLECTION_ID_:_TEMPLATE_ID_", // With specific template
              callData: {
                  totalPrice: "5.00",
                  quantity: 1, // matches your contract's parameter name
              },
          }}
      />
  </CrossmintProvider>
  ```

  ```tsx collectionLocator - imported contract theme={null}
  <CrossmintProvider apiKey="_YOUR_CLIENT_API_KEY_">
      <CrossmintEmbeddedCheckout
          lineItems={{
              collectionLocator: "ethereum:0x71c7656ec7ab88b098defb751b7401b5f6d897", // External collection registered in Crossmint Console
              callData: {
                  totalPrice: "5.00",
                  quantity: 1, // matches your contract's parameter name
                  // For external contracts, you might need additional parameters such as:
                  // _amount: 1, // if your mint function uses _amount instead of quantity
                  // tokenId: "123", // if your contract requires a specific tokenId
                  // metadata: "ipfs://...", // if your contract accepts metadata
              },
          }}
      />
  </CrossmintProvider>
  ```

  ```tsx tokenLocator - EVM theme={null}
  <CrossmintProvider apiKey="_YOUR_CLIENT_API_KEY_">
      <CrossmintEmbeddedCheckout
          lineItems={{
              tokenLocator: "ethereum:0x71c7656ec7ab88b098defb751b7401b5f6d897:1234", // <blockchain>:<contractAddress>:<tokenId>
              callData: {
                  totalPrice: "25.00", // Only totalPrice is required for token purchases
                  // For external EVM contracts, you might need additional parameters:
                  // _amount: 1, // if your contract uses _amount instead of quantity
                  // tokenId: "1234", // if your contract requires explicit tokenId
                  // metadata: "ipfs://...", // if your contract accepts metadata
              },
          }}
      />
  </CrossmintProvider>
  ```

  ```tsx tokenLocator - Solana theme={null}
  <CrossmintProvider apiKey="_YOUR_CLIENT_API_KEY_">
      <CrossmintEmbeddedCheckout
          lineItems={{
              tokenLocator: "solana:7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU", // <blockchain>:<tokenAddress>
              callData: {
                  totalPrice: "25.00",
                  buyerCreatorRoyaltyPercent: 100, // Required for Solana
              },
          }}
      />
  </CrossmintProvider>
  ```

  ```tsx productLocator theme={null}
  <CrossmintProvider apiKey="_YOUR_CLIENT_API_KEY_">
      <CrossmintEmbeddedCheckout
          lineItems={{
              productLocator: "amazon:B01DFKC2SO", // Amazon ASIN
              // productLocator: "amazon:https://www.amazon.com/dp/B01DFKC2SO", // Amazon URL
              // productLocator: "shopify:https://your-store.myshopify.com/products/product-name:123456789", // Shopify
          }}
      />
  </CrossmintProvider>
  ```
</CodeGroup>

<Snippet file="external-evm-contract-parameter-note.mdx" />

<Snippet file="solana-buyer-creator-royalty-snippet.mdx" />

<Snippet file="multiple-line-items-snippet.mdx" />

## Accessing Item Data in React Components

When using Embedded Checkout, you can access the current order's item data using the `useCrossmintCheckout` hook:

```tsx theme={null}
import { useCrossmintCheckout } from "@crossmint/client-sdk-react-ui";

function YourComponent() {
    const { order } = useCrossmintCheckout();

    // Access line items data
    const lineItems = order?.lineItems || [];

    return (
        <div>
            {lineItems.map((item, index) => (
                <div key={index}>
                    <h3>{item.metadata?.name}</h3>
                    <p>
                        Price: {item.quote?.totalPrice?.amount} {item.quote?.totalPrice?.currency}
                    </p>
                </div>
            ))}
        </div>
    );
}
```

<Note>
  The `useCrossmintCheckout` hook must be used within components wrapped by both `CrossmintProvider` and
  `CrossmintCheckoutProvider`.
</Note>