Inline Checkout

Ö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

Exempel på inline checkout-layout som visar nödvändiga element

Å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 den 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 konsol logg 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 inline checkout, och håller dem synkroniserade med 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 checkout.
`onEvent`	`function`	Ja	Callback-funktion för att hantera checkout-händelser.

Checkoutalternativ

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
}

Alternativ	Typ	Obligatoriskt	Beskrivning
`checkoutUrl`	`string`	Ja	Checkout-session URL.
`elementId`	`string`	Ja	`id` av DOM-elementet där checkout ska renderas.

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

Stäng Checkout

Programmerat tar bort checkout-ramen och städar upp händelselyssnare.

DodoPayments.Checkout.close();

Kontrollera Status

Returnerar om checkout-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 checkout är checkout.breakdown särskilt användbar för att synkronisera din UI.

Händelsetyp	Beskrivning
`checkout.opened`	Checkout-ramen har laddats.
`checkout.breakdown`	Utlöst när priser, skatter eller rabatter uppdateras.
`checkout.customer_details_submitted`	Kunduppgifter har skickats.
`checkout.redirect`	Checkout kommer att utföra en omdirigering (t.ex. till en bank sida).
`checkout.error`	Ett fel inträffade under checkout.

Checkout Brytdata

checkout.breakdown händelsen 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
}

Förstå Bryt-händelsen

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

Vid initiering: Omedelbart efter att checkout-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 linjeposter 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 valutajusteringar eller lokala betalningsmetodavgifter som inte ingår i den grundläggande prisuppdelningen.
`finalTotalCurrency`	Valutan som 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 den lämpliga tiopotensen) eller använd ett formateringsbibliotek som Intl.NumberFormat.
Hantering av initiala tillstånd: När checkout först laddas, kan tax och discount vara 0 eller null tills användaren tillhandahåller 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).
“Slutgiltig total” vs “Total”: Medan total ger dig den standardprisberäkningen, är finalTotal källan till sanning 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 tax fältet för att visa användare att skatter beräknas i realtid. Detta ger en “live” känsla till din checkout-sida och minskar friktionen under adressinmatningssteget.

Implementeringsalternativ

Paketmanagerinstallation

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

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>

TypeScript-stöd

SDK:n är skriven i TypeScript och inkluderar omfattande typdefinitioner.

import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    // event is fully typed
    console.log(event.event_type, event.data);
  },
});

Felhantering

SDK:n tillhandahåller detaljerad felinformation genom händelsystemet. 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. Iframe 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 checkout-ramen.
Skelettillstånd: Visa en laddningsindikator i din behållare tills checkout.opened händelsen utlöses.
Städning: Anropa DodoPayments.Checkout.close() när din komponent avmonteras för att städa upp iframen och händelselyssnare.

Felsökning

Checkout-ramen 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 efter checkout.breakdown händelsen.
Skatter beräknas endast efter att användaren anger ett giltigt land och postnummer i checkout-ramen.

Webbläsarstöd

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

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

Apple Pay stöds för närvarande inte i inline checkout-upplevelsen. Vi planerar att lägga till stöd för Apple Pay i en framtida version.

Inline vs Overlay Checkout

Välj rätt checkout-typ för ditt användningsfall:

Funktion	Inline Checkout	Overlay Checkout
Integrationsdjup	Helt inbäddad på 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 checkout-sidor, högkonverterande flöden	Snabb integration, befintliga sidor

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

Relaterade resurser

Overlay Checkout

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

Checkout Sessions API

Skapa checkout-sessioner för att driva dina checkout-upplevelser.

Webhooks

Hantera betalningsevenemang server-side med webhooks.

Integrationsguide

Komplett guide för att integrera Dodo Payments.

För mer hjälp, besök vår Discord-community eller kontakta vårt utvecklarstöd.

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 Checkout

Kontrollera Status

Händelser

Checkout Brytdata

Förstå Bryt-händelsen

Implementeringsalternativ

Paketmanagerinstallation

CDN-implementering

TypeScript-stöd

Felhantering

Bästa praxis

Felsökning

Webbläsarstöd

Inline vs Overlay Checkout

Relaterade resurser

Overlay Checkout

Checkout Sessions API

Webhooks

Integrationsguide

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 Checkout

​Kontrollera Status

​Händelser

​Checkout Brytdata

​Förstå Bryt-händelsen

​Implementeringsalternativ

​Paketmanagerinstallation

​CDN-implementering

​TypeScript-stöd

​Felhantering

​Bästa praxis

​Felsökning

​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 Checkout

Kontrollera Status

Händelser

Checkout Brytdata

Förstå Bryt-händelsen

Implementeringsalternativ

Paketmanagerinstallation

CDN-implementering

TypeScript-stöd

Felhantering

Bästa praxis

Felsökning

Webbläsarstöd

Inline vs Overlay Checkout

Relaterade resurser