Personalizar a aparência

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

1. Comece escolhendo um tema.

Comece a usar imediatamente escolhendo o tema pré-construído que mais se assemelha ao seu site.

1. Personalize o tema usando variáveis.

Defina variáveis como fontFamily e colorPrimary para personalizar amplamente os componentes que aparecem em cada Element.

1. Se necessário, ajuste componentes e estados individuais usando regras.

Para obter controle completo, especifique propriedades CSS personalizadas para componentes individuais que aparecem no Element.

Temas

Comece a personalizar o Elements escolhendo um dos seguintes temas:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

Variáveis

Defina variáveis para afetar a aparência de muitos componentes que aparecem em cada Element.

A opção variables funciona como variáveis CSS. Você pode especificar valores CSS para cada variável e fazer referência a outras variáveis com a sintaxe var(--myVariable). Você pode até mesmo inspecionar o DOM resultante usando o explorador do DOM em seu 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
  }
};

Variáveis mais usadas

Regras

A opção rules é um mapa de seletores do tipo CSS para propriedades CSS, permitindo a personalização específica de cada componente. Depois de definir o theme e as variables, use as rules para integrar perfeitamente o Elements conforme o design do seu site.

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 as regras

O seletor de uma regra pode direcionar a qualquer um dos nomes de categoria pública no Elemento, assim como estados aceitos, pseudocategorias e pseudoelementos para cada categoria. Por exemplo, os seguintes seletores são válidos:

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

Os seguintes seletores não são válidos:

• .p-SomePrivateClass, img, somente nomes de categorias públicas podem ser direcionados
• .Tab .TabLabel, relacionamentos de ancestral-descendente em seletores não são aceitos
• .Tab--invalid, a categoria .Tab não aceita o estado --invalid

Cada nome de classe usado em um seletor aceita uma lista de permissões de propriedades CSS, que você especifica usando maiúsculas e minúsculas (por exemplo, boxShadow para a propriedade box-shadow).

Veja esta lista completa de nomes de categoria aceitos e estados, pseudocategorias e pseudoelementos correspondentes.

Guias

Entradas de formulário - Rótulos acima

Certifique-se de escolher um tamanho de fonte de pelo menos 16px para campos de entrada em dispositivos móveis.

Entradas de formulário - Rótulos flutuantes

Bloco

Entrada de código

Caixa de seleção

Lista suspensa

Interruptor

Selecionador

Certifique-se de que o seu estado ativo .PickerItem se destaca dos demais estados.

SIM Use uma cor primária, peso e/ou contorno perceptível de alto contraste para distinguir o estado ativo que seu cliente já selecionou.	NÃO Não use duas opções com o mesmo peso ou cores de baixo contraste para os estados .PickerItem porque fica mais difícil distinguir qual está ativo.

Menu

Sanfona

Payment Method Messaging Element

Ícone de rádio

Você pode controlar o tamanho geral do ícone com a propriedade width em .RadioIcon. Você pode controlar o tamanho relativo de .RadioIconInner com a propriedade r (raio). .RadioIconOuter e .RadioIconInner são elementos SVG e podem ser estilizados com propriedades stroke e fill. Consulte a lista completa de propriedades CSS aceitas abaixo.

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

Outras opções de configuração

Além de themes, variables e rules, fornecemos outras opções de configuração de aparência para estilizar o Elements.

Para personalizar, adicione-as ao objeto Appearance:

const appearance = {
  labels: 'floating',

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

No momento, aceitamos as opções abaixo: