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

# Easy $IP Onboarding

> An example of how to integrate purchasing $IP with Apple Pay, Venmo, Debit Card, Bank, and more with Halliday.

<CardGroup cols={1}>
  <Card title="Completed Code Example" href="https://github.com/jacob-tucker/halliday-story-example" icon="thumbs-up">
    View the completed code for this tutorial.
  </Card>
</CardGroup>

This tutorial will show you how to integrate purchasing \$IP with Apple Pay, Venmo, Debit Card, Bank, and more into your DApp with Halliday.

<Note>
  **This tutorial is a React/Next.js tutorial**. It is also based on the [Halliday Docs](https://docs.halliday.xyz/pages/index-page).
</Note>

Here is what the end result will look like:

<Frame>
  <img src="https://mintcdn.com/story/KwuxPVrS3UIa7CU1/images/tutorials/halliday-payment.png?fit=max&auto=format&n=KwuxPVrS3UIa7CU1&q=85&s=da6b1d523106f5cde5e3a0d327668f2a" alt="Halliday Payment End Result" width={300} data-path="images/tutorials/halliday-payment.png" />
</Frame>

## Instructions

<Steps>
  <Step title="Get an API Key">
    In order to use Halliday, you will need to get an API key. Right now the process is to email [partnerships@halliday.xyz](mailto:partnerships@halliday.xyz). But this may change, so I recommend checking the [Halliday Docs](https://docs.halliday.xyz/pages/payments-hello-world) for the most up to date information.
  </Step>

  <Step title="Install Halliday">
    Next, install the Halliday Payments SDK in the root folder of your project.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @halliday-sdk/payments
      ```

      ```bash yarn theme={null}
      yarn add @halliday-sdk/payments
      ```
    </CodeGroup>
  </Step>

  <Step title="Setup Your .env">
    In your `.env` file, add your Halliday API key.

    ```env theme={null}
    NEXT_PUBLIC_HALLIDAY_PUBLIC_API_KEY=your-api-key
    ```
  </Step>

  <Step title="Integrate Halliday">
    Lastly, integrate Halliday Payments into your existing application with a few lines of code.

    <Note>
      In this example, we make it so that the Halliday popup is embedded in a div with the id `halliday-embed`. Such that when the user loads the page, it is already there. However you can change this so that it pops up when the user clicks a button. Check out the [Halliday Docs](https://docs.halliday.xyz/pages/payments-widget) for more information.
    </Note>

    ```tsx theme={null}
    "use client";
    import { openHallidayPayments } from "@halliday-sdk/payments";
    import { useEffect } from "react";

    export default function Home() {
      useEffect(() => {
        openHallidayPayments({
          apiKey: process.env.NEXT_PUBLIC_HALLIDAY_PUBLIC_API_KEY as string,
          // $IP on Story
          outputs: ["story:0x"],
          // $USDC.e on Story
          // outputs: ["story:0xf1815bd50389c46847f0bda824ec8da914045d14"],
          sandbox: false,
          windowType: "EMBED",
          targetElementId: "halliday-embed",
        });
      }, []);

      return (
        <div
          className="flex items-center justify-center min-h-screen bg-white"
          id="halliday-embed"
        ></div>
      );
    }
    ```
  </Step>
</Steps>

That's it! You can now use Halliday to purchase \$IP on Story.

<CardGroup cols={1}>
  <Card title="Completed Code Example" href="https://github.com/jacob-tucker/halliday-story-example" icon="thumbs-up">
    View the completed code for this tutorial.
  </Card>
</CardGroup>