Personaliza el aspecto

const appearance = {
  theme: 'stripe',
};
stripe.initCheckout({
  fetchClientSecret,
  elementsOptions: {
    appearance,
  },
});

1. Empieza por elegir un tema.

Ponte en marcha de inmediato eligiendo el tema prediseñado que más se parezca a tu sitio web.

1. Personaliza el tema con variables.

Configura variables como fontFamily y colorPrimary para personalizar ampliamente los componentes que aparecen en cada Element.

1. Si es necesario, ajusta los componentes y estados individuales mediante el uso de reglas.

Para obtener un control completo, especifica las propiedades CSS personalizadas para los componentes individuales que aparecen en el Element.

Temas

Empieza a personalizar Elements eligiendo uno de los siguientes temas:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

Variables

Configura variables para que afecten la apariencia de muchos componentes que aparecen en cada Element.

La opción variables funciona de la misma manera que las variables CSS. Puedes especificar valores CSS para cada variable y hacer referencia a otras variables con la sintaxis var(--myVariable). Incluso puedes inspeccionar el DOM resultante utilizando el explorador DOM en tu navegador.

const appearance = {
  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

Variables de uso común

Reglas

La opción rules es un mapa de selectores tipo CSS para propiedades CSS, lo que permite la personalización detallada de los componentes individuales. Después de definir tu theme y variables, usa rules para integrar Elements sin problemas de modo que coincida con el diseño de tu sitio.

const appearance = {
    rules: {
      '.Tab': {
        border: '1px solid #E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
      },

      '.Tab:hover': {
        color: 'var(--colorText)',
      },

      '.Tab--selected': {
        borderColor: '#E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
      },

      '.Input--invalid': {
        boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
      },

      // See all supported class names and selector syntax below
    }
  };

Todas las reglas

El selector de una regla puede apuntar a cualquiera de los nombres de clases públicas del Element, así como a los estados, seudoclases y seudoelementos admitidos de cada clase. Por ejemplo, los siguientes son selectores válidos:

• .Tab, .Label, .Input
• .Tab:focus
• .Input--invalid, .Label--invalid
• .Input::placeholder

Los siguientes no son selectores válidos:

• .p-SomePrivateClass, img: sirve para identificar nombres de clases públicas solamente
• .Tab .TabLabel: no se admiten relaciones antecesor-descendiente en los selectores
• .Tab--invalid: la clase .Tab no admite el estado --invalid

Cada nombre de clase utilizado en un selector admite una lista de permitidos de propiedades CSS, que se especifican usando mayúsculas y minúsculas (por ejemplo, boxShadow para la propiedad box-shadow).

A continuación brindamos una lista completa de los nombres de clases admitidos y los correspondientes estados, seudoclases y seudoelementos.

Pestañas

Entradas de formulario: etiquetas superiores

Asegúrate de elegir un tamaño de fuente de al menos 16 px para los campos de entrada en dispositivos móviles.

Entradas de formulario: etiquetas flotantes

Bloqueo

Entrada de código

Casilla de verificación

Menú desplegable

Cambiar

Selector

Asegúrate de que tu estado activo de .PickerItem se destaque entre los demás estados.

QUÉ DEBES HACER Utiliza un color, un grosor o un contorno primarios visibles y de alto contraste para distinguir el estado activo que tu cliente ya seleccionó.	QUÉ NO DEBES HACER No uses dos opciones con la misma ponderación o colores de bajo contraste para tu .PickerItem porque hace que sea más difícil distinguir cuál está activo.

Menú

Acordeón

Payment Method Messaging Element

Ícono de radio

Puedes controlar el tamaño total del ícono con la propiedad width en .RadioIcon. Puedes controlar el tamaño relativo de .RadioIconInner con la propiedad r (radius). .RadioIconOuter y .RadioIconInner son elementos SVG y se pueden diseñar con propiedades stroke y fill. Consulta la lista completa de propiedades CSS admitidas que se encuentra a continuación.

const appearance = {
  rules: {
    '.RadioIcon': {
      width: '24px'
    },
    '.RadioIconOuter': {
      stroke: '#E0E6EB'
    },
    '.RadioIconInner': {
      r: '16'
    }
  }
};

Otras opciones de configuración

Además de themes, variablesy rules, proporcionamos otras opciones de configuración de aspecto para dar estilo a Elements.

Puedes personalizarlas agregándolas al objeto appearance:

const appearance = {
  labels: 'floating',

  // other configurations such as `theme`, `variables` and `rules`...
}

Actualmente, admitimos las siguientes opciones: