Inline Checkout - Dodo Payments Documentation

Översikt

Inline checkout låter dig skapa fullt integrerade checkout-upplevelser som smälter samman med din webbplats eller applikation. Till skillnad från overlay checkout, som öppnas som en modal ovanpå din sida, integrerar inline checkout betalningsformuläret direkt i din sidlayout. Med inline checkout kan du:

Skapa checkout-upplevelser som är helt integrerade med din app eller webbplats
Låta Dodo Payments säkert fånga kund- och betalningsinformation i en optimerad checkout-ram
Visa artiklar, totalsummor och annan information från Dodo Payments på din sida
Använda SDK-metoder och händelser för att bygga avancerade checkout-upplevelser

Hur Det Fungerar

Inline checkout fungerar genom att integrera en säker Dodo Payments-ram i din webbplats eller app. Checkout-ramen hanterar insamling av kundinformation och fångar betalningsdetaljer. Din sida visar artikellistan, totalsummor och alternativ för att ändra vad som finns i checkout. SDK:n låter din sida och checkout-ramen interagera med varandra. Dodo Payments skapar automatiskt en prenumeration när en checkout är klar, redo för dig att tillhandahålla.

Inline checkout-ramen hanterar säkert all känslig betalningsinformation, vilket säkerställer PCI-efterlevnad utan ytterligare certifiering från din sida.

Vad Gör En Bra Inline Checkout?

Det är viktigt att kunderna vet vem de köper från, vad de köper och hur mycket de betalar. För att bygga en inline checkout som är efterlevande och optimerad för konvertering måste din implementation inkludera:

Inline checkout example with required elements labeled

Återkommande information: Om det är återkommande, hur ofta det återkommer och den totala summan att betala vid förnyelse. Om det är en provperiod, hur länge provperioden varar.
Artikelbeskrivningar: En beskrivning av vad som köps.
Transaktionstotalsummor: Transaktionstotalsummor, inklusive delsumma, total skatt och grand total. Se till att inkludera valutan också.
Dodo Payments-fotnot: Den fullständiga inline checkout-ramen, inklusive checkout-fotnoten som har information om Dodo Payments, våra försäljningsvillkor och vår integritetspolicy.
Återbetalningspolicy: En länk till din återbetalningspolicy, om den skiljer sig från Dodo Payments standardåterbetalningspolicy.

Visa alltid den kompletta inline checkout-ramen, inklusive fotnoten. Att ta bort eller dölja juridisk information bryter mot efterlevnadskrav.

Kundresa

Checkout-flödet bestäms av din checkout-sessionkonfiguration. Beroende på hur du konfigurerar checkout-sessionen kommer kunderna att uppleva en checkout som kan presentera all information på en enda sida eller över flera steg.

Kund öppnar checkout

Du kan öppna inline checkout genom att skicka varor eller en befintlig transaktion. Använd SDK:n för att visa och uppdatera information på sidan, och SDK-metoder för att uppdatera varor baserat på kundinteraktion.

Initial checkout page with items list and payment form

Kund anger sina uppgifter

Inline checkout ber först kunderna att ange sin e-postadress, välja sitt land och (där det krävs) ange sitt postnummer. Detta steg samlar all nödvändig information för att bestämma skatter och tillgängliga betalningsalternativ.Du kan förfylla kunduppgifter och presentera sparade adresser för att effektivisera upplevelsen.

Kund väljer betalningsmetod

Efter att ha angett sina uppgifter presenteras kunderna med tillgängliga betalningsmetoder och betalningsformuläret. Alternativ kan inkludera kredit- eller betalkort, PayPal, Apple Pay, Google Pay och andra lokala betalningsmetoder baserat på deras plats.Visa sparade betalningsmetoder om de finns tillgängliga för att snabba upp checkout.

Available payment methods and card details form

Checkout slutförd

Dodo Payments dirigerar varje betalning till den bästa förvärvaren för den försäljningen för att få bästa möjliga chans till framgång. Kunderna går in i ett framgångsflöde som du kan bygga.

Success screen with confirmation checkmark

Dodo Payments skapar prenumeration

Dodo Payments skapar automatiskt en prenumeration för kunden, redo för dig att tillhandahålla. Betalningsmetoden som kunden använde hålls på fil för förnyelser eller ändringar av prenumerationen.

Subscription created with webhook notification

Snabbstart

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

import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK for inline mode
DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout in a specific container
DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout" // ID of the container element
});

Se till att du har ett behållarelement med motsvarande id på din sida: <div id="dodo-inline-checkout"></div>.

Steg-för-steg Integrationsguide

Installera SDK:n

Installera Dodo Payments Checkout SDK:

npm install dodopayments-checkout

Initiera SDK:n för Inline Display

Initiera SDK:n och specificera displayType: 'inline'. Du bör också lyssna efter checkout.breakdown händelsen för att uppdatera din UI med realtidsberäkningar av skatt och totalsumma.

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Skapa ett Behållarelement

Lägg till ett element i din HTML där checkout-ramen kommer att injiceras:

<div id="dodo-inline-checkout"></div>

Öppna Checkout

Anropa DodoPayments.Checkout.open() med checkoutUrl och elementId för din behållare:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Testa Din Integration

Starta din utvecklingsserver:

npm run dev

Testa checkout-flödet:
- Ange din e-post och adressuppgifter i inline-ramen.
- Verifiera att din anpassade ordersammanfattning uppdateras i realtid.
- Testa betalningsflödet med testuppgifter.
- Bekräfta att omdirigeringar fungerar korrekt.

Du bör se checkout.breakdown händelser loggade i din webbläsarkonsol om du har lagt till en konsollogg i onEvent callback.

Gå Live

När du är redo för produktion:

Ändra läget till 'live':

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

Uppdatera dina checkout-URL:er för att använda live checkout-sessioner från din backend.
Testa hela flödet i produktion.

Komplett React Exempel

Detta exempel visar hur man implementerar en anpassad ordersammanfattning tillsammans med den inline-kassan, och håller dem synkroniserade med hjälp av checkout.breakdown händelsen.

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

API Referens

Konfiguration

Initieringsalternativ

interface InitializeOptions {
  mode: "test" | "live";
  displayType: "inline"; // Required for inline checkout
  onEvent: (event: CheckoutEvent) => void;
}

Alternativ	Typ	Obligatoriskt	Beskrivning
`mode`	`"test" \| "live"`	Ja	Miljöläge.
`displayType`	`"inline" \| "overlay"`	Ja	Måste sättas till `"inline"` för att bädda in kassan.
`onEvent`	`function`	Ja	Callback-funktion för att hantera kassa-händelser.

Checkoutalternativ

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    themeConfig?: ThemeConfig;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

Alternativ	Typ	Obligatoriskt	Beskrivning
`checkoutUrl`	`string`	Ja	URL för kassa-session.
`elementId`	`string`	Ja	Den `id` av DOM-elementet där kassan ska renderas.
`options.showTimer`	`boolean`	Nej	Visa eller dölja kassatimer. Standard är `true`. När den är inaktiverad får du `checkout.link_expired` händelsen när sessionen går ut.
`options.showSecurityBadge`	`boolean`	Nej	Visa eller dölja säkerhetsmärket. Standard är `true`.
`options.manualRedirect`	`boolean`	Nej	När den är aktiverad kommer kassan inte att omdirigera automatiskt efter slutförande. Istället får du `checkout.status` och `checkout.redirect_requested` händelser för att hantera omdirigeringen själv.
`options.themeConfig`	`ThemeConfig`	Nej	Anpassad temakonfiguration.
`options.payButtonText`	`string`	Nej	Anpassad text att visa på betalningsknappen.
`options.fontSize`	`FontSize`	Nej	Global teckenstorlek för kassan.
`options.fontWeight`	`FontWeight`	Nej	Global typsnittsvikt för kassan.

Metoder

Öppna Checkout

Öppnar checkout-ramen i den angivna behållaren.

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Du kan också skicka ytterligare alternativ för att anpassa kassabeteendet:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout",
  options: {
    showTimer: false,
    showSecurityBadge: false,
    manualRedirect: true,
    payButtonText: "Pay Now",
  },
});

När du använder manualRedirect, hantera kassa-slutförande i din onEvent callback:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.status") {
      const status = event.data?.message?.status;
      // Handle status: "succeeded", "failed", or "processing"
    }
    if (event.event_type === "checkout.redirect_requested") {
      const redirectUrl = event.data?.message?.redirect_to;
      // Redirect the customer manually
      window.location.href = redirectUrl;
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
    }
  },
});

Stäng Kassa

Tar bort kassa-ramen programatiskt och städar upp händelselyssnare.

DodoPayments.Checkout.close();

Kontrollera Status

Returnerar om kassa-ramen för närvarande är injicerad.

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

Händelser

SDK:n tillhandahåller realtids-händelser genom onEvent callback. För inline-kassan är checkout.breakdown särskilt användbar för att synkronisera din UI.

Händelsetyp	Beskrivning
`checkout.opened`	Kassaram har laddats.
`checkout.breakdown`	Utlöst när priser, skatter eller rabatter uppdateras.
`checkout.customer_details_submitted`	Kunduppgifter har skickats.
`checkout.pay_button_clicked`	Utlöst när kunden klickar på betalningsknappen. Användbart för analys och spårning av konverteringsflöden.
`checkout.redirect`	Kassan kommer att utföra en omdirigering (t.ex. till en bank-sida).
`checkout.error`	Ett fel inträffade under kassan.
`checkout.link_expired`	Utlöst när kassa-sessionen går ut. Endast mottagen när `showTimer` är inställt på `false`.
`checkout.status`	Utlöst när `manualRedirect` är aktiverat. Innehåller kassa-status (`succeeded`, `failed`, eller `processing`).
`checkout.redirect_requested`	Utlöst när `manualRedirect` är aktiverat. Innehåller URL:en för att omdirigera kunden till.

Kassa Brytdata

Händelsen checkout.breakdown tillhandahåller följande data:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;         // Amount in cents
  tax?: number;              // Amount in cents
  total?: number;            // Amount in cents
  currency?: string;         // e.g., "USD"
  finalTotal?: number;       // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

Kassa Status Händelsedata

När manualRedirect är aktiverat, får du checkout.status händelsen med följande data:

interface CheckoutStatusEventData {
  message: {
    status?: "succeeded" | "failed" | "processing";
  };
}

Kassa Omdirigering Begärd Händelsedata

När manualRedirect är aktiverat, får du checkout.redirect_requested händelsen med följande data:

interface CheckoutRedirectRequestedEventData {
  message: {
    redirect_to?: string;
  };
}

Förstå Brytdata Händelsen

Händelsen checkout.breakdown är det primära sättet att hålla din applikations UI synkroniserad med Dodo Payments kassastatus. När den utlöses:

Vid initialisering: Omedelbart efter att kassa-ramen har laddats och är redo.
Vid adressändring: När kunden väljer ett land eller anger ett postnummer som resulterar i en skatteberäkning.

Fältdetaljer:

Fält	Beskrivning
`subTotal`	Summan av alla radposter i sessionen innan några rabatter eller skatter tillämpas.
`discount`	Det totala värdet av alla tillämpade rabatter.
`tax`	Det beräknade skattebeloppet. I `inline` läge uppdateras detta dynamiskt när användaren interagerar med adressfälten.
`total`	Det matematiska resultatet av `subTotal - discount + tax` i sessionens basvaluta.
`currency`	ISO-valutakoden (t.ex. `"USD"`) för standard subtotal, rabatt och skattevärden.
`finalTotal`	Det faktiska beloppet som kunden debiteras. Detta kan inkludera ytterligare justeringar av utländsk växelkurs eller lokala betalningsmetodavgifter som inte ingår i den grundläggande prisuppdelningen.
`finalTotalCurrency`	Valutan i vilken kunden faktiskt betalar. Detta kan skilja sig från `currency` om köpkraftsparitet eller lokal valutakonvertering är aktiv.

Nyckelintegrationstips:

Valutaformatering: Priser returneras alltid som heltal i den minsta valutaenheten (t.ex. cent för USD, yen för JPY). För att visa dem, dela med 100 (eller lämplig tiopotens) eller använd ett formateringsbibliotek som Intl.NumberFormat.
Hantering av initiala tillstånd: När kassan först laddas, kan tax och discount vara 0 eller null tills användaren anger sin faktureringsinformation eller tillämpar en kod. Din UI bör hantera dessa tillstånd smidigt (t.ex. visa en dash — eller dölja raden).
“Slutlig total” vs “Total”: Medan total ger dig den standardprisberäkningen, är finalTotal källan till sanningen för transaktionen. Om finalTotal är närvarande, återspeglar det exakt vad som kommer att debiteras kundens kort, inklusive eventuella dynamiska justeringar.
Realtidsfeedback: Använd fältet tax för att visa användare att skatter beräknas i realtid. Detta ger en “live” känsla till din kassasida och minskar friktionen under adressinmatningssteget.

Implementeringsalternativ

Paketmanagerinstallation

Installera via npm, yarn eller pnpm som visas i Steg-för-steg integrationsguiden.

CDN-implementering

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Inline 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",
            displayType: "inline",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <div id="dodo-inline-checkout"></div>

    <script>
        // Open the checkout
        DodoPaymentsCheckout.DodoPayments.Checkout.open({
            checkoutUrl: "https://test.dodopayments.com/session/cks_123",
            elementId: "dodo-inline-checkout"
        });
    </script>
</body>
</html>

Temaanpassning

Du kan anpassa kassans utseende genom att skicka ett themeConfig objekt i options parametern när du öppnar kassan. Temakonfigurationen stöder både ljusa och mörka lägen, vilket gör att du kan anpassa färger, kanter, text, knappar och kantradie.

Grundläggande temakonfiguration

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",
    },
  },
});

Komplett temakonfiguration

Alla tillgängliga temaegenskaper:

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
        inputFocusBorder: "#D0D5DD", // Input focus 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",
        inputFocusBorder: "#323232",
        
        // 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 ljus läge

Om du bara vill anpassa det ljusa temat:

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 bara vill anpassa det mörka temat:

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

Partiell temaupphävning

Du kan åsidosätta endast specifika egenskaper. Kassan kommer att använda standardvärden för egenskaper som du inte specificerar:

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
    },
  },
});

Temakonfiguration med andra alternativ

Du kan kombinera temakonfiguration med andra kassaval:

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

TypeScript-typer

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

import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

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

Felhantering

SDK:n tillhandahåller detaljerad felinformation genom händelsessystemet. Implementera alltid korrekt felhantering i din onEvent callback:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
    }
  }
});

Hantera alltid checkout.error händelsen för att ge en bra användarupplevelse när problem uppstår.

Bästa praxis

Responsiv design: Se till att ditt behållarelement har tillräcklig bredd och höjd. Iframen kommer vanligtvis att expandera för att fylla sin behållare.
Synkronisering: Använd checkout.breakdown händelsen för att hålla din anpassade ordersammanfattning eller prissättningstabeller synkroniserade med vad användaren ser i kassaram.
Skelett-tillstånd: Visa en laddningsindikator i din behållare tills checkout.opened händelsen utlöses.
Rengöring: Anropa DodoPayments.Checkout.close() när din komponent avmonteras för att städa upp iframen och händelselyssnarna.

För implementationer av mörkt läge rekommenderas det att använda #0d0d0d som bakgrundsfärg för optimal visuell integration med inline-kassaram.

Validering av betalningsstatus

Lita inte enbart på inline-kassa-händelser för att avgöra betalningsframgång eller misslyckande. Implementera alltid server-side validering med hjälp av webhooks och/eller polling.

Varför server-side validering är avgörande

Även om inline-kassa-händelser som checkout.status ger realtidsfeedback, bör de inte vara din enda sanning för betalningsstatus. Nätverksproblem, webbläsarkrascher eller användare som stänger sidan kan orsaka att händelser missas. För att säkerställa pålitlig betalningsvalidering:

Din server bör lyssna på webhook-händelser - Dodo Payments skickar webhooks för förändringar i betalningsstatus
Implementera en pollingmekanism - Din frontend bör pollera din server för statusuppdateringar
Kombinera båda metoderna - Använd webhooks som primär källa och polling som en fallback

Rekommenderad arkitektur

Implementeringssteg

1. Lyssna på kassa-händelser - När användaren klickar på betalning, börja förbereda för att verifiera status:

onEvent: (event) => {
  if (event.event_type === 'checkout.status') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. Pollera din server - Skapa en endpoint som kontrollerar din databas för betalningsstatus (uppdaterad av webhooks):

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. Hantera webhooks server-side - Uppdatera din databas när Dodo skickar payment.succeeded eller payment.failed webhooks. Se vår Webhooks-dokumentation för detaljer.

Hantering av omdirigeringar (3DS, Google Pay, UPI)

När du använder manualRedirect: true, kräver vissa betalningsmetoder att användaren omdirigeras bort från din sida för autentisering:

3D Secure (3DS) - Kortautentisering
Google Pay - Plånboksautentisering i vissa flöden
UPI - Indisk betalningsmetod omdirigeringar

När en omdirigering krävs, får du checkout.redirect_requested händelsen. Omdirigera användaren till den angivna URL:en:

if (event.event_type === 'checkout.redirect_requested') {
  const redirectUrl = event.data?.message?.redirect_to;
  // Save payment ID before redirect, then redirect
  sessionStorage.setItem('pendingPaymentId', paymentId);
  window.location.href = redirectUrl;
}

Efter att autentiseringen är klar (framgång eller misslyckande), återvänder användaren till din sida. Anta inte framgång bara för att användaren återvände. Istället:

Kontrollera om användaren återvänder från en omdirigering (t.ex. via sessionStorage)
Börja pollera din server för den bekräftade betalningsstatusen
Visa ett “Verifierar betalning…” tillstånd medan du pollar
Visa framgång/misslyckande UI baserat på den serverbekräftade statusen

Verifiera alltid betalningsstatus server-side efter omdirigeringar. Att användaren återvänder till din sida betyder bara att autentiseringen är klar—det indikerar inte om betalningen lyckades eller misslyckades.

Felsökning

Kassaram visas inte

Verifiera att elementId matchar id av en div som faktiskt finns i DOM.
Se till att displayType: 'inline' skickades till Initialize.
Kontrollera att checkoutUrl är giltig.

Skatter uppdateras inte i min UI

Se till att du lyssnar på checkout.breakdown händelsen.
Skatter beräknas endast efter att användaren anger ett giltigt land och postnummer i kassaram.

Aktivera Digitala Plånböcker

För detaljerad information om att ställa in Apple Pay, Google Pay och andra digitala plånböcker, se sidan Digitala Plånböcker.

Snabbinstallation för Apple Pay

Ladda ner domänassocieringsfil

Ladda ner Apple Pay domänassocieringsfilen.

Begär aktivering

E-posta support@dodopayments.com med din produktionsdomän URL och begär aktivering av Apple Pay.

Testa efter bekräftelse

När det är bekräftat, verifiera att Apple Pay visas i kassan och testa hela flödet.

Apple Pay kräver domänverifiering innan det visas i produktion. Kontakta support innan du går live om du planerar att erbjuda Apple Pay.

Webbläsarstöd

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

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

Inline vs Overlay Checkout

Välj rätt kassatyp för ditt användningsområde:

Funktion	Inline Checkout	Overlay Checkout
Integrationsdjup	Fullständigt inbäddad i sidan	Modal ovanpå sidan
Layoutkontroll	Full kontroll	Begränsad
Branding	Sömlös	Separat från sidan
Implementeringsinsats	Högre	Lägre
Bäst för	Anpassade kassasidor, högkonverteringsflöden	Snabb integration, befintliga sidor

Använd inline checkout när du vill ha maximal kontroll över kassaupplevelsen och sömlös branding. Använd overlay checkout för snabbare integration med minimala ändringar av dina befintliga sidor.

Relaterade Resurser

Overlay Checkout

Använd overlay checkout för snabb modalbaserad integration.

Checkout Sessions API

Skapa kassatjänster för att driva dina kassaupplevelser.

Webhooks

Hantera betalningsevenemang på serversidan med webhooks.

Integrationsguide

Komplett guide till att integrera Dodo Payments.

För mer hjälp, besök vår Discord-community eller kontakta vårt supportteam för utvecklare.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​Översikt

​Hur Det Fungerar

​Vad Gör En Bra Inline Checkout?

​Kundresa

​Snabbstart

​Steg-för-steg Integrationsguide

​Komplett React Exempel

​API Referens

​Konfiguration

​Initieringsalternativ

​Checkoutalternativ

​Metoder

​Öppna Checkout

​Stäng Kassa

​Kontrollera Status

​Händelser

​Kassa Brytdata

​Kassa Status Händelsedata

​Kassa Omdirigering Begärd Händelsedata

​Förstå Brytdata Händelsen

​Implementeringsalternativ

​Paketmanagerinstallation

​CDN-implementering

​Temaanpassning

​Grundläggande temakonfiguration

​Komplett temakonfiguration

​Endast ljus läge

​Endast mörkt läge

​Partiell temaupphävning

​Temakonfiguration med andra alternativ

​TypeScript-typer

​Felhantering

​Bästa praxis

​Validering av betalningsstatus

​Varför server-side validering är avgörande

​Rekommenderad arkitektur

​Implementeringssteg

​Hantering av omdirigeringar (3DS, Google Pay, UPI)

​Felsökning

​Aktivera Digitala Plånböcker

​Snabbinstallation för Apple Pay

​Webbläsarstöd

​Inline vs Overlay Checkout

​Relaterade Resurser

Overlay Checkout

Checkout Sessions API

Webhooks

Integrationsguide

Översikt

Hur Det Fungerar

Vad Gör En Bra Inline Checkout?

Kundresa

Snabbstart

Steg-för-steg Integrationsguide

Komplett React Exempel

API Referens

Konfiguration

Initieringsalternativ

Checkoutalternativ

Metoder

Öppna Checkout

Stäng Kassa

Kontrollera Status

Händelser

Kassa Brytdata

Kassa Status Händelsedata

Kassa Omdirigering Begärd Händelsedata

Förstå Brytdata Händelsen

Implementeringsalternativ

Paketmanagerinstallation

CDN-implementering

Temaanpassning

Grundläggande temakonfiguration

Komplett temakonfiguration

Endast ljus läge

Endast mörkt läge

Partiell temaupphävning

Temakonfiguration med andra alternativ

TypeScript-typer

Felhantering

Bästa praxis

Validering av betalningsstatus

Varför server-side validering är avgörande

Rekommenderad arkitektur

Implementeringssteg

Hantering av omdirigeringar (3DS, Google Pay, UPI)

Felsökning

Aktivera Digitala Plånböcker

Snabbinstallation för Apple Pay

Webbläsarstöd

Inline vs Overlay Checkout

Relaterade Resurser