Personaliza la apariencia

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 usando variables.

Establece variables como fontFamily y colorPrimary para personalizar ampliamente los componentes que aparecen en cada elemento.

1. Si es necesario, ajusta los componentes y estados individuales mediante 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

Establece variables que afecten a la apariencia de muchos componentes que aparecen en cada Element.

La opción variables funciona como 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 de 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 una personalización granular de los componentes individuales. Después de definir tu theme y variables, usa rules para integrar Elements a la perfección y 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 aplicarse a cualquiera de los nombres de clase públicos del Element, así como a los estados, las seudoclases y los seudoelementos aceptados de cada clase. Por ejemplo, son válidos los siguientes selectores:

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

Los siguientes no son selectores válidos:

• .p-SomePrivateClass, img: solo se puede aplicar a nombres de clase públicos
• .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, encontrarás una lista completa de los nombres de clase 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

Bloquear

Entrada de código

Casilla de verificación

Menú desplegable

Cambiar

Selector

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

SÍ HACER Utiliza un color, un grosor o un contorno primarios visibles y de alto contraste para distinguir el estado activo que tu cliente ya ha seleccionado.	NO HACER No utilices dos opciones de igual ponderación ni colores de bajo contraste para tu . PickerItem porque hace que sea más difícil distinguir cuál está activo.

Menú

Acordeón

Elemento de mensajería de método de pago

Icono de radio

Puedes controlar el tamaño total del icono con la propiedad width en .RadioIcon. Puedes controlar el tamaño relativo de .RadioIconInner con la propiedad r (radio). Los elementos .RadioIconOuter y .RadioIconInner son elementos SVG y se les puede aplicar estilo con las propiedades stroke y fill. Consulta a continuación la lista completa de propiedades CSS admitidas.

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

Otras opciones de configuración

Además de themes, variables y rules, hemos proporcionado opciones adicionales de configuración de aspecto para dar estilo a los Elements.

Puedes personalizarlos añadiéndolos al objeto de apariencia:

const appearance = {
  labels: 'floating',

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

Actualmente, aceptamos las siguientes opciones: