Express Checkout Element

O Express Checkout Element é uma integração para aceitar pagamentos por meio de botões de formas de pagamento com um clique. As formas de pagamento aceitas incluem Link, Apple Pay, Google Pay, PayPal, Klarna, e Amazon Pay.

Com essa integração, você pode:

• Classifique botões de pagamento dinamicamente com base na localização do cliente.
• Adicione botões de pagamento sem nenhuma alteração de frontend.
• Integre o Elements perfeitamente reutilizando uma instância existente do Elements para economizar tempo.

Experimente a demonstração

Na demonstração a seguir, você pode alternar algumas das opções pré-configuradas para alterar a cor de fundo, o layout, o tamanho e a coleta do endereço de entrega da interface de pagamento. A demonstração exibe o Google Pay e o Apple Pay apenas nas plataformas disponíveis. Os botões do Payment Method são exibidos somente nos países que os aceitam.

Se você não vir a demonstração, tente visualizar esta página em um navegador compatível.

Começar com um guia

Formas de pagamento

O Express Checkout Element apresenta formas de pagamento de um clique que são ativas, aceitas e configuradas.

• Algumas formas de pagamento exigem ativação no Dashboard.
• As formas de pagamento só estão disponíveis quando o cliente usa um navegador aceito e paga em uma moeda aceita.
• Algumas formas de pagamento exigem ações de configuração por parte do cliente. Por exemplo, um cliente não verá o botão do Google Pay se não tiver o Google Pay configurado.
• Registre seu domínio no seu ambiente de testes e no modo de produção.

O elemento classifica as formas de pagamento por relevância para seu cliente.

Para controlar esses comportamentos, você pode personalizar as formas de pagamento.

Navegadores aceitos

Determinadas formas de pagamento funcionam com navegadores específicos.

Layout

Por padrão, quando o Express Checkout Element exibe vários botões, ele organiza os botões em uma grade com base no espaço disponível e exibe um menu de navegação, se necessário.

Você pode substituir esse padrão e especificar um layout de grade por conta própria com a opção layout.

Texto

Você pode controlar o texto de um botão selecionando um buttonType. Cada carteira oferece seus próprios tipos.

Este exemplo de código inclui uma chamada para ação “Compre” ou “Compre agora” para botões compatíveis. Em seguida, especifica o local de para obter seus equivalentes em alemão.

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

Aparência

Não é possível personalizar totalmente a aparência dos botões do Express Checkout Element porque cada forma de pagamento define seu próprio logotipo e cores da marca. Você pode personalizar as seguintes opções:

• Altura do botão
• Raio da borda usando variáveis com a API Appearance
• Temas do botão

Este exemplo de código configura um grupo de elementos com um tema claro e um raio de borda de 36 pixels, cria botões com 50 pixels de altura e substitui o tema para usar a versão com contorno branco do botão Apple Pay .

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

Aceitamos os seguintes temas:

Personalizar formas de pagamento

Você não pode especificar quais formas de pagamento exibir. Por exemplo, não é possível forçar a exibição de um botão do Google Pay se o dispositivo do cliente não for compatível com o Google Pay.

No entanto, você pode personalizar o comportamento da forma de pagamento de várias maneiras, como:

• Você pode ativar ou desativar formas de pagamento no Dashboard.
• Você pode sobrepor a lógica padrão da Stripe de classificação das formas de pagamento por relevância. Use a opção paymentMethodOrder para definir seu pedido preferencial.
• Se houver pouco espaço no layout, formas de pagamento de baixa relevância podem aparecer em um menu de navegação. Personalize quando o menu aparece usando a opção layout.
• Para evitar que o Apple Pay ou o Google Pay apareçam, defina paymentMethods.applePay ou paymentMethods.googlePay como never.
• Para permitir que o Apple Pay ou o Google Pay apareçam quando não estiverem configurados, defina paymentMethods.applePay ou paymentMethods.googlePay como always. A opção não será apresentada em plataformas incompatíveis ou quando o pagamento for em uma moeda não aceita.

Verifique as formas de pagamento disponíveis

Ouça o evento pronto para verificar quais carteiras estão disponíveis para que o Express Checkout Element seja exibido. Se não houver carteiras disponíveis, forneça outra opção para o cliente pagar.

() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <ExpressCheckoutElement
        onReady={({ availablePaymentMethods }) => {
          if (availablePaymentMethods) {
            setEceActive(true);

Como alternativa, oculte todo o Express Checkout Element até que você saiba que o elemento tem métodos a serem exibidos.

() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <OneClickCheckoutContainer hidden={!eceActive}>
        <ExpressCheckoutElement
          onReady={({ availablePaymentMethods }) => {
            if (availablePaymentMethods) {

O mesmo evento está disponível no objeto do elemento quando criado sem reação.

const expressCheckoutElement = elements.create("expressCheckout", { ... });

expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => {
  console.log(availablePaymentMethods);
});

expressCheckoutElement.mount("#express-checkout-element");