Como adicionar botões de pagamento de tarja simples às suas tabelas de preços no Divi

Stripe é uma solução de processamento de pagamentos extremamente flexível para negócios online, especialmente se você for um desenvolvedor experiente em tecnologia. Mas, se você não for um desenvolvedor e ainda quiser usar o Stripe para vender alguns produtos online, existem maneiras simples de fazer exatamente isso. Na verdade, com alguns trechos de código (ou um plug-in simples), você pode adicionar botões de pagamento Stripe ao seu site em um piscar de olhos.

Neste tutorial, vou mostrar como adicionar botões de pagamento Stripe ao seu site Divi usando o plug-in Stripe Payments para WordPress. Vou até mostrar como estilizar seus botões para combinar com o layout Divi.

Vamos começar!

Espiada

Aqui está uma prévia dos botões de pagamento Stripe que criaremos neste tutorial.

Começando

Para este tutorial de caso de uso, você precisará do seguinte:

• O Divi Theme (instalado e ativo)
• Uma conta Stripe
• The Stripe Payments for WordPress Plugin por WP Simply Pay (instalado e ativo)
• Também usaremos o Layout de página de preços de produtos digitais disponível GRATUITAMENTE no Divi Builder

Sobre o Plugin

Stripe Payments para WordPress por WP Simply Pay é um plugin que permite que você comece a coletar pagamentos com cartão de crédito com Stripe usando um simples shortcode embutido. Você pode criar formulários de checkout e botões de pagamento manualmente sem o uso do plug-in, mas como esse plug-in facilita as coisas e oferece alguns recursos convenientes (como páginas de confirmação de pagamento e falha no pagamento), achei que seria mais útil no longo prazo . Usarei a versão Lite GRÁTIS do plugin para este tutorial. A versão pro do plugin lhe dará mais controle sobre o estilo de seus formulários, juntamente com suporte para coisas como campos personalizados, valores personalizados e recursos de assinatura.

Configurando formulários Stripe com o Plugin

Depois de ter o plug-in instalado e ativo, navegue até Simple Pay Lite > Configurações . Em seguida, na guia Stripe Keys, você precisará inserir as chaves de API da sua conta Stripe. Por causa deste tutorial, estarei usando apenas as chaves de teste, mas você precisará certificar-se e ativar sua conta Stripe e gerar algumas chaves de API ativas se quiser começar a coletar dinheiro real.

Você pode encontrar suas chaves de API fazendo login em sua conta do Stripe e clicando em Desenvolvedores > Chaves de API .

Você precisará copiar a chave publicável e a chave secreta para as configurações do plugin.

Agora vá para a guia geral. Lá você poderá designar uma página de sucesso de pagamento e uma página de falha de pagamento. Você notará que o plugin já criou essas páginas para você. Mas como o conteúdo da página é gerado por um shortcode, você pode realmente adicionar esses shortcodes a qualquer módulo Divi em qualquer layout Divi para criar versões personalizadas dessas páginas. Por enquanto, apenas mantenha essas páginas padrão no lugar e continue a configuração.

Defina o estilo do botão de pagamento como “nenhum (herdar do tema)”. Tudo isso faz é retirar o css usado para estilizar o botão de faixa azul padrão. Isso tornará as coisas um pouco mais claras para quando adicionarmos nosso próprio CSS personalizado para estilizar o botão no Divi.

Em seguida, salve as alterações.

Na guia de confirmação de pagamento, você pode usar as tags de modelo disponíveis para personalizar a mensagem e as informações que são exibidas pelo código de acesso em sua página de confirmação de pagamento. Mas para este tutorial, vou apenas deixar a mensagem padrão.

Criação de formulários de pagamento stripe

Os formulários de pagamento são, na verdade, botões de pagamento Stripe que geram um formulário de pagamento pop-up que permite aos usuários concluir uma compra sem nunca sair da página. Portanto, você precisará criar uma nova forma de pagamento para cada produto ou serviço que estiver vendendo. Nesse caso de uso, vamos criar três formas de pagamento para três produtos fictícios.

Para criar um novo formulário de pagamento, vá para o Painel do WordPress e navegue até Simple Pay Lite> Add New.

Atribua um título ao formulário de pagamento (este título não será mostrado no front end).

Em seguida, na guia Opções de pagamento, insira um valor único.

Em seguida, clique na guia Exibição do formulário na página e altere o texto do botão de pagamento padrão para “Compre agora” (ou o que quiser). Você também pode escolher o texto de processamento do botão de pagamento.

Na guia Checkout Overlay Display, atualize o seguinte:

Nome da empresa
descrição do item
Logotipo / URL da imagem
Ative Lembrar de mim: SIM

Essas opções determinam o que é mostrado no pop-up do formulário de checkout para este produto específico.

Assim que terminar, certifique-se de publicar / atualizar o formulário de pagamento.

Eventualmente, você precisará copiar o código abreviado do formulário de pagamento localizado no canto superior direito da página Editar formulário de pagamento para colá-lo no layout da página Divi.

Mas, por enquanto, você pode continuar o mesmo processo para criar mais dois formulários de pagamento, cada um com sua própria descrição do item, logotipo / imagem e valor.

Depois de criar todos os seus formulários de pagamento, você pode visitá-los navegando até Simple Pay Lite> Payment Forms. Lá você terá acesso fácil aos códigos de acesso.

Adicionando botões de pagamento Stripe ao layout da página Divi

Com os códigos de acesso do formulário de pagamento de tarja prontos para usar, agora precisamos colocar nosso layout de página Divi em funcionamento. Para fazer isso, crie uma nova página, dê um título à sua página e clique para usar o Divi Builder.

Em seguida, selecione a opção “Choose a Premade Layout”.

Abra o pacote Digital Product Layout e clique para usar a página Digital Product Pricing.

Depois que o layout for carregado na página, publique a página e clique para criar no front end.

Em uma guia separada, volte para a página de formulários de pagamento e pegue o código de acesso que deseja adicionar à tabela de preços.

Em seguida, volte para o layout da página de preços e abra as configurações da tabela de preços para uma das tabelas de preços no layout.

Retire o texto do botão (você não precisa dele, pois o código de acesso servirá como botão) e, em seguida, cole o código de acesso sob o conteúdo na caixa de conteúdo.

Você verá um botão sem estilo com o texto “modo de teste” destacado sob o botão. O botão está sem estilo porque selecionamos a opção de usar os estilos de tema para o botão em vez do botão azul padrão. O texto do modo de teste está simplesmente lá para lembrá-lo de que você não está usando um formulário de pagamento com stripe dinâmico. O texto do modo de teste obviamente desaparecerá quando as chaves de API ativas forem usadas.

Em seguida, continue o mesmo processo de copiar e colar os outros dois códigos de acesso do formulário de pagamento nas duas tabelas de preços restantes.

Teste um dos botões para verificar se a sobreposição do formulário de pagamento está funcionando corretamente. Deve ser assim ...

Infelizmente, esta versão do plugin não permite que você personalize a sobreposição do formulário de pagamento além do estilo padrão que você vê. Mas a funcionalidade está lá e, em muitos casos, você não precisará daquele estilo extra. No entanto, você pode estilizar esses botões!

Definir o estilo dos botões de pagamento de tarja para combinar com o layout

Para estilizar os botões de pagamento do Stripe, vamos adicionar algum CSS personalizado às configurações da página. Primeiro, precisamos descobrir qual seletor usaremos para estilizar o botão. Você pode encontrar isso usando as ferramentas de desenvolvedor do seu navegador. Clique com o botão direito no botão Stripe e selecione “Inspecionar”. No código html você pode ver que o botão possui uma classe css “simpay-payment-btn”.

Este é o seletor de que precisamos para definir o estilo do botão.

Se quisermos combinar o estilo de nossos botões de pagamento Stripe com os botões usados ​​em nosso layout predefinido, podemos inspecionar um dos botões Divi já estilizados na página para obter o código CSS de que precisamos.

Agora abra as configurações da página e adicione o seguinte CSS personalizado na guia Avançado:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

É isso! Vamos conferir o resultado final.

Personalização de suas páginas de confirmação de pagamento e de falha de pagamento

Não se esqueça de que, uma vez que o plugin gera sua confirmação de pagamento e o conteúdo da página de falha de pagamento usando um código de acesso, você pode adicionar esse código de acesso a qualquer layout Divi e, em seguida, usar as configurações integradas do Divi para definir o estilo do texto como quiser.

Isso é útil para combinar os estilos dessas páginas com o seu site, sem ter que recorrer a CSS customizado.

Pensamentos finais

O Stripe pode ser uma solução extremamente conveniente para receber pagamentos online. E, com o plugin Simple Payments for WordPress, você pode obter a funcionalidade básica do Stripe Checkout instalada e funcionando em seu site Divi em minutos. Além disso, se você aproveitar as vantagens dos layouts predefinidos do Divi, poderá adicionar e estilizar seus botões de pagamento Stripe para corresponder ao seu layout simplesmente copiando e colando o código CSS já criado para você. O resultado é uma ferramenta de processamento de pagamentos totalmente funcional e segura que pode coletar os pagamentos dos visitantes sem que eles tenham que sair da página.

Sinta-se à vontade para explorar mais maneiras de aceitar pagamentos Stripe em seu site WordPress.

Espero que você ache este tutorial útil e estou ansioso para ouvir de você nos comentários.

Saúde!