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 och 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-exempel med obligatoriska element märkta

Å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 sidfoten. 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.

Customer opens 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

Customer enters their details

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.

Customer selects payment method

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 completed

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 creates subscription

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 container-element med motsvarande id på din sida: <div id="dodo-inline-checkout"></div>.

Steg-för-steg Integrationsguide

Install the SDK

Installera Dodo Payments Checkout SDK:

npm install dodopayments-checkout

Initialize the SDK for Inline Display

Initiera SDK:n och ange displayType: 'inline'. Du bör också lyssna på checkout.breakdown-händelsen för att uppdatera ditt användargränssnitt 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.
    }
  },
});

Create a Container Element

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

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

Open the Checkout

Anropa DodoPayments.Checkout.open() med checkoutUrl och elementId från din container:

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

Test Your 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 loggas i din webbläsarkonsol om du lade till en console.log i onEvent-callbacken.

Go 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 du implementerar en anpassad orderöversikt bredvid inline checkout och håller dem synkade 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 vara inställt på `"inline"` för att bädda in kassan.
`onEvent`	`function`	Ja	Callbackfunktion 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;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

Alternativ	Typ	Obligatoriskt	Beskrivning
`checkoutUrl`	`string`	Yes	URL för checkout-sessionen.
`elementId`	`string`	Yes	Det `id` av DOM-elementet där checkouten ska renderas.
`options.showTimer`	`boolean`	No	Visa eller göm checkout-timer. 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`	No	Visa eller göm säkerhetsmärket. Standard är `true`.
`options.manualRedirect`	`boolean`	No	När den är aktiverad kommer checkouten inte automatiskt att omdirigera efter slutförd betalning. Istället får du `checkout.status` och `checkout.redirect_requested`-händelser för att hantera omdirigeringen själv.
`options.payButtonText`	`string`	No	Anpassad text som visas på betalknappen.
`options.fontSize`	`FontSize`	No	Global teckenstorlek för checkouten.
`options.fontWeight`	`FontWeight`	No	Global fontvikt för checkouten.

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 slutförandet av kassan 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 ger realtids-händelser via onEvent-callbacken. För inline checkout är checkout.breakdown särskilt användbar för att synkronisera ditt användargränssnitt.

Händelsetyp	Beskrivning
`checkout.opened`	Kassaramen har laddats.
`checkout.form_ready`	Checkout-formuläret är redo att ta emot användarinmatning. Nyttigt för att dölja laddningstillstånd och visa kassans användargränssnitt.
`checkout.breakdown`	Utlöses när priser, skatter eller rabatter uppdateras.
`checkout.customer_details_submitted`	Kunduppgifter har skickats.
`checkout.pay_button_clicked`	Utlöses när kunden klickar på betalknappen. Nyttigt för analys och konverteringsspårning.
`checkout.redirect`	Kassa kommer att utföra en omdirigering (t.ex. till en bank).
`checkout.error`	Ett fel uppstod under kassan.
`checkout.link_expired`	Utlöses när kassasessionen löper ut. Mottas endast när `showTimer` är inställt på `false`.
`checkout.status`	Utlöses när `manualRedirect` är aktiverat. Innehåller kassans status (`succeeded`, `failed` eller `processing`).
`checkout.redirect_requested`	Utlöses när `manualRedirect` är aktiverat. Innehåller URL:en för att omdirigera kunden.

Kassa 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
}

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

checkout.breakdown-händelsen är det främsta sättet att hålla din applikations användargränssnitt synkroniserat 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 före rabatter eller skatter.
`discount`	Det totala värdet av alla tillämpade rabatter.
`tax`	Den beräknade skattesumman. 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 baskurrency.
`currency`	ISO-valutakoden (t.ex. `"USD"`) för standarddelen, rabatten och skattevärdena.
`finalTotal`	Det faktiska beloppet som kunden debiteras. Det kan inkludera ytterligare valutajusteringar eller avgifter för lokala betalningsmetoder som inte ingår i grundprisdelen.
`finalTotalCurrency`	Den valuta som kunden faktiskt betalar i. Den kan skilja sig från `currency` om köpkraftsparitet eller lokal valutakonvertering är aktivt.

Nyckelintegrationstips:

Valutaformat: Priser returneras alltid som heltal i den minsta valutasatsen (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 formatteringsbibliotek som Intl.NumberFormat.
Hantera initiala tillstånd: När kassan först laddas kan tax och discount vara 0 eller null tills användaren anger sina faktureringsuppgifter eller anger en kod. Ditt användargränssnitt bör hantera dessa tillstånd smidigt (t.ex. visa ett streck — eller dölja raden).
“Slutgiltigt totalt” vs “Totalt”: Medan total ger dig standardprisberäkningen, är finalTotal sanningskällan för transaktionen. Om finalTotal finns, speglar det exakt vad som kommer att debiteras kundens kort, inklusive eventuella dynamiska justeringar.
Feedback i realtid: Använd fältet tax för att visa användare att skatterna beräknas i realtid. Det ger känslan av ett “live”-flöde på din kassasida och minskar friktionen under adresssteget.

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>

Uppdatera betalningsmetod

Inline checkout stöder payment method updates för prenumerationer. När en kund behöver uppdatera sin betalmetod – oavsett om det gäller en aktiv prenumeration eller att återaktivera en pausad prenumeration – kan du rendera uppdateringsflödet direkt på din sida.

Så fungerar det

Anropa Update Payment Method API för att få en payment_link:

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  type: 'new',
  return_url: 'https://example.com/return'
});

Skicka det returnerade payment_link som checkoutUrl för att öppna inline checkout:

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

Inline-ramen visar endast formuläret för att samla in betalmetod. Kunder kan ange nya kortuppgifter eller välja en sparad betalmetod utan att lämna din sida.

För prenumerationer i vänteläge

När du uppdaterar betalmetoden för en prenumeration i on_hold-status skapar Dodo Payments automatiskt en avgift för eventuella återstående skulder. Övervaka payment.succeeded och subscription.active webhookar för att bekräfta återaktiveringen.

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  type: 'new',
  return_url: 'https://example.com/return'
});

if (response.payment_id) {
  // Charge created for remaining dues
  // Open inline checkout for payment collection
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

Du kan också använda en befintlig sparad betalmetod istället för att samla in nya uppgifter genom att skicka type: 'existing' med en payment_method_id till Update Payment Method API.

Felhantering

SDK:n ger detaljerad felinformation via händelsesystemet. 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 containerelement har tillräcklig bredd och höjd. Iframen expanderar vanligtvis för att fylla sin container.
Synkronisering: Använd checkout.breakdown-händelsen för att hålla din anpassade ordersammanfattning eller prissättningstabeller i takt med vad användaren ser i checkout-ramen.
Skeletttillstånd: Visa en laddningsindikator i din container tills checkout.opened-händelsen avfyras.
Rensning: Anropa DodoPayments.Checkout.close() när din komponent avmonteras för att städa upp iframen och händelselyssnarna.

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

Validering av betalstatus

Lita inte enbart på inline checkout-händelser för att avgöra om betalningen lyckades eller misslyckades. Implementera alltid serverbaserad validering med webhookar och/eller pollning.

Varför serverbaserad validering är avgörande

Även om inline checkout-händelser som checkout.status ger realtidsfeedback, bör de inte vara din enda sanning för betalningsstatus. Nätverksproblem, webbläsarkrascher eller att användare stänger sidan kan göra 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 webhookar för betalstatusförändringar
Implementera en pollningsmekanism - Din frontend bör poll:a din server efter statusuppdateringar
Kombinera båda tillvägagångssätten - Använd webhookar som den primära källan och pollning som fallback

Rekommenderad arkitektur

Implementeringssteg

1. Lyssna på checkout-händelser - När användaren klickar på betala, börja förbereda för att verifiera statusen:

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

2. Poll:a din server - Skapa en endpoint som kontrollerar din databas för betalningsstatus (uppdateras av webhookar):

// 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 webhookar server-side - Uppdatera din databas när Dodo skickar payment.succeeded eller payment.failed webhookar. Se vår Webhooks-dokumentation för detaljer.

Hantera omdirigeringar (3DS, Google Pay, UPI)

När du använder manualRedirect: true kräver vissa betalmetoder 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 betalmetod som omdirigerar

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

När autentiseringen är klar (lyckad eller misslyckad) återvänder användaren till din sida. Förutsätt inte att det lyckades bara för att användaren kom tillbaka. Gör istället så här:

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

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

Felsökning

Checkout frame is not appearing

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

Taxes are not updating in my UI

Se till att du lyssnar på checkout.breakdown-händelsen.
Skatter beräknas först efter att användaren anger ett giltigt land och postnummer i checkout-ramen.

Aktivera digitala plånböcker

För detaljerad information om hur du ställer in Apple Pay, Google Pay och andra digitala plånböcker, se sidan Digital Wallets.

Snabb inställning för Apple Pay

Download domain association file

Ladda ner Apple Pay domain association file.

Request activation

Skicka ett mejl till support@dodopayments.com med din produktionsdomän och be om att aktivera Apple Pay.

Test after confirmation

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

Apple Pay kräver domänverifiering innan det visas i produktion. Kontakta supporten 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 (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
IE11+

Inline vs Overlay Checkout

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

Feature	Inline Checkout	Overlay Checkout
Integrationsdjup	Fullt inbäddad på sidan	Modal som ligger ovanpå sidan
Layoutkontroll	Full kontroll	Begränsad
Varumärkesprofil	Sömlös	Separat från sidan
Implementeringsinsats	Högre	Lägre
Bäst för	Anpassade kassasidor, flöden med hög konvertering	Snabb integration, befintliga sidor

Använd inline checkout när du vill ha maximal kontroll över checkout-upplevelsen och sömlös varumärkesprofilering. Använd overlay checkout för snabbare integration med minimala ändringar på 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 betalningshändelser server-side med webhookar.

Integration Guide

Komplett guide till att integrera Dodo Payments.

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

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

​Uppdatera betalningsmetod

​Så fungerar det

​För prenumerationer i vänteläge

​Felhantering

​Bästa praxis

​Validering av betalstatus

​Varför serverbaserad validering är avgörande

​Rekommenderad arkitektur

​Implementeringssteg

​Hantera omdirigeringar (3DS, Google Pay, UPI)

​Felsökning

​Aktivera digitala plånböcker

​Snabb inställning för Apple Pay

​Webbläsarstöd

​Inline vs Overlay Checkout

​Relaterade resurser

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

Ö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

Uppdatera betalningsmetod

Så fungerar det

För prenumerationer i vänteläge

Felhantering

Bästa praxis

Validering av betalstatus

Varför serverbaserad validering är avgörande

Rekommenderad arkitektur

Implementeringssteg

Hantera omdirigeringar (3DS, Google Pay, UPI)

Felsökning

Aktivera digitala plånböcker

Snabb inställning för Apple Pay

Webbläsarstöd

Inline vs Overlay Checkout

Relaterade resurser