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

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
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
  };
}

Alternativ	Typ	Obligatorisk	Beskrivning
`checkoutUrl`	`string`	Ja	Checkout-sessionens URL.
`elementId`	`string`	Ja	Den `id` av DOM-elementet där checkouten ska renderas.
`options.showTimer`	`boolean`	Nej	Visa eller dölja checkout-timern. Standardinställningen är `true`. När den är inaktiverad kommer du att få `checkout.link_expired`-händelsen när sessionen går ut.
`options.showSecurityBadge`	`boolean`	Nej	Visa eller dölja säkerhetsmärket. Standardinställningen är `true`.
`options.manualRedirect`	`boolean`	Nej	När den är aktiverad kommer checkouten inte att omdirigera automatiskt efter slutförande. Istället kommer du att få `checkout.status` och `checkout.redirect_requested`-händelser för att hantera omdirigeringen själv.
`options.payButtonText`	`string`	Nej	Anpassad text som ska visas på betalningsknappen.

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 tillhandahåller realtids-händelser genom onEvent-callback. För inline-kassa är checkout.breakdown särskilt användbar för att synkronisera din UI.

Händelsetyp	Beskrivning
`checkout.opened`	Kassa-ramen har laddats.
`checkout.breakdown`	Utlöst när priser, skatter eller rabatter uppdateras.
`checkout.customer_details_submitted`	Kundens uppgifter har skickats.
`checkout.redirect`	Kassa 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älld på `false`.
`checkout.status`	Utlöst när `manualRedirect` är aktiverad. Innehåller kassa-status (`succeeded`, `failed`, eller `processing`).
`checkout.redirect_requested`	Utlöst när `manualRedirect` är aktiverad. Innehåller URL:en för att omdirigera kunden till.

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 aktiverad, 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 aktiverad, 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 primära sättet att hålla din applikations UI synkroniserad med Dodo Payments kassa-status. 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 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 prisberäkningen.
`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 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).
“Slutgiltigt totalbelopp” 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 kassa-sida 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 utseendet på kassan 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. 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 kassa-ramen.
Skeletttillstå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ändelselyssnare.

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

Felsökning

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

Aktivera Apple Pay

Apple Pay gör det möjligt för kunder att slutföra betalningar snabbt och säkert med sina sparade betalningsmetoder. När det är aktiverat kan kunder starta Apple Pay-modalen direkt från kassaöverlägget på stödda enheter.

Apple Pay stöds på iOS 17+, iPadOS 17+ och Safari 17+ på macOS.

För att aktivera Apple Pay för din domän i produktion, följ dessa steg:

Ladda ner och ladda upp Apple Pay domänassocieringsfilen

Ladda ner Apple Pay domänassocieringsfilen.Ladda upp filen till din webbserver på /.well-known/apple-developer-merchantid-domain-association. Till exempel, om din webbplats är example.com, gör filen tillgänglig på https://example.com/well-known/apple-developer-merchantid-domain-association.

Begär aktivering av Apple Pay

E-posta [email protected] med följande information:

Din produktionsdomän-URL (t.ex. https://example.com)
Begäran om att aktivera Apple Pay för din domän

Du kommer att få bekräftelse inom 1-2 arbetsdagar när Apple Pay har aktiverats för din domän.

Verifiera tillgänglighet för Apple Pay

Efter att ha fått bekräftelse, testa Apple Pay i din kassa:

Öppna din kassa på en stödd enhet (iOS 17+, iPadOS 17+ eller Safari 17+ på macOS)
Verifiera att Apple Pay-knappen visas som ett betalningsalternativ
Testa hela betalningsflödet

Apple Pay måste aktiveras för din domän innan det visas som ett betalningsalternativ 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 (senaste)
Firefox (senaste)
Safari (senaste)
Edge (senaste)
IE11+

Inline vs Overlay Checkout

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

Funktion	Inline Checkout	Overlay Checkout
Integrationsdjup	Helt 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ögkonverterande flö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 kassasessioner för att driva dina kassaupplevelser.

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ödteam.

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

​Felsökning

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

Felsökning

Aktivera Apple Pay

Webbläsarstöd

Inline vs Overlay Checkout

Relaterade resurser