Champs personnalisés : documentation CheckoutOS

Les champs personnalisés permettent de recueillir des informations supplémentaires pendant le paiement. Ces données peuvent servir à la personnalisation, aux besoins de traitement des commandes, à la conformité réglementaire ou au marketing.

À utiliser avec parcimonie

Chaque champ supplémentaire complique le paiement. Ne recueillez que les informations réellement nécessaires. Chaque champ obligatoire peut réduire la conversion de 1 à 3 %.

Types de champs disponibles

Champs texte

Types de saisie texte

Texte sur une ligne — Réponses courtes
Zone de texte multiligne — Réponses longues, comme des instructions
E-mail — Avec validation
Numéro de téléphone — Avec mise en forme
Nombre — Saisie numérique uniquement

Champs de sélection

Types de sélection

Liste déroulante — Un choix dans une liste
Boutons radio — Un choix, toutes les options visibles
Cases à cocher — Plusieurs choix possibles
Interrupteur — Choix binaire oui/non

Champs spéciaux

Types de saisie spéciaux

Sélecteur de date — Sélection dans un calendrier
Sélecteur d’heure — Sélection d’un créneau
Importation de fichier — Documents et images
Signature — Recueil d’une signature numérique

Cas d’usage courants

Instructions de livraison

Champ d’instructions de livraison

{
  "field": {
    "id": "delivery_instructions",
    "type": "textarea",
    "label": "Delivery Instructions",
    "placeholder": "Gate code, leave at door, etc.",
    "required": false,
    "max_length": 200,
    "placement": "shipping_address"
  }
}

Vérification de l’âge

Champ de vérification de l’âge

{
  "field": {
    "id": "age_verification",
    "type": "date",
    "label": "Date of Birth",
    "required": true,
    "validation": {
      "min_age": 21,
      "error_message": "You must be 21 or older to purchase this product"
    },
    "conditional": {
      "show_when": "cart_contains_tag",
      "tag": "age-restricted"
    }
  }
}

Informations professionnelles et fiscales

Champs professionnels

{
  "fields": [
    {
      "id": "company_name",
      "type": "text",
      "label": "Company Name",
      "required": false
    },
    {
      "id": "vat_number",
      "type": "text",
      "label": "VAT Number",
      "required": false,
      "validation": "vat",
      "conditional": {
        "show_when": "country_in",
        "countries": ["DE", "FR", "IT", "ES", "NL"]
      }
    }
  ]
}

Personnalisation des produits

Champs de personnalisation

{
  "field": {
    "id": "engraving_text",
    "type": "text",
    "label": "Engraving Text",
    "placeholder": "Enter text to engrave (max 20 characters)",
    "required": true,
    "max_length": 20,
    "conditional": {
      "show_when": "cart_contains_product",
      "product_ids": ["ring-001", "bracelet-002"]
    }
  }
}

Configurer les champs personnalisés

Créer un champ

Allez dans CheckoutOS → Checkout Extensions → Custom Fields → Add Field.

Choisir le type de champ

Choisissez le type de saisie adapté aux données.

Configurer les propriétés

Définissez le libellé, le texte indicatif, les règles de validation et les obligations.

Définir des conditions, facultatif

Définissez quand le champ doit apparaître selon le panier ou le client.

Choisir l’emplacement

Choisissez l’emplacement du champ dans le paiement.

Définir la destination des données

Configurez les lieux de stockage et d’envoi des données recueillies.

Options de validation

Assurez la qualité des données avec la validation intégrée :

Configuration de la validation

{
  "validation": {
    "required": true,
    "min_length": 2,
    "max_length": 100,
    "pattern": "^[A-Za-z ]+$",
    "pattern_message": "Only letters and spaces allowed",
    "custom_validator": "validate_phone_number",
    "validate_on": "blur"
  }
}

Affichage conditionnel

Affichez les champs uniquement lorsque les conditions pertinentes sont remplies :

Logique conditionnelle

{
  "conditions": {
    "logic": "AND",
    "rules": [
      {
        "type": "cart_total",
        "operator": "greater_than",
        "value": 100
      },
      {
        "type": "shipping_country",
        "operator": "in",
        "value": ["US", "CA"]
      }
    ]
  }
}

Gestion des données

Les données des champs personnalisés peuvent être envoyées vers plusieurs destinations :

Destinations des données

Attributs de commande Shopify — Visibles dans l’administration de la commande
Notes de commande Shopify — Concaténées dans le champ de notes
Champs méta Shopify — Stockage structuré des données
Webhooks — Envoi aux systèmes externes
E-mail — Inclusion dans la confirmation de commande
Applications de traitement des commandes — ShipStation, etc.

Gestion des données personnelles

Si vous recueillez des informations personnelles sensibles, comme un numéro de sécurité sociale américain ou des données de santé, assurez-vous que leur traitement respecte les réglementations applicables, notamment GDPR, CCPA et HIPAA. Envisagez le chiffrement et les contrôles d’accès.

Style des champs personnalisés

Style des champs

{
  "styling": {
    "label_position": "above",
    "label_size": "small",
    "input_style": "outlined",
    "error_style": "inline",
    "help_text_position": "below",
    "required_indicator": "*",
    "group_fields": true,
    "group_title": "Additional Information"
  }
}

Bonnes pratiques

Conseils d’optimisation

Limitez les champs obligatoires — Chaque champ ajoute une difficulté
Utilisez l’affichage conditionnel — Affichez uniquement les champs pertinents
Donnez des libellés clairs — Les utilisateurs doivent comprendre pourquoi vous demandez ces informations
Choisissez les bons types — Sélecteurs pour les dates, listes déroulantes pour les choix fixes
Définissez des valeurs par défaut judicieuses — Préremplissez quand c’est possible
Testez sur mobile — Vérifiez le bon fonctionnement sur les appareils tactiles

Sujets associés

Présentation des extensions du paiement

Voir toutes les extensions disponibles

Fonctions de réduction

Appliquez des réductions selon les valeurs des champs