Na VTEX, é possível realizar a integração com o provedor de pagamento StripeV2. Por meio deste provedor, sua loja pode oferecer diversos meios de pagamento, como Visa, American Express, Diners, Elo, Hipercard, Mastercard, BankInvoice, Stripe, Google Pay, ApplePay, OXXO, Discover, Affirm, Klarna, ZIP, Blik, Ideal, SPEI, MultiBanco, Afterpay, Bancontact, EPS, FPX, giropay e P24.
Para mais informações sobre a integração da VTEX com a Stripe, você também pode acessar a documentação da Vinneren.
Modos de operação
O provedor StripeV2 pode processar transações de pagamentos em lojas VTEX de duas maneiras diferentes:
-
VTEX Native Checkout Experience: pode ser utilizado para cartões de crédito, débito e meios de pagamento desenvolvidos com o Payment Provider Framework (PPF). Essa opção é recomendado se você deseja configurar outros gateways de pagamento para diferentes bandeiras de cartão ou realizar transações utilizando o checkout nativo da VTEX.
-
VTEX with Stripe Payment Element Experience: aplicativo de pagamento baseado no Stripe’s Optimized Checkout Suite (OCS). Essa opção é recomendada caso você pretenda usar exclusivamente o Stripe para processar todas as bandeiras de cartões ou se deseje ter acesso ao Stripe Link, uma solução que oferece acesso rápido a diversos meios de pagamento com apenas um clique.
O VTEX with Stripe Payment Element Experience utiliza o Stripe Payment Elements Checkout, proporcionando acesso aos meios de pagamento atuais e futuros suportados pela Stripe. Nessa opção, a configuração dos meios de pagamento deve ser realizada diretamente no Stripe Dashboard.
Após determinar com qual dos modos deseja operar em sua loja, siga as instruções de um dos procedimentos abaixo:
- Configurando o VTEX Native Checkout Experience
- Configurando o VTEX with Stripe Payment Element Experience
As configurações realizadas em um ambiente externo à VTEX podem ser descontinuadas ou modificadas sem aviso prévio. Consulte sua conta na Stripe para informações atualizadas.
Configurar o VTEX Native Checkout Experience
A equipe da Stripe precisa habilitar pagamentos RawPan em sua conta. Entre em contato com seu Stripe advisor. Se esta opção não estiver habilitada em sua conta, você não poderá fazer transações com sucesso.
Pré-requisitos:
- Usuário VTEX com permissões de administrador
- Conta Stripe ativa
Para utilizar o VTEX Native Checkout Experience em sua loja, é necessário:
Instalar apps da Stripe
Para instalar os apps da Stripe em sua loja, siga os passos abaixo:
Configurar StripeV2 na VTEX
Para configurar a integração da StripeV2 na VTEX, siga os passos abaixo:
- No Admin VTEX, acesse Configurações da loja > Pagamentos > Provedores, ou digite Provedores na barra de busca no topo da página.
- Na tela de provedores, clique no botão
Novo provedor
. - Digite o nome StripeV2 na barra de busca e clique sobre o nome do provedor.
- Em Chave de aplicação, insira a chave publicável que você obteve nos passos anteriores.
- Em Token de aplicação, insira a chave secreta que você obteve nos passos anteriores.
- Em Informações básicas, na opção Nome, insira StripeV2NativeCheckout para identificar o tipo da integração.
- Em Campos do provedor, na opção Mode, selecione Float.
- Em Test Mode, selecione False se o modo for Live ou True se o modo for Test.
- Clique em
Salvar
.
Configurar script de antifraude
Para configurar o script de antifraude para a StripeV2 na VTEX, siga os passos abaixo:
- Copie o script disponível na seção "Integrate script into your VTEX store".
- No Admin VTEX, acesse Configurações da loja > Storefront > Checkout > Código.
- Clique no botão Novo e insira um nome descritivo.
- Cole o conteúdo do script que você copiou anteriormente.
- Substitua as informações "pk_test" pela sua chave pública Stripe copiada nas etapas anteriores.
- Clique em
Salvar
.
Configurar condição de pagamento
Para configurar uma condição de pagamento para o StripeV2 na VTEX, siga os passos abaixo:
- No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
- Na aba Condições de Pagamentos, clique no botão +.
- Clique sobre o novo do meio de pagamento que deseje utilizar.
- Na tela de configuração, ative a condição clicando em Status.
- Em Processar com o provedor, selecione a opção StripeV2NativeCheckout.
- Se desejar utilizar um sistema antifraude, selecione a opção Usar solução antifraude.
- Caso necessário, você também pode configurar condições especiais de pagamento.
- Clique em
Salvar
.
Caso deseje mais informações sobre os procedimentos de instalação do VTEX Native Checkout Experience, acesse a documentação pública da Stripe na Vinneren.
Configurar o VTEX with Stripe Payment Element Experience
Pré-requisitos:
- Usuário VTEX com permissões de administrador
- Conta Stripe ativa
Para utilizar o VTEX with Stripe Payment Element Experience em sua loja, é necessário:
- Instalar os aplicativos da Stripe
- Configurar StripeV2 na VTEX
- Configurar condições de pagamento
- Configurar webhook na conta Stripe
Instalar apps da Stripe
Para instalar os apps da Stripe em sua loja, siga os passos abaixo:
Configurar StripeV2 na VTEX
Para configurar a integração da StripeV2 na VTEX, siga os passos abaixo:
- No Admin VTEX, acesse Configurações da loja > Pagamentos > Provedores, ou digite Provedores na barra de busca no topo da página.
- Na tela de provedores, clique no botão
Novo provedor
. - Digite o nome StripeV2 na barra de busca e clique sobre o nome do provedor.
- Em Chave de aplicação, insira a chave publicável que você obteve no VTEX Elements Checkout (Stripe App).
- Em Token de aplicação, insira a chave RAK que você obteve no VTEX Elements Checkout (Stripe App) (restricted API key).
- Em Informações básicas, na opção Nome, insira StripeV2Elements para identificar rapidamente a integração.
- Em Campos do provedor, na opção Mode, selecione Embedded.
- Em Test Mode, selecione False se o modo for Live ou True se o modo for Test.
- Clique em
Salvar
. - Adicione chaves Stripe nas configurações do aplicativo do provedor, como segue:
Configurar condição de pagamento
Para configurar uma condição de pagamento para o StripeV2 na VTEX, siga os passos abaixo:
- No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
- Na aba Condições de Pagamentos, clique no botão
+
. - Clique sobre o novo do meio de pagamento que deseje utilizar.
- Na tela de configuração, ative a condição clicando em Status.
- Em Processar com o provedor, selecione a opção StripeV2Elements.
- Se desejar utilizar um sistema antifraude, selecione a opção Usar solução antifraude.
- Caso necessário, você também pode configurar condições especiais de pagamento.
- Clique em
Salvar
.
Caso deseje mais informações sobre os procedimentos de instalação do VTEX with Stripe Payment Element Experience, acesse a documentação pública da Stripe na Vinneren.
Configurar webhook na conta Stripe
Para realizar a configuração do webhook na sua conta Stripe, siga os passos abaixo:
- Acesse o dashboard de sua conta na Stripe.
- Clique no botão Developers.
- Clique na aba Webhooks.
- Clique no botão Add a connection point.
- No campo Connection point URL, insira o URL do endpoint da sua loja VTEX no seguinte formato:
https://{{account}}.myvtex.com/_v/stripe.payment-provider-connector/v0/webhook
. Substitua o {{account}} pelo nome da sua conta VTEX. - Clique em + Select events.
- Clique nas categorias e selecione os seguintes eventos:
- Clique em Add events.
- Clique em Add Connection Point.
Configurar pagamento com Google Pay na StriveV2 (opcional)
Com o provedor StripeV2 você pode processar pagamentos com a Google Pay em sua loja. Para configurar o Google Pay, siga os passos abaixo:
- Caso já tenha concluido os passos de instalação do VTEX Elements, prossiga para o Passo 13.
- Instale o VTEX Elements Checkout (Stripe App) para obter as chaves Stripe necessárias.
- Assim que a instalação for concluída, as chaves pública (pk) e restrita (rk) serão exibidas. Copie e salve-os, pois serão usados posteriormente.
- No Admin VTEX, acesse Configurações da Loja > Pagamentos > Provedores, ou digite Provedores na barra de pesquisa no topo da página.
- Na página do provedor, clique no botão
Novo Provedor
. - Digite StripeV2 na barra de pesquisa e clique no nome do provedor.
- Em App key, insira a chave publicável que você obteve no VTEX Elements Checkout (Stripe App).
- Em App token, insira a chave RAK obtida no VTEX Elements Checkout (Stripe App)(chave API restrita).
- Em Informações básicas, na opção Nome, insira StripeV2Elements para identificar rapidamente a integração.
- Em Campos do provedor, na opção Mode, selecione Embedded.
- Em Test Mode, selecione False se o modo for Live ou True se o modo for Test.
- Clique em
Salvar
. - No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
- Na aba Condições de Pagamentos, clique no botão
+
. - Clique sobre a opção Google Pay.
- Na tela de configuração, ative a condição clicando em Status.
- Em Processar com o provedor, selecione a opção StripeV2.
- Clique em
Salvar
.
Depois de concluir essas etapas, o Google Pay aparecerá na finalização da compra da loja como um dos métodos de pagamento disponíveis.
Configurar pagamento com Apple Pay na StriveV2 (opcional)
Com o provedor StripeV2 você pode processar pagamentos com a Apple Pay em sua loja. Para configurar o Apple Pay, siga os passos abaixo:
- Caso já tenha concluido os passos de instalação do VTEX Elements, prossiga para o Passo 13.
- Instale o VTEX Elements Checkout (Stripe App) para obter as chaves Stripe necessárias.
- Assim que a instalação for concluída, as chaves pública (pk) e restrita (rk) serão exibidas. Copie e salve-os, pois serão usados posteriormente.
- No Admin VTEX, acesse Configurações da Loja > Pagamentos > Provedores, ou digite Provedores na barra de pesquisa no topo da página.
- Na página do provedor, clique no botão
Novo Provedor
. - Digite StripeV2 na barra de pesquisa e clique no nome do provedor.
- Em App key, insira a chave publicável que você obteve no VTEX Elements Checkout (Stripe App).
- Em App token, insira a chave RAK obtida no VTEX Elements Checkout (Stripe App)(chave API restrita).
- Em Informações básicas, na opção Nome, insira StripeV2Elements para identificar rapidamente a integração.
- Em Campos do provedor, na opção Mode, selecione Embedded.
- Em Test Mode, selecione False se o modo for Live ou True se o modo for Test.
- Clique em
Salvar
. - Acesse o dashboard de sua conta na Stripe na seção de configurações de pagamento.
- Em Settings, clique em Payment Methods.
- Clique em Apple Pay > Set Up.
- Clique em Add to New Domain.
- Insira o domínio público do site de sua loja.
- Clique em Add.
- Execute as ações descritas na documentação da Stripe e depois clique em Download the domain association file.
- Após obter o arquivo, salve a informação e acesse a seguinte URL
https://{{account}}.myvtex.com/_v/stripe.paid-provider/v0/registerApplePay
. Substitua o {{account}} pelo nome da sua conta VTEX. - Insira no campo Enter your Apple App Key a informação salva anteriormente.
- Clique em
Salvar
. - No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
- Na aba Condições de Pagamentos, clique no botão
+
. - Clique em Apple Pay.
- Na tela de configuração, ative a condição clicando em Status.
- Em Processar com o provedor, selecione a opção StripeV2.
- Se desejar utilizar um sistema antifraude, selecione a opção Usar solução antifraude.
- Indique se deseja processar pagamentos com ou sem parcelamentos.
- Caso necessário, você também pode configurar condições especiais de pagamento.
- Clique em
Salvar
.
Depois de concluir essas etapas, o Apple Pay aparecerá na finalização da compra da loja como um dos métodos de pagamento disponíveis.
Configurar condição de parcelamento sem juros (MSI) (opcional)
A condição de pagamento parcelada sem juros (MSI - Meses Sin Intereses) é disponível na Stripe somente para contas baseadas no México.
O MSI pode ser configurado tanto o modo de operação VTEX Native Checkout experience quanto para o VTEX with Stripe Payment Element Experience. Veja abaixo os passos necessários para configurá-lo de acordo com o tipo de modo de operação adotado em sua loja:
Configurar MSI no modo VTEX Native Checkout experience
- Crie uma conta Stripe no México configurada com a moeda MXN.
- No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
- Clique em um dos meios de pagamento disponíveis que processam pagamentos com MSI (cartões VISA, AMEX e Mastercard).
- Configure as condições MSI da forma desejada na tela do meio de pagamento.
- Configure as condições MSI no seu dashboard da Stripe com as mesmas informações utilizadas na configuração da VTEX (Passo 4.).
Caso as informações cadastradas nos Passos 4 e 5 sejam diferentes, a condição de MSI pode não funcionar corretamente.
Configurar MSI no modo VTEX with Stripe Payment Element Experience
- Crie uma conta Stripe no México configurada com a moeda MXN.
- Configure as condições de MSI no seu dashboard da Stripe.
- Entre em contato com o seu Stripe executive ou time de Stripe support para solicitar que esta condição de pagamento seja acionada em sua loja.