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

# Overlay Checkout

> Ett modernt TypeScript-bibliotek för att integrera Dodo Payments overlay checkout och lyssna på checkout-händelser i realtid.

## Översikt

Dodo Payments Checkout SDK erbjuder ett sömlöst sätt att integrera vår betalningsoverlay i din webbapplikation. Byggd med TypeScript och moderna webbstandarder, erbjuder den en robust lösning för att hantera betalningar med realtids-händelsehantering och anpassningsbara teman.

<Frame>
  <img src="https://mintcdn.com/dodopayments/mOQO5ej_lx0yH9p-/images/cover-images/overlay-checkout.png?fit=max&auto=format&n=mOQO5ej_lx0yH9p-&q=85&s=15d90c695e92914a9d54b10509d6fe47" alt="Overlay Checkout Cover Image" style={{ maxHeight: '500px', width: 'auto' }} width="3826" height="2160" data-path="images/cover-images/overlay-checkout.png" />
</Frame>

## Demo

<Card title="Interactive Demo" icon="play" href="https://atlas.dodopayments.com/pricing">
  Se överläggskassan i aktion med vår live-demo.
</Card>

## Snabbstart

Kom igång med Dodo Payments Checkout SDK på bara några rader kod:

```typescript theme={null}
import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK
DodoPayments.Initialize({
  mode: "test", // 'test' or 'live'
  displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

<Tip>
  Hämta din checkout-URL från [create checkout session API](/api-reference/checkout-sessions/create).
</Tip>

## Steg-för-steg Integrationsguide

<Steps>
  <Step title="Install the SDK">
    Installera Dodo Payments Checkout SDK med din föredragna paketförvaltare:

    <CodeGroup>
      ```bash npm theme={null}
      npm install dodopayments-checkout
      ```

      ```bash yarn theme={null}
      yarn add dodopayments-checkout
      ```

      ```bash pnpm theme={null}
      pnpm add dodopayments-checkout
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    Initiera SDK:n i din applikation, vanligtvis i din huvudkomponent eller appens ingångspunkt:

    ```typescript theme={null}
    import { DodoPayments } from "dodopayments-checkout";

    DodoPayments.Initialize({
      mode: "test", // Change to 'live' for production
      displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
      onEvent: (event) => {
        console.log("Checkout event:", event);
        
        // Handle different events
        switch (event.event_type) {
          case "checkout.opened":
            // Checkout overlay has been opened
            break;
          case "checkout.closed":
            // Checkout has been closed
            break;
          case "checkout.error":
            // Handle errors
            console.error("Checkout error:", event.data?.message);
            break;
        }
      },
    });
    ```

    <Warning>
      Initiera alltid SDK:n innan du försöker öppna kassan. Initiering ska ske en gång när din applikation laddas.
    </Warning>
  </Step>

  <Step title="Create a Checkout Button Component">
    Skapa en komponent som öppnar checkout-overlayen:

    ```typescript theme={null}
    // components/CheckoutButton.tsx
    "use client";

    import { Button } from "@/components/ui/button";
    import { DodoPayments } from "dodopayments-checkout";
    import { useEffect, useState } from "react";

    export function CheckoutButton() {
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        // Initialize the SDK
        DodoPayments.Initialize({
          mode: "test",
          displayType: "overlay",
          onEvent: (event) => {
            switch (event.event_type) {
              case "checkout.opened":
                setIsLoading(false);
                break;
              case "checkout.error":
                setIsLoading(false);
                console.error("Checkout error:", event.data?.message);
                break;
            }
          },
        });
      }, []);

      const handleCheckout = async () => {
        try {
          setIsLoading(true);
          await DodoPayments.Checkout.open({
            checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
          });
        } catch (error) {
          console.error("Failed to open checkout:", error);
          setIsLoading(false);
        }
      };

      return (
        <Button 
          onClick={handleCheckout}
          disabled={isLoading}
        >
          {isLoading ? "Loading..." : "Checkout Now"}
        </Button>
      );
    }
    ```
  </Step>

  <Step title="Add Checkout to Your Page">
    Använd checkout-knappskomponenten i din applikation:

    ```typescript theme={null}
    // app/page.tsx
    import { CheckoutButton } from "@/components/CheckoutButton";

    export default function Home() {
      return (
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
          <h1>Welcome to Our Store</h1>
          <CheckoutButton />
        </main>
      );
    }
    ```
  </Step>

  <Step title="Handle Success and Failure Pages">
    Skapa sidor för att hantera checkout-omdirigeringar:

    ```typescript theme={null}
    // app/success/page.tsx
    export default function SuccessPage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Successful!</h1>
          <p>Thank you for your purchase.</p>
        </div>
      );
    }

    // app/failure/page.tsx
    export default function FailurePage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Failed</h1>
          <p>Please try again or contact support.</p>
        </div>
      );
    }
    ```
  </Step>

  <Step title="Test Your Integration">
    1. Starta din utvecklingsserver:

    ```bash theme={null}
    npm run dev
    ```

    2. Testa checkout-flödet:
       * Klicka på checkout-knappen
       * Verifiera att overlayen visas
       * Testa betalningsflödet med testuppgifter
       * Bekräfta att omdirigeringar fungerar korrekt

    <Check>
      Du bör se kassahändelser loggas i din webbläsares konsol.
    </Check>
  </Step>

  <Step title="Go Live">
    När du är redo för produktion:

    1. Ändra läget till `'live'`:

    ```typescript theme={null}
    DodoPayments.Initialize({
      mode: "live",
      displayType: "overlay",
      onEvent: (event) => {
        console.log("Checkout event:", event);
      }
    });
    ```

    2. Uppdatera dina checkout-URL:er för att använda live checkout-sessioner från din backend
    3. Testa hela flödet i produktion
    4. Övervaka händelser och fel
  </Step>
</Steps>

## API Referens

### Konfiguration

#### Initieringsalternativ

```typescript theme={null}
interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}
```

| Alternativ    | Typ                     | Obligatorisk | Beskrivning                                                                        |
| ------------- | ----------------------- | ------------ | ---------------------------------------------------------------------------------- |
| `mode`        | `"test" \| "live"`      | Ja           | Miljöläge: `'test'` för utveckling, `'live'` för produktion                        |
| `displayType` | `"overlay" \| "inline"` | Nej          | Visningstyp: `'overlay'` för modal kassa (standard), `'inline'` för inbäddad kassa |
| `onEvent`     | `function`              | Ja           | Callback-funktion för att hantera kassahändelser                                   |

#### Checkout-alternativ

```typescript theme={null}
interface CheckoutOptions {
  checkoutUrl: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
  };
}
```

| Alternativ                  | Typ       | Obligatorisk | Beskrivning                                                                                                                   |
| --------------------------- | --------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| `checkoutUrl`               | `string`  | Ja           | Kassa session URL från [create checkout session API](/api-reference/checkout-sessions/create)                                 |
| `options.showTimer`         | `boolean` | Nej          | Visa eller dölj kassatimer. Standard är `true`. När inaktiverad, får du eventet `checkout.link_expired` när sessionen går ut. |
| `options.showSecurityBadge` | `boolean` | Nej          | Visa eller dölj säkerhetsmärket. Standard är `true`.                                                                          |

### Metoder

#### Öppna Checkout

Öppnar checkout-overlayen med den angivna checkout-session-URL:en.

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

Du kan också skicka ytterligare alternativ för att anpassa checkout-beteendet:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: false,
    showSecurityBadge: false,
  },
});
```

#### Stäng Kassa

Stänger programatiskt kassaöverlägget.

```typescript theme={null}
DodoPayments.Checkout.close();
```

#### Kontrollera Status

Returnerar om kassaöverlägget för närvarande är öppet.

```typescript theme={null}
const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean
```

### Händelser

SDK:et tillhandahåller realtids händelser som du kan lyssna på genom callbacken `onEvent`:

```typescript theme={null}
DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        break;
      case "checkout.form_ready":
        // Checkout form is ready for user input
        break;
      case "checkout.payment_page_opened":
        // Payment page has been displayed
        break;
      case "checkout.customer_details_submitted":
        // Customer and billing details submitted
        break;
      case "checkout.closed":
        // Checkout has been closed
        break;
      case "checkout.redirect":
        // Checkout will perform a redirect
        break;
      case "checkout.error":
        // An error occurred
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Checkout session has expired (only when showTimer is false)
        break;
    }
  }
});
```

| Händelsetyp                           | Beskrivning                                                                                          |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `checkout.opened`                     | Kassaöverlägget har öppnats                                                                          |
| `checkout.form_ready`                 | Kassans formulär är redo att ta emot användarinmatning. Användbart för att dölja laddningstillstånd. |
| `checkout.payment_page_opened`        | Betalningssidan har visats                                                                           |
| `checkout.customer_details_submitted` | Kund- och faktureringsdetaljer har skickats in                                                       |
| `checkout.closed`                     | Kassaöverlägget har stängts                                                                          |
| `checkout.redirect`                   | Kassa kommer att utföra en omdirigering                                                              |
| `checkout.error`                      | Ett fel inträffade under kassan                                                                      |
| `checkout.link_expired`               | Aktiveras när kassa sessionen går ut. Endast mottaget när `showTimer` är inställd på `false`.        |

## Implementeringsalternativ

### Installation via Paket Manager

Installera via npm, yarn eller pnpm enligt [Steg-för-Steg Integrationsguiden](#step-by-step-integration-guide).

### CDN-Implementation

För snabb integration utan byggsteg kan du använda vår CDN:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test", // Change to 'live' for production
            displayType: "overlay",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <button onclick="openCheckout()">Checkout Now</button>

    <script>
        function openCheckout() {
            DodoPaymentsCheckout.DodoPayments.Checkout.open({
                checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
            });
        }
    </script>
</body>
</html>
```

### Temaanpassning

Du kan anpassa kassaens utseende genom att föra vidare ett objekt `themeConfig` i parametern `options` när kassan öppnas. Temakonfigurationen stöder både ljusa och mörka lägen, vilket tillåter dig att anpassa färger, kanter, text, knappar och kantbredder.

<Info>
  Denna sektion täcker **klient-sida** tema konfiguration som använder Kassa SDK. Du kan också konfigurera teman **server-sida** när du skapar en kassa session via API:et med parametern `theme_config`. Se [Kassa Temaanpassning](/features/checkout#checkout-theme-customization) för API-nivå konfiguration, eller använd [Designsidan](/features/design) i instrumentpanelen för att visuellt konfigurera teman med livepreview.
</Info>

#### Grundläggande Tema Konfiguration

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#344054",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### Fullständig Tema Konfiguration

Alla tillgängliga temeegenskaper:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        // Background colors
        bgPrimary: "#FFFFFF",        // Primary background color
        bgSecondary: "#F9FAFB",      // Secondary background color (e.g., tabs)
        
        // Border colors
        borderPrimary: "#D0D5DD",     // Primary border color
        borderSecondary: "#6B7280",  // Secondary border color
        
        // Text colors
        textPrimary: "#344054",       // Primary text color
        textSecondary: "#6B7280",    // Secondary text color
        textPlaceholder: "#667085",  // Placeholder text color
        textError: "#D92D20",        // Error text color
        textSuccess: "#10B981",      // Success text color
        
        // Button colors
        buttonPrimary: "#A6E500",           // Primary button background
        buttonPrimaryHover: "#8CC500",      // Primary button hover state
        buttonTextPrimary: "#0D0D0D",       // Primary button text color
        buttonSecondary: "#F3F4F6",         // Secondary button background
        buttonSecondaryHover: "#E5E7EB",     // Secondary button hover state
        buttonTextSecondary: "#344054",     // Secondary button text color
      },
      dark: {
        // Background colors
        bgPrimary: "#0D0D0D",
        bgSecondary: "#1A1A1A",
        
        // Border colors
        borderPrimary: "#323232",
        borderSecondary: "#D1D5DB",
        
        // Text colors
        textPrimary: "#FFFFFF",
        textSecondary: "#909090",
        textPlaceholder: "#9CA3AF",
        textError: "#F97066",
        textSuccess: "#34D399",
        
        // Button colors
        buttonPrimary: "#A6E500",
        buttonPrimaryHover: "#8CC500",
        buttonTextPrimary: "#0D0D0D",
        buttonSecondary: "#2A2A2A",
        buttonSecondaryHover: "#3A3A3A",
        buttonTextSecondary: "#FFFFFF",
      },
      radius: "8px", // Border radius for inputs, buttons, and tabs
    },
  },
});
```

#### Endast Ljust Läge

Om du endast vill anpassa det ljusa temat:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#000000",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### Endast Mörkt Läge

Om du endast vill anpassa det mörka temat:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      dark: {
        bgPrimary: "#000000",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### Delvis Tema Överskrivning

Du kan överskrida endast specifika egenskaper. Kassaen kommer att använda standardvärden för egenskaper du inte specificerar:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        buttonPrimary: "#FF6B6B", // Only override primary button color
      },
      radius: "16px", // Override border radius
    },
  },
});
```

#### Teme Konfiguration med Andra Alternativ

Du kan kombinera temakonfiguration med andra kassaalternativ:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: true,
    showSecurityBadge: true,
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### TypeScript Typer

För TypeScript-användare, exporteras alla temakonfigurationstyper:

```typescript theme={null}
import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

const themeConfig: ThemeConfig = {
  light: {
    bgPrimary: "#FFFFFF",
    // ... other properties
  },
  dark: {
    bgPrimary: "#0D0D0D",
    // ... other properties
  },
  radius: "8px",
};
```

## Felhantering

SDK:et tillhandahåller detaljerad felinformation genom händelsesystemet. Implementera alltid korrekt felhantering i din callback `onEvent`:

```typescript theme={null}
DodoPayments.Initialize({
  mode: "test",
  displayType: "overlay",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
      // You may want to show a user-friendly error message
      // or retry the checkout process
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
      console.warn("Checkout session has expired");
    }
  }
});
```

<Warning>
  Hantera alltid eventet `checkout.error` för att ge en bra användarupplevelse när fel inträffar.
</Warning>

## Bästa Praxis

1. **Initiera en gång**: Initiera SDK:et en gång när din applikation laddas, inte vid varje kassa försök
2. **Felhantering**: Implementera alltid korrekt felhantering i din händelsecallback
3. **Testläge**: Använd `test` läge under utveckling och växla till `live` först när du är redo för produktion
4. **Händelsehantering**: Hantera alla relevanta händelser för en komplett användarupplevelse
5. **Giltiga URLs**: Använd alltid giltiga kassa URLs från create checkout session API
6. **TypeScript**: Använd TypeScript för bättre typsäkerhet och utvecklarupplevelse
7. **Laddningstillstånd**: Visa laddningstillstånd medan kassan öppnas för att förbättra UX
8. **Timer hantering**: Inaktivera timern (`showTimer: false`) om du vill hantera sessionens utgångsdatum manuellt

## Felsökning

<AccordionGroup>
  <Accordion title="Checkout not opening">
    **Möjliga orsaker:**

    * SDK inte initierad före anrop av `open()`
    * Ogiltig kassa URL
    * JavaScript-fel i konsolen
    * Nätverksanslutningsproblem

    **Lösningar:**

    * Verifiera att SDK-initieringen sker innan kassan öppnas
    * Kontrollera konsolens fel
    * Säkerställ att kassa URL är giltig och kommer från create checkout session API
    * Verifiera nätverksanslutningen
  </Accordion>

  <Accordion title="Events not firing">
    **Möjliga orsaker:**

    * Händelsehanterare inte korrekt inställd
    * JavaScript-fel som hindrar händelsefortplantning
    * SDK inte korrekt initierad

    **Lösningar:**

    * Bekräfta att händelsehanteraren är korrekt konfigurerad i `Initialize()`
    * Kontrollera webbläsarens konsol för JavaScript-fel
    * Verifiera att SDK-initieringen slutfördes framgångsrikt
    * Testa med en enkel händelsehanterare först
  </Accordion>

  <Accordion title="Styling issues">
    **Möjliga orsaker:**

    * CSS-konflikter med applikationsstilar
    * Tema inställningarna inte korrekt tillämpade
    * Responsiv designfrågor

    **Lösningar:**

    * Kontrollera för CSS-konflikter i webbläsarens DevTools
    * Verifiera att tema inställningarna är korrekta
    * Testa på olika skärmstorlekar
    * Se till att det inte finns z-index-konflikter med överlägget
  </Accordion>
</AccordionGroup>

## Aktivera Digitala Plånböcker

För detaljerad information om hur man ställer in Google Pay och andra digitala plånböcker, se sidan <a href="/features/payment-methods/digital-wallets">Digitala Plånböcker</a>.

<Note>
  Apple Pay stöds ännu inte i kassaöverlägget. Stöd för Apple Pay kommer snart.
</Note>

## Webbläsarstöd

Dodo Payments Checkout SDK stöder följande webbläsare:

* Chrome (senaste)
* Firefox (senaste)
* Safari (senaste)
* Edge (senaste)
* IE11+

## Overlay vs Inline Checkout

Välj rätt kassatyp för ditt användningsfall:

| Funktion              | Overlay Checkout                    | Inline Checkout                             |
| --------------------- | ----------------------------------- | ------------------------------------------- |
| Integrationsdjup      | Modal ovanpå sidan                  | Fullt inbäddad i sidan                      |
| Layout kontroll       | Begränsad                           | Full kontroll                               |
| Varumärkesprofilering | Separat från sidan                  | Sömlös                                      |
| Implementationsinsats | Lägre                               | Högre                                       |
| Bäst för              | Snabb integration, befintliga sidor | Anpassade kassasidor, högkonvertibla flöden |

<Tip>
  Använd **overlay checkout** för snabbare integration med minimala förändringar av dina befintliga sidor. Använd **inline checkout** när du vill ha maximal kontroll över kassaupplevelsen och sömlös varumärkesprofilering.
</Tip>

## Relaterade Resurser

<CardGroup cols={2}>
  <Card title="Inline Checkout" icon="credit-card" href="/developer-resources/inline-checkout">
    Bädda in kassan direkt på din sida för fullt integrerade upplevelser.
  </Card>

  <Card title="Checkout Sessions API" icon="code" href="/api-reference/checkout-sessions/create">
    Skapa kassasessioner för att driva dina kassa upplevelser.
  </Card>

  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Hantera betalningshändelser server-sida med webhooks.
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Komplett guide för att integrera Dodo Payments.
  </Card>
</CardGroup>

För mer hjälp, besök vår [Discord community](https://discord.gg/bYqAp4ayYh) eller kontakta vårt utvecklar support team.