Botão "Pagar agora" do Stripe Connector for NetSuite
O uso do recurso de página de pagamento de faturas do Stripe Connector for NetSuite ou o link de pagamento de faturas (gratuito e por autoatendimento) oferece várias formas de mapear o link da página de pagamento da fatura do registro da fatura interna para a fatura em PDF mostrada ao cliente para que os clientes possam fazer um pagamento. Veja a seguir um snippet de código pré-integrado para o botão "Pagar agora" que pode ser inserido no código-fonte do PDF avançado. Veja abaixo as instruções e opções de personalização.
Prévia do modelo de PDF avançado com o snippet de código incluído:
Snippet de código que cria o botão "Pagar agora":
<#assign rawLink = record.custbody_stripe_payment_link>
<#assign paymentLink = rawLink?replace('.*href="([^"]+)".*', '$1', 'r')>
<table class="payhere" style="width: 100%; margin-top: 10px; margin-bottom: 20px;">
<tr>
<td align="left" style="text-align: center; padding-bottom: 20px;">
<a href="${paymentLink}" style="display: inline-block; padding: 15px 30px; background-color: #635BFF; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; font-size: 18px;">Pagar agora</a>
</td>
</tr>
<tr>
<td align="left" style="text-align: center;">
<img src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" />
</td>
</tr>
</table>
A seção roxa abaixo é o local recomendado para o snippet de código do botão "Pagar agora" no modelo de PDF avançado:
Como instalar nosso snippet de código:
- Verifique ou configure o modelo PDF usado pelo formulário de fatura em que você instalou o campo de link da página de pagamento.
- Navegue até "Personalizações" > "Formulários" > "Formulários de transação". Encontre e edite o formulário de fatura dessa lista e verifique se ele está configurado para usar um modelo de PDF avançado. Copie ou lembre-se do nome desse modelo.
- Navegue até "Personalizações" > "Formulários" > "Formulários PDF/HTML avançados". Marque a opção no canto superior direito para revelar o código-fonte.
- A menos que você esteja começando a usar o modelo de PDF avançado padrão para faturas, é provável que o modelo já tenha sido personalizado. O código-fonte do PDF avançado é escrito em HTML com CSS e elementos de FreeMarker incluídos. O snippet de código acima é essencialmente uma "table" com dois parâmetros "<#assign.." antes dela. Geralmente, o snippet inteiro pode ser copiado e colado em qualquer lugar no modelo onde uma tabela individual poderia ser colocada.
- Recomendado: clique no botão "Prévia" no canto superior direito da página do código-fonte. Uma nova guia com o modelo visual do formulário será aberta. Mantenha o modelo aberto em uma guia separada para consultar a posição no código. Normalmente, é mais fácil colar a tabela entre os elementos <body> e </body> já presentes no código-fonte, mas ela também pode ser colada dentro do cabeçalho ou rodapé.
- Você precisa encontrar o início e o fim de blocos de código distintos e colar o snippet de código nesse espaço, sem interromper um bloco de código existente.
- Por exemplo, você verá a hierarquia de elementos HTML usados para criar tabelas, que geralmente começam com <table> e terminam com </table>. Você pode colar o snippet de código entre tabelas existentes.
Opções de personalização:
O snippet de código funciona da forma que está. Você só precisa colá-lo em um local adequado no código-fonte. No entanto, é possível personalizar ainda mais a aparência e a posição com as seguintes opções:
- align="left" – altere as duas instâncias dessa opção que aparecem abaixo para "center" or "right" para alinhar o botão "Pagara gora" e o logotipo "Powered by Stripe" com essa posição na página.
- background-color: #635BFF – altere este identificador de cor para alterar a cor de fundo do botão.
- color: white – altere o texto "white" para outro nome de cor HTML para alterar a cor do texto do botão.
- font-weight: bold – altere o texto "bold" para outra opção HTML para a fonte do botão.
- ">Pagar agora</a> – altere o texto "Pagar agora" para outro da sua preferência.
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" /> – o logotipo "Powered by Stripe" pode ser alterado para as cores roxo ou branco colando o URL correspondente na seção verde destacada entre as aspas "...".
- Esse código inclui opções para alterar o tamanho e as margens do botão e do logotipo "Powered by Stripe".
Outras opções para criar seu próprio mapeamento de campos no modelo de PDF:
Você pode incluir {custbody_stripe_payment_link} em uma caixa de texto usando o modelo de PDF padrão. No entanto, essa opção tem uma capacidade muito limitada de personalização da aparência do link.
Usando o código-fonte do modelo de PDF avançado, você pode criar seu próprio código para um botão personalizado, mas recomendamos usar o código pré-integrado como ponto de partida. Novos requisitos técnicos para este link de página de pagamento exigem que ele use um campo de corpo de transação do tipo "Hyperlink", o que impede o uso da configuração "Texto do link" na página de campo do corpo da transação. Para isso, você precisa usar elementos no código como "<#assign…" e "<a href…", como fizemos no snippet de código acima.