Botón Pagar ahora de Stripe Connector for NetSuite
Cuando se utiliza la función de la página de pago de facturas de Stripe Connector for NetSuite o el enlace de pago de facturas (gratuito y de autoservicio), existen varias formas de asignar el enlace de la página de pago desde el registro de facturas interno a la factura en PDF del cliente para permitir que tus clientes realicen un pago. A continuación se incluye un fragmento de código prediseñado del botón «Pagar ahora» que puedes insertar en el código fuente del PDF avanzado. Consulta las instrucciones y las opciones de personalización que se encuentran a continuación.
Vista previa de la plantilla PDF del avanzado con fragmento de código incluido:
Fragmento de código que crea el botón «Pagar ahora»:
<#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;">Pay Now</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>
La sección morada que se encuentra a continuación es la ubicación recomendada del fragmento de código del botón «Pagar ahora» en la plantilla del PDF avanzado:
Cómo instalar nuestro fragmento de código:
- Verifica o configura qué plantilla del PDF está utilizando el formulario de factura en el que instalaste el campo Enlace a la página de pago.
- Ve a Personalizaciones>Formularios>Formularios de transacción. Busca y edita el formulario de factura de esa lista y asegúrate de que esté configurado para utilizar una plantilla del PDF avanzado. Copia o recuerda el nombre de esa plantilla.
- Ve a Personalizaciones>Formularios>Formularios PDF/HTML avanzados. Activa el conmutador de la parte superior derecha para ver el código fuente.
- A menos que comiences con la plantilla predeterminada del PDF avanzado para facturas, es probable que tu plantilla ya se haya personalizado. El código fuente del PDF avanzado está escrito en HTML con elementos CSS y FreeMarker incluidos. El fragmento de código anterior es básicamente una «tabla» con dos parámetros «<#assign..» delante. Por lo general, el fragmento completo puede copiarse y pegarse en cualquier lugar de la plantilla donde podría colocarse una tabla individual.
- Recomendación: Haz clic en el botón «Vista previa» situado en la esquina superior derecha de la página del código fuente. Esta acción debería abrir una nueva pestaña con la plantilla visual del formulario. Mantenla abierta en una pestaña separada para que puedas consultar dónde te encuentras en el código. Generalmente, la tabla es más fácil de pegar entre los elementos <body> y </body> que ya están en el código fuente, pero también se puede pegar dentro del encabezado o pie de página.
- Tienes que encontrar el principio y el final de diferentes bloques de código y pegar el fragmento de código en ese espacio, en lugar de interrumpir un bloque de código.
- Por ejemplo, verás la jerarquía de los elementos HTML que se utilizan para crear tablas, que generalmente empiezan por <table> y terminan en </table>. Puedes pegar el fragmento de código entre las tablas existentes.
Opciones de personalización:
El fragmento de código funcionará tal cual con solo copiarlo y pegarlo en una ubicación apropiada del código fuente. Sin embargo, puedes personalizar aún más el aspecto y la posición con las siguientes opciones:
- align="left" -Para alinear el botón «Pagar ahora» y el logotipo «Powered by Stripe» en la zona central o derecha de la página, cambia las dos instancias de esta opción que se encuentran a continuación a «centre» o a «right».
- background-color: #635BFF -Cambia este identificador de color para cambiar el color de fondo del botón.
- color: white -Cambia el texto «white» por otro nombre de color HTML para cambiar el color del texto del botón.
- font-weight: bold -Cambia el texto «bold» por otra opción HTML para la fuente del texto del botón.
- ">Pay Now</a> -Cambia el texto «Pagar ahora» por el que prefieras.
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" /> -El logotipo «Powered by Stripe» puede cambiarse a color púrpura o blanco pegando la URL correspondiente en la sección resaltada en verde entre las comillas.
- Este código incluye opciones para cambiar el tamaño y los márgenes tanto del botón como del logotipo «Powered by Stripe».
Otras opciones para crear tu propia asignación de campos a la plantilla del PDF:
Con la plantilla del PDF estándar, puedes incluir {custbody_stripe_payment_link} en un cuadro de texto. Sin embargo, esta opción es muy limitada en cuanto a la posibilidad de personalizar el aspecto del enlace.
Utilizando el código fuente de la plantilla del PDF avanzado, puedes escribir tu propio código para crear un botón personalizado, pero te recomendamos que utilices el código prediseñado como punto de partida. Existen nuevos requisitos técnicos para este enlace de página de pago que exigen que se utilice un tipo de campo del cuerpo de la transacción «Hiperenlace», lo que te impide poder utilizar el ajuste «Texto del enlace» en la página de campo del cuerpo de la transacción. Estos requisitos exigen que utilices en tu código elementos como «<#assign...» y «<a href...», como hemos hecho en el fragmento de código anterior.