Saltar al contenido principal
En esta página
Live CustomStyle example
Vista previa en vivo
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

Usa patrones de componentes para los elementos de marca y legales que aparecen en varias pantallas del checkout. Mantén estables y accesibles para el cliente las URL públicas de recursos y políticas.

HeaderPattern controla la URL, la alineación y las dimensiones del logotipo. De forma predeterminada, el logotipo tiene 100 píxeles de ancho y se alinea a la izquierda; position acepta left o center.

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

Términos y privacidad#

TermsConditionsPattern controla el mensaje legal, la visibilidad para el cliente, los enlaces de políticas y la aceptación explícita. El HTML personalizado de legalMessage sustituye el mensaje traducido predeterminado.

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"
    }
  }
}

Para consultar los tipos de propiedades compatibles, usa la referencia de propiedades de CustomStyle.