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

# On/Off-ramp Product Overview

The Crypto On/Off-ramp is a hosted widget with APIs/webhooks that can be integrated into your app or website to enable users to purchase or sell crypto.

### Architecture Diagram

<Tabs>
  <Tab title="Crypto Buy">
    ```mermaid theme={null}
    sequenceDiagram
      actor U as User
      participant C as Client
      participant S as crypto.sardine



        note right of U: Request Quote
        C->>S: Call v1/quotes
        S-->>C: Return quote

        note right of U: Redirect user to Sardine Widget
        C->>S: Create URL and redirect user to Sardine widget
        U-->S: User completes onboarding and payment method linking

        note right of U: User initiates purchase order
        U-->S: User confirms order
        S-->>U: Sardine redirects user to client page
        S->>C: Sardine sends order created event webhook
        C->>U: Client shows user that order is in progress

        note right of U: order completes
        S-->>C: Sardine sends order completed event webhook
        C-->>U: Clients shows user completed transaction status
    ```
  </Tab>

  <Tab title="Crypto Sell (Client Signature Flow)">
    ```mermaid theme={null}
    sequenceDiagram
      actor U as User
      participant C as Client
      participant S as crypto.sardine

        note right of U: Return supported geos/currencies
        C->>S: Call [insert endpoint for quotes]

        note right of U: Request Quote
        C->>S: Call [insert endpoint for quotes]

        note right of U: Redirect user to Sardine Widget
        C->>S: Call [insert redirect URL directions]

        note right of U: User initiates sell order
        S-->>U: Sardine redirects user to client page
        S->>C: [insert order webhook details]

        note right of U: Client gets transaction signature from user
        C->>U: Client initiates user to sign deposit transaction within client app UX
        S->>C: [insert order webhook details]

        note right of U: order completes
        S-->>C: [insert webhook details]
        C-->>U: Clients shows updated transaction status
    ```
  </Tab>

  <Tab title="Crypto Sell (User Deposit Flow)">
    ```mermaid theme={null}
    sequenceDiagram
      actor U as User
      participant C as Client
      participant S as crypto.sardine

        note right of U: Return supported geos/currencies


        note right of U: Request Quote
        C->>S: Call [insert endpoint for quotes]

        note right of U: Redirect user to Sardine Widget
        C->>S: Call [insert redirect URL directions]

        note right of U: User initiates sell order
        S-->>U: Sardine redirects user to client page
        S->>C: [insert order webhook details]

        note right of U: User initiates crypto deposit
        U->>S: User deposits crypto to Sardine wallet
        S->>C: [insert order webhook details]

        note right of U: order completes
        S-->>C: [insert webhook details]
        C-->>U: Clients shows updated transaction status
    ```
  </Tab>
</Tabs>