import { Button } from "zudoku/ui/Button";
import { ExternalLink } from "zudoku/icons";

# How To start

We offer three types of integration:

- **API** — a fully **flexible and customizable** integration through our REST [API](/api).
- **Web Widget** — an embeddable JavaScript [widget](/integration/widget) that handles the entire purchase flow with just a few lines of code.
- **Iframe** — the **quickest and simplest** setup via an [iframe block](/integration/iframe-integration), ready in minutes on both desktop and mobile.

A short registration form must be completed before integration, regardless of which option you choose.


<Stepper>
1. **Fill the partner form**

    Fill out the partner form on the website –{" "} <a href="https://e-vignettes.eu/en/partner" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-primary underline"> Become Partner <ExternalLink size={16} className="text-primary" /></a>
    ![Partner Form](https://e-vignettes.eu/assets/api/partner-form.png)

    :::info

    Once the form is submitted, we create your partner account and issue your
    `SANDBOX` and `PRODUCTION` API keys — you will access them in the Partner Panel in
    the next steps.

    :::


1. **Login to Partner Panel portal**

    Log in to the partner panel with the email you specified –{" "} <a href="https://www.e-vignette.app" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-primary underline"> Partner Panel <ExternalLink size={16} className="text-primary" /></a>

    :::info

    If you are a business owner and you have a developer who will perform the integration, add him in the
    Profile -> Settings -> Members

    :::

    ![Add Member](https://e-vignettes.eu/assets/api/add-developer.png)

1. **Select type of integration**

    Please navigate to the corresponding tab in Partner Panel based on the integration type you’ve selected and follow the relevant documentation provided:

    :::info

    API documentation you can find on this link - [API Integration](/api) 📄

    :::


    :::info

    Widget documentation you can find here - [Widget Integration](/integration/widget) 📄

    :::


    :::info

    Iframe documentation you can find here - [Iframe Integration](/integration/iframe-integration) 📄

    :::

1. **Configure webhook & redirect URLs**

    In the Partner Panel open **Profile → For Developers** and set up how you receive
    order updates and where customers return after payment:

    - **Webhook URL** — we notify you on every order status change
      (`CREATED`, `COMPLETED`, `FAILED`, `REFUNDED`). Details — [Webhooks](/wiki/webhooks) 📄
    - **Success redirect URL** / **Error redirect URL** — where the customer is
      redirected after a successful or cancelled payment.

    :::info

    Your `SANDBOX` and `PRODUCTION` API keys live in this same section — make sure you
    use the correct one. More details — [Partner Panel](/wiki/partner-panel) 📄

    :::

1. **Generate your draft cooperation agreement**

    Open the [Revenue Calculator](/partner-calculator) 🧮, choose your configuration
    (payment model and revenue share) and download the pre-filled **draft cooperation
    agreement**. Your selections are summarised in *Annex 1 — Selected Configuration*.

    :::info

    The draft must be reviewed and confirmed by both parties before signing — the
    figures are not final until agreed.

    :::

1. **Pay the Security Deposit**

    Before going live, pay the **refundable Security Deposit** shown in the
    [Revenue Calculator](/partner-calculator) for your chosen payment model:

    - **EUR 1,000** — when Vignette ID acts as the payment processor (covers End-User
      refunds we process on your behalf).
    - **EUR 3,000** — when you collect retail payments directly.

    :::info

    The deposit is **fully refundable** and returned on termination of the cooperation.

    :::

1. **Your production API key is activated 🎉**

    Congratulations! Once the deposit is received and the agreement is signed, your
    `PRODUCTION` API key is activated and you are ready to serve real orders.

</Stepper>