Hoppa till huvudinnehåll
Checkout page
Dodo Payments checkout är en konverteringsoptimerad, globalt kompatibel kassasida utformad för digitala produkter och SaaS-företag. Den stödjer flera valutor, språk, skatter, rabatter, tillägg och affärsanpassade efterlevnadsrutiner.

Adaptiv Valuta

Adaptiv Valuta gör det möjligt för kunder att betala i sin föredragna lokala valuta, vilket förbättrar förtroendet och konverteringsgraden.

Hur Det Fungerar

  1. Aktivera: Aktivera Adaptiv Valuta från dina Företagsinställningar
  2. Välj: Kunder kan byta valuta direkt vid kassan
  3. Konvertera: Priser konverteras dynamiskt med hjälp av realtids FX-kurser
  4. Visa: Slutbeloppet visas transparent innan betalning
Currency selector on checkout

Adaptive Currency

Läs mer om stödda valutor, växlingsavgifter och hantering av återbetalningar.

Flerspråkig Kassa

Dodo Payments stöder flera språk på kassasidan, vilket gör det möjligt för kunder att slutföra betalningar på ett språk de är bekväma med.
Language selector on checkout

Nyckelhöjdpunkter

  • Språk väljare tillgänglig direkt vid kassan
  • UI-text, etiketter och systemmeddelanden är lokaliserade
  • Förbättrar tillgänglighet och internationell konvertering

Stödda Språk

Kassan stöder 21 språk:
LanguageCode
Arabicar
Catalanca
Chinesezh
Dutchnl
Englishen
Frenchfr
Germande
Hebrewhe
Indonesianid
Italianit
Japaneseja
Koreanko
Malayms
Polishpl
Portuguesept
Romanianro
Russianru
Spanishes
Swedishsv
Thaith
Turkishtr
Du kan tvinga ett specifikt språk i kassan genom att ange force_language-parametern när du skapar en kassasession. Se Checkout Sessions API för detaljer.

Automatisk skatteberäkning

Skatter beräknas automatiskt baserat på kundens faktureringsadress, vilket säkerställer efterlevnad av moms, GST och försäljningsskatter utan manuell konfigurering.

Hur skatteberäkning fungerar

1

Location Detection

Skatteregler tillämpas baserat på kundens land (och region där det är tillämpligt).
2

Dynamic Updates

Skattebelopp uppdateras automatiskt när:
  • Land ändras
  • Adress uppdateras
3

Transparent Display

Den slutliga skatteredovisningen visas tydligt innan betalning.
Skatteberäkningen är helt automatiserad. Ingen manuell konfiguration krävs för standard digitala varor och SaaS-produkter.

Stöd för företagsmomssnummer

För registrerade företag tillåter kassan kunder att ange sitt företagsmomssnummer (t.ex. VAT/GST-nummer).

Vad händer när ett momsnummer anges

  • Skattebehörighet valideras i realtid
  • Tillämpliga skattebefrielser eller omvänd betalningsskyldighet tillämpas
  • Skattebelopp uppdateras omedelbart i kassan
Business Tax ID entry on checkout
Detta är särskilt användbart för B2B SaaS och digitala tjänster där företagskunder kan vara berättigade till skattebefrielser.

Rabattkoder

Kunder kan använda rabatt- eller kampanjkoder som du skapat i instrumentpanelen direkt på kassasidan.

Kassaupplevelse

  1. Kunden anger rabattkoden
  2. Rabatten valideras omedelbart
  3. Uppdaterat pris och besparing visas tydligt
Discount code entry on checkout

API-integrering

Förhandsapplicera en rabattkod eller aktivera rabattinmatningsfältet:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  discount_code: 'WELCOME20', // Pre-apply a code
  feature_flags: {
    allow_discount_code: true // Show discount input field
  },
  return_url: 'https://yoursite.com/return'
});

Discount Codes

Läs hur du skapar och hanterar rabattkoder.

Validate Discount by Code

Leta upp och validera rabatter med kodnamn.

Smart adressinsamling

Kassan stödjer flexibel adressinmatning för snabbare slutförande.

Tillgängliga alternativ

OptionDescription
Google Address AutofillSnabbt val med autokomplettering
Manual EntryFull kontroll för kompletta adresser
Country SelectionPåverkar skattemässiga och efterlevnadsmässiga regler
Adressinsamling balanserar hastighet, precision och global täckning för att maximera konvertering samtidigt som efterlevnad säkerställs.

Användardefinierade fält

Samla ytterligare information från kunder under kassan genom att definiera anpassade formulärfält. Detta är användbart för att samla data som företagsnamn, teamstorlek, referenskälla eller annan affärsspecifik information.

Tillgängliga fälttyper

TypeDescription
textEnradig textinmatning
numberNumerisk inmatning
emailE-postadress med validering
urlURL med validering
dateDatumväljare
dropdownVälj från fördefinierade alternativ
booleanJa/Nej-växling

Exempel

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  custom_fields: [
    {
      key: 'company_name',
      label: 'Company Name',
      field_type: 'text',
      required: true
    },
    {
      key: 'team_size',
      label: 'Team Size',
      field_type: 'dropdown',
      required: true,
      options: ['1-10', '11-50', '51-200', '200+']
    }
  ],
  return_url: 'https://yoursite.com/return'
});
Kundens svar inkluderas automatiskt i webhook-payloads (payment.succeeded, subscription.active) och API-svar via ARRAY custom_field_responses. Du kan definiera upp till fem anpassade fält per kassa-session.

Custom Fields Guide

Läs mer om konfiguration av anpassade fält och hur du hämtar svar.

Integritetspolicy och godkännande av villkor

För att säkerställa juridisk och efterlevnadsmässig transparens:
  • Privacy Policy och Buyer Terms länkar visas tydligt i kassan
  • Kunderna bekräftar uttryckligen dessa innan de slutför betalningen
Detta hjälper till att uppfylla globala konsumentskydd och krav på dataskydd inklusive GDPR-efterlevnad.

Samlingskassa

Produktkollektioner möjliggör en enhetlig kassaupplevelse där kunder kan se och välja mellan flera relaterade produkter (t.ex. Starter-, Pro- och Enterprise-planer) i en enda kassa.

Hur det fungerar

  1. Alla produkter visas: Kunder ser varje aktiv produkt i kollektionen
  2. Första produkten förvalt markeras: Den första produkten i kollektionen väljs automatiskt
  3. Jämför alternativ: Kunder kan jämföra pris och funktioner innan de väljer
  4. Endast ett val: Efter att ha valt en produkt fortsätter kassans standardbetalflöde

Skapa en samlingskassa

const session = await client.checkoutSessions.create({
  product_collection_id: 'pdc_abc123',
  product_cart: [], // Required: pass an empty array for collection checkout
  return_url: 'https://yoursite.com/return'
});
När du använder product_collection_id, skicka en tom product_cart-array. Rabattkoder kan inte förhandsappliceras vid skapandet av sessionen.

Product Collections

Läs hur du skapar och hanterar produktkollektioner för en enhetlig kassaupplevelse.

Konfiguration av kassasession

Styr kassans beteende med Checkout Sessions API:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customer: {
    email: 'customer@example.com',
    name: 'Jane Doe'
  },
  billing_currency: 'EUR', // Set specific currency
  discount_code: 'PROMO10',
  feature_flags: {
    allow_discount_code: true
  },
  return_url: 'https://yoursite.com/return',
  metadata: {
    order_ref: 'ORD-12345'
  }
});
Efter betalning omdirigeras kunder till din return_url med frågeparametrar som läggs till automatiskt – inklusive payment_id eller subscription_id, status, email och license_key (om tillämpligt). Se Checkout Sessions guide för hela listan.

Anpassning av kassans tema

Anpassa kassans utseende för att matcha ditt varumärke med customization.theme_config-parametern när du skapar en kassasession via API. Konfigurera färger, typsnitt, kantavrundning och knapptext för både ljust och mörkt läge.
Custom themed checkout page

Design & Theme Customization

Konfigurera teman visuellt från instrumentpanelen med färdiga teman, typografi, färger och förhandsgranskning i realtid.
Den här sektionen täcker server-side API-temakonfigurationen med customization.theme_config. Om du använder Checkout SDK (overlay eller inline checkout) ska du se temaanpassningsavsnitten i Overlay Checkout eller Inline Checkout som använder camelCase-egenskaper (t.ex. bgPrimary istället för bg_primary).

Tema konfigurationsalternativ

PropertyDescription
lightFärgkonfiguration för ljust läge
darkFärgkonfiguration för mörkt läge
font_primary_urlURL för primär font
font_secondary_urlURL för sekundär font
font_sizeTeckenstorlek: xs, sm, md, lg, xl, 2xl
font_weightTeckenvikt: normal, medium, bold, extraBold
radiusHörnradie för UI-element (t.ex. 4px, 0.5rem, 8px)
pay_button_textAnpassad text för betalknappen (t.ex. “Complete Purchase”, “Subscribe Now”)

Färgkonfiguration (ljust/mörkt läge)

Varje läge (light och dark) stöder följande färgegenskaper:
PropertyDescription
bg_primaryPrimär bakgrundsfärg
bg_secondarySekundär bakgrundsfärg
text_primaryPrimär textfärg
text_secondarySekundär textfärg
text_placeholderPlatshållartextfärg
text_errorFeltextfärg
text_successFramgångstextfärg
border_primaryPrimär kantfärg
border_secondarySekundär kantfärg
button_primaryPrimär knapp bakgrundsfärg
button_primary_hoverPrimär knapp hover-färg
button_secondarySekundär knapp bakgrundsfärg
button_secondary_hoverSekundär knapp hover-färg
button_text_primaryPrimär knapp textfärg
button_text_secondarySekundär knapp textfärg
input_focus_borderFokusfärg på input-kant
Alla färgfält accepterar standardformat för CSS-färger:
  • Hex: #fff, #ffffff, #ffffffff
  • RGB/RGBA: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
  • HSL/HSLA: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)
  • Namngivna färger: red, blue, transparent

Exempel

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customization: {
    theme_config: {
      // Custom fonts
      font_primary_url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      font_size: 'md',
      font_weight: 'medium',
      radius: '8px',
      pay_button_text: 'Complete Purchase',
      
      // Light mode colors
      light: {
        bg_primary: '#ffffff',
        bg_secondary: '#f5f5f5',
        text_primary: '#1a1a1a',
        text_secondary: '#666666',
        button_primary: '#0066ff',
        button_primary_hover: '#0052cc',
        button_text_primary: '#ffffff',
        border_primary: '#e0e0e0'
      },
      
      // Dark mode colors
      dark: {
        bg_primary: '#1a1a1a',
        bg_secondary: '#2d2d2d',
        text_primary: '#ffffff',
        text_secondary: '#a0a0a0',
        button_primary: '#3385ff',
        button_primary_hover: '#4d99ff',
        button_text_primary: '#ffffff',
        border_primary: '#404040'
      }
    }
  },
  return_url: 'https://yoursite.com/return'
});
Du behöver inte ange alla färgegenskaper. Alla icke specificerade egenskaper använder standardtemavärdena.