Passer au contenu principal
Checkout page
Le checkout Dodo Payments est un parcours de paiement optimisé pour la conversion et conforme à l’échelle mondiale, conçu pour les produits numériques et les entreprises SaaS. Il prend en charge plusieurs devises, langues, taxes, remises, modules complémentaires et workflows de conformité adaptés aux entreprises.

Devise Adaptative

La Devise Adaptative permet aux clients de payer dans leur devise locale préférée, améliorant ainsi la confiance et les taux de conversion.

Comment ça fonctionne

  1. Activer : Activez la Devise Adaptative dans vos paramètres commerciaux
  2. Sélectionner : Les clients peuvent changer de devise directement lors du paiement
  3. Convertir : Les prix sont convertis dynamiquement en utilisant des taux de change en temps réel
  4. Afficher : Le montant final à payer est affiché de manière transparente avant le paiement
Currency selector on checkout

Adaptive Currency

En savoir plus sur les devises prises en charge, les frais de conversion et la gestion des remboursements.

Paiement Multilingue

Dodo Payments prend en charge plusieurs langues sur la page de paiement, permettant aux clients de finaliser leurs paiements dans une langue avec laquelle ils sont à l’aise.
Language selector on checkout

Points Clés

  • Sélecteur de langue disponible directement lors du paiement
  • Texte de l’interface utilisateur, étiquettes et messages système sont localisés
  • Améliore l’accessibilité et la conversion internationale

Langues prises en charge

La page de paiement prend en charge 21 langues :
LanguageCode
Arabicar
Catalanca
Chinesezh
Dutchnl
Englishen
Frenchfr
Germande
Hebrewhe
Indonesianid
Italianit
Japaneseja
Koreanko
Malayms
Polishpl
Portuguesept
Romanianro
Russianru
Spanishes
Swedishsv
Thaith
Turkishtr
Vous pouvez forcer une langue spécifique sur le checkout en définissant le paramètre force_language lors de la création d’une session de checkout. Consultez l’API des sessions de checkout pour plus de détails.

Calcul automatique des taxes

Les taxes sont calculées automatiquement en fonction de l’adresse de facturation du client, garantissant la conformité aux exigences de la TPS, de la TVA et des taxes de vente sans configuration manuelle.

Fonctionnement du calcul des taxes

1

Location Detection

Les règles fiscales sont appliquées selon le pays du client (et la région lorsque cela est applicable).
2

Dynamic Updates

Le montant des taxes se met à jour automatiquement lorsque :
  • le pays change
  • l’adresse est mise à jour
3

Transparent Display

Le détail final des taxes est affiché clairement avant le paiement.
Le calcul des taxes est entièrement automatisé. Aucune configuration manuelle n’est requise pour les biens numériques standard et les produits SaaS.

Prise en charge de l’identification fiscale des entreprises

Pour les entreprises enregistrées, le checkout permet aux clients de saisir leur numéro d’identification fiscale (par exemple, numéro de TVA/TVH).

Que se passe-t-il lorsqu’un identifiant fiscal est saisi

  • L’éligibilité fiscale est validée en temps réel
  • Les exonérations fiscales ou règles d’autoliquidation applicables sont appliquées
  • Le montant des taxes se met instantanément à jour dans le checkout
Business Tax ID entry on checkout
Cela est particulièrement utile pour les services SaaS B2B et les services numériques où les clients professionnels peuvent bénéficier d’exonérations fiscales.

Codes de réduction

Les clients peuvent appliquer les codes promotionnels ou de réduction que vous avez créés dans le tableau de bord directement sur la page de paiement.

Expérience de checkout

  1. Le client saisit le code de réduction
  2. La réduction est validée instantanément
  3. Le prix mis à jour et les économies sont clairement affichés
Discount code entry on checkout

Intégration API

Pré-appliquez un code de réduction ou activez le champ de saisie :
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

Apprenez à créer et gérer les codes de réduction.

Validate Discount by Code

Recherchez et validez les réductions à l’aide des noms de code.

Collecte d’adresses intelligente

Le checkout prend en charge une saisie flexible des adresses pour une finalisation plus rapide.

Options disponibles

OptionDescription
Google Address AutofillSélection rapide avec saisie semi-automatique
Saisie manuelleContrôle total pour les adresses complètes
Sélection du paysDétermine la logique fiscale et de conformité
La collecte d’adresses équilibre rapidité, précision et couverture mondiale pour maximiser la conversion tout en assurant la conformité.

Champs personnalisés

Collectez des informations supplémentaires auprès des clients pendant le checkout en définissant des champs de formulaire personnalisés. Cela est utile pour recueillir des données telles que le nom de l’entreprise, la taille de l’équipe, la source de recommandation ou toute autre information spécifique à votre activité.

Types de champs disponibles

TypeDescription
textChamp texte sur une seule ligne
numberChamp numérique
emailAdresse e-mail avec validation
urlURL avec validation
dateSélecteur de date
dropdownSélection parmi des options prédéfinies
booleanBascule Oui/Non

Exemple

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'
});
Les réponses des clients sont automatiquement incluses dans les charges utiles de webhook (payment.succeeded, subscription.active) et dans les réponses API via le tableau custom_field_responses. Vous pouvez définir jusqu’à 5 champs personnalisés par session de paiement.

Custom Fields Guide

En savoir plus sur la configuration des champs personnalisés et l’accès aux réponses.

Acceptation de la politique de confidentialité et des conditions

Pour assurer la transparence juridique et de conformité :
Cela aide à satisfaire les exigences mondiales en matière de protection des consommateurs et de confidentialité des données, y compris la conformité au RGPD.

Checkout Collection

Les Collections de produits offrent une expérience de checkout unifiée où les clients peuvent voir et sélectionner plusieurs produits liés (par exemple, les forfaits Starter, Pro, Enterprise) au sein d’un même checkout.

Comment cela fonctionne

  1. Tous les produits affichés : les clients voient chaque produit actif dans la collection
  2. Premier produit présélectionné : le premier produit de la collection est automatiquement sélectionné
  3. Comparer les options : les clients peuvent comparer les tarifs et les fonctionnalités avant de choisir
  4. Sélection unique : après la sélection d’un produit, le checkout se poursuit avec le flux de paiement standard

Création d’un Checkout Collection

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'
});
Lorsque vous utilisez product_collection_id, transmettez un tableau product_cart vide. Les codes de réduction ne peuvent pas être pré-appliqués lors de la création de la session.

Product Collections

Apprenez à créer et gérer des collections de produits pour des expériences de checkout unifiées.

Configuration des sessions de checkout

Contrôlez le comportement du checkout à l’aide de l’API des sessions de checkout :
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'
  }
});
Après le paiement, les clients sont redirigés vers votre return_url avec les paramètres de requête ajoutés automatiquement — y compris payment_id ou subscription_id, status, email et license_key (le cas échéant). Consultez le guide des sessions de checkout pour la liste complète.

Personnalisation du thème du checkout

Personnalisez l’apparence de la page de paiement pour qu’elle corresponde à votre marque en utilisant le paramètre customization.theme_config lors de la création d’une session de checkout via l’API. Configurez les couleurs, les polices, le rayon des bordures et le texte des boutons pour les modes clair et sombre.
Custom themed checkout page

Design & Theme Customization

Configurez visuellement les thèmes depuis le tableau de bord avec des thèmes préconçus, la typographie, les couleurs et un aperçu en direct.
Cette section présente la configuration du thème via l’API côté serveur en utilisant customization.theme_config. Si vous utilisez le Checkout SDK (paiement superposé ou intégré), consultez les sections de personnalisation des thèmes dans Overlay Checkout ou Inline Checkout qui utilisent des propriétés en camelCase (par exemple, bgPrimary au lieu de bg_primary).

Options de configuration du thème

PropertyDescription
lightConfiguration des couleurs pour le mode clair
darkConfiguration des couleurs pour le mode sombre
font_primary_urlURL de la police principale
font_secondary_urlURL de la police secondaire
font_sizeTaille de police : xs, sm, md, lg, xl, 2xl
font_weightGraisse de la police : normal, medium, bold, extraBold
radiusRayon des bordures pour les éléments de l’interface (p. ex., 4px, 0.5rem, 8px)
pay_button_textTexte personnalisé pour le bouton de paiement (p. ex., « Complete Purchase », « Subscribe Now »)

Configuration des couleurs (mode clair/sombre)

Chaque mode (light et dark) prend en charge les propriétés de couleur suivantes :
PropertyDescription
bg_primaryCouleur principale de l’arrière-plan
bg_secondaryCouleur secondaire de l’arrière-plan
text_primaryCouleur primaire du texte
text_secondaryCouleur secondaire du texte
text_placeholderCouleur des espaces réservés du texte
text_errorCouleur des erreurs de texte
text_successCouleur des succès de texte
border_primaryCouleur principale des bordures
border_secondaryCouleur secondaire des bordures
button_primaryCouleur de fond du bouton principal
button_primary_hoverCouleur du survol du bouton principal
button_secondaryCouleur de fond du bouton secondaire
button_secondary_hoverCouleur du survol du bouton secondaire
button_text_primaryCouleur du texte du bouton principal
button_text_secondaryCouleur du texte du bouton secondaire
input_focus_borderCouleur de bordure en cas de focus sur un champ
Tous les champs de couleur acceptent les formats CSS standards :
  • Hexadécimal : #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)
  • Noms de couleurs : red, blue, transparent

Exemple

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'
});
Vous n’avez pas besoin de spécifier toutes les propriétés de couleur. Toute propriété non spécifiée utilisera les valeurs par défaut du thème.