Aller au contenu principal
Sur cette page
Live CustomStyle example
Aperçu en direct
HeaderPattern
YOURSTORE
Secure checkoutChoose a payment method
CardWallet
Powered by DEUNA
Implementation guide

Understand every supported field

The documentation below explains object shape, constraints, complete examples, and what to verify before release.

HeaderPattern
Read the documentation

Utilisez des modèles de composants pour les éléments de marque et juridiques présents sur plusieurs écrans du checkout. Conservez des URL publiques de ressources et de politiques stables et accessibles au client.

HeaderPattern contrôle l'URL, l'alignement et les dimensions du logo. Par défaut, le logo mesure 100 pixels de large et est aligné à gauche ; position accepte left ou center.

JSON
{
  "HeaderPattern": {
    "overrides": {
      "Logo": {
        "props": {
          "url": "https://merchant.example/assets/brand-mark.png",
          "position": "center",
          "style": {
            "min-width": "150px"
          }
        }
      }
    }
  }
}

Conditions et confidentialité#

TermsConditionsPattern contrôle le message juridique, sa visibilité pour le client, les liens vers les politiques et l'acceptation explicite. Le HTML personnalisé dans legalMessage remplace le message traduit par défaut.

JSON
{
  "TermsConditionsPattern": {
    "showForGuest": true,
    "showForAuth": false,
    "legalMessage": "By continuing, you accept our <a href='https://merchant.example/terms'>Terms and Conditions</a> and <a href='https://merchant.example/privacy'>Privacy Policy</a>.",
    "connectorText": "and",
    "hideCompanyDisclaimer": true,
    "termsAndConditionsUrl": "https://merchant.example/terms",
    "privacyPolicyUrl": "https://merchant.example/privacy",
    "requiresAcceptance": true
  },
  "LegalInfoPattern": {
    "hidePoweredBy": true
  },
  "PoweredByPattern": {
    "url": "https://merchant.example/assets/brand-mark.png",
    "imageStyle": {
      "width": "50px",
      "height": "auto"
    }
  }
}

Pour les types de propriété pris en charge, utilisez la référence des propriétés CustomStyle.