> For the complete documentation index, see [llms.txt](https://bagelpay.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bagelpay.gitbook.io/docs/documentation/template-and-framework/nuxtpro.md).

# NuxtPro

[NuxtPro](https://nuxtpro.com/) supports using [BagelPay](https://bagelpay.io/) for payments, which can be used for product payments, membership subscriptions, credit purchases, and other scenarios.

## How to setup <a href="#creem-setup" id="creem-setup"></a>

<details>

<summary>Step1: Register a <a href="https://app.bagelpay.io/login">BagelPay</a> account</summary>

<figure><img src="/files/U290YWC6UO7Ifq0hYb4F" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Step2: Create a store in the BagelPay <a href="https://app.bagelpay.io/dashboard">dashboard</a></summary>

<figure><img src="/files/OFXErvNuhWXoMzV3zjs4" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Step3: Create <a href="https://app.bagelpay.io/product">products</a></summary>

<figure><img src="/files/Hle11wSN3MXVhaLJ28ea" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Step4: Generate API keys in <a href="https://app.bagelpay.io/keys">developer center</a></summary>

<figure><img src="/files/DAHrZxaKcbhzv1txHvjA" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Step5: Generate webhook endpoint</summary>

**Click on the "Create webhook" button in the "**[**Webhooks**](https://app.bagelpay.io/keys)**" tab.**

Register your publicly accessible HTTPS URL endpoint.

<figure><img src="/files/vW2VLN24velYAqDXtrNu" alt=""><figcaption></figcaption></figure>

* **Webhook Name**: Used to identify your webhook in the platform.
* **Webhook URL**: The URL that will receive the webhook payloads sent by bagelpay.io

</details>

## NuxtPro Configuration

Fill in the BagelPay-related configuration information in the NuxtPro project `.env` file.

```editorconfig
NUXT_PUBLIC_BAGELPAY_URL= # Your BagelPay base URL. Example: Test environment: https://test.bagelpay.io, Production environment: https://live.bagelpay.io
NUXT_BAGELPAY_API_KEY= # Your BagelPay API key. For details, see: https://app.bagelpay.io/keys
NUXT_BAGELPAY_WEBHOOK_SECRET= # Your BagelPay webhook secret key.
```

## References <a href="#references" id="references"></a>

* [BagelPay Official Documentation](/docs/documentation/getting-started/what-is-bagelpay.md)
* [BagelPay Quick Start Guide](/docs/documentation/getting-started/quick-start-guide.md)
* [BagelPay Developer Integration Guide](/docs/documentation/developers-and-api-usage/developer-integration-guide.md)
* [BagelPay Webhook User Guide](/docs/documentation/developers-and-api-usage/webhooks/webhook-user-guide.md)