在使用 Stripe Connector for NetSuite 功能的账单支付页面或账单支付链接(免费和自助服务)时,有多种方法可以将内部账单记录中的支付页面链接映射到面向客户的 PDF 账单,以便您的客户能够进行支付。以下是一个预构建的“立即支付”按钮代码片段,可以插入到高级 PDF 源代码中。请参见下面的说明和自定义选项。
包含代码片段的高级 PDF 模板预览:
“立即支付”按钮创建代码片段:
<#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>
下面的紫色部分是高级 PDF 模板中“立即支付”按钮代码片段的推荐位置:
如何安装我们的代码片段:
- 验证或配置您安装了 Payment Page Link 字段的账单表单所使用的 PDF 模板。
- 导航到“自定义” > “表单” > “交易表单”。从列表中查找并编辑账单表单,确保已配置它使用高级 PDF 模板。复制或记下该模板的名称。
- 导航到“自定义” > “表单” > “高级 PDF/HTML 表单”。点击右上角的切换按钮以显示源代码。
- 除非您是从默认的账单高级 PDF 模板开始,否则您的模板可能已经被自定义过。高级 PDF 源代码是用 HTML 编写的,并包含 CSS 和 FreeMarker 元素。上面的代码片段本质上是一个带有两个 “<#assign..” 参数的“表”。整个代码片段通常可以复制并粘贴到模板中可以放置单独表格的任何位置。
- 建议:点击源代码页面右上角的“预览”按钮。这会打开一个新标签页,显示表单的可视模板。保持这个标签页打开,便于您参考代码中的当前位置。通常,表格最容易粘贴在源代码中现有的 <body> 和 </body> 元素之间,但也可以粘贴在页眉或页脚部分。
- 您需要找到不同代码块的开始和结束位置,并将代码片段粘贴到这个地方,不要分开某个代码块。
- 例如,您会看到用于创建表格的 HTML 元素层次结构,通常以 <table> 开始,以 </table> 结束。您可以在现有表格之间粘贴代码片段。
自定义选项:
代码片段可以按原样工作,只需将其复制并粘贴到源代码中的适当位置即可。然而,您可以通过以下选项进一步自定义外观和位置:
- align="left" - 将下面出现的两个实例更改为“center”或“right”,以将“立即支付”按钮和“Powered by Stripe”徽标对齐到页面的该位置。
- background-color: #635BFF - 更改此颜色标识符以更改按钮的背景颜色。
- color: white - 将“white”文本更改为其他 HTML 颜色名称,以更改按钮中文本的颜色。
- font-weight: bold - 将“bold”文本更改为按钮内字体的其他 HTML 选项。
- ">Pay Now</a> - 将“Pay Now”文本更改为您自己选择的文本。
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" /> -“Powered by Stripe”徽标可以通过将相应的 URL 粘贴到“...”引号之间的绿色高亮部分来更改为紫色或白色。
- 该代码中包含选项,可以更改按钮和“Powered by Stripe”徽标的大小和边距。
创建您自己映射到 PDF 模板的字段的其他选项:
使用标准 PDF 模板,您可以在文本框中包含 {custbody_stripe_payment_link}。但是,该选项在自定义链接外观方面非常有限。
使用高级 PDF 模板源代码,您可以为自定义按钮编写自己的代码,但我们建议使用预构建代码开始。该 Payment Page 链接有新的技术要求,需要使用“超链接”交易主体字段类型,这可以防止您在交易主体字段页面上使用“Link Text”设置。这要求您在代码中使用像“<#assign…”和“<a href…”这样的元素,正如我们在上面的代码片段中所做的那样。