Stripe Connector for NetSuite の今すぐ支払うボタン
Stripe Connector for NetSuite 機能の請求書支払いページ、または請求書の決済用リンク (無料のセルフサービス) を使用している場合は、支払いページへのリンクを内部向けの請求書レコードから利用者向けの請求書 PDF に複数の方法でマッピングすることができます。ここでは、Advanced PDF のソースコードに挿入できる、構築済みの「今すぐ支払う」ボタンのコードスニペットをご紹介します。以下で手順とカスタマイズオプションをご確認ください。
コードスニペットを含む Advanced 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;">今すぐ支払う</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>
以下の紫色のセクションは、推奨される Advanced PDF テンプレート内での「今すぐ支払う」ボタンのコードスニペットの配置場所です。
コードスニペットのインストール手順:
- 支払いページへのリンクフィールドのインストール先の請求書フォームで、使用されている PDF テンプレートを確認するか、設定します。
- Customizations (カスタマイゼーション) > Forms (フォーム) > Transaction forms (トランザクションフォーム) に移動します。リストから請求書フォームを見つけて編集し、Advanced PDF テンプレートの使用が設定されていることを確認します。テンプレートの名前をコピーするか、覚えておきます。
- Customizations (カスタマイゼーション) > Forms (フォーム) > Advanced PDF/HTML Forms (Advanced PDF/HTML フォーム) に移動します。右上のトグルを切り替えて、ソースコードを表示させます。
- 請求書用のデフォルトの Advanced PDF テンプレートで開始している場合を除き、たいていはテンプレートがすでにカスタマイズされています。Advanced PDF のソースコードは HTML で記述され、CSS と FreeMarker のエレメントが含まれています。上記のコードスニペットは、2 つの “<#assign..” パラメーターが前置された 1 つの「table」を示しています。通常はスニペット全体を、個々のテーブル (table) の配置が可能なテンプレート上の任意の場所にコピーして貼り付けることができます。
- 推奨: ソースコードページの右上隅にある「プレビュー」ボタンをクリックします。これにより、フォームのビジュアルテンプレートを表示する新しいタブが開きます。コード内の場所を参照できるように、このプレビューは別のタブで開いたままにします。一般に、最も簡単な方法では、テーブルがソースコード内にすでに存在する <body> エレメントと </body> エレメントの間に貼り付けられますが、ヘッダーやフッター内にも貼り付けることもできます。
- 複数のコードブロックの開始部と終了部を確認して、コードブロックに割り込まない場所にコードスニペットを貼り付ける必要があります。
- たとえば、テーブルの作成に使用される HTML エレメントの階層の場合、通常は <table> で始まり、</table> で終わることが分かります。コードスニペットは既存のテーブルの間に貼り付けることができます。
カスタマイズオプション:
コードスニペットは、ソースコード内の適切な場所にコピーして貼り付けるだけで、そのまま機能しますが、以下のオプションを使用してデザインと配置を詳細にカスタマイズすることもできます。
- align="left" - 以下に表示されるこの両方のインスタンスを “center” または “right” に変更することで、「今すぐ支払う」ボタンと「Powered by Stripe」ロゴを、ページの指定した位置に揃えます。
- background-color: #635BFF - このカラー識別子を変更して、ボタンの背景色を変更します。
- color: white - “white” のテキストを別の HTML カラー名に変更して、ボタン内の文字の色を変更します。
- font-weight: bold - “bold” のテキストを別の HTML オプションに変更して、ボタン内のフォントを設定します。
- ">今すぐ支払う</a> - “今すぐ支払う” のテキストを自分で選んだテキストに変更します。
- 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} を含めることができます。ただし、このオプションはリンクのデザインのカスタマイズ機能がかなり限定されます。
Advanced PDF テンプレートのソースコードを使用して、カスタムボタンに固有コードを作成できますが、構築済みのコードを出発点として使用することをお勧めします。この支払いページへのリンクには、“Hyperlink” 取引本文フィールドタイプの使用を求める新たな技術要件があるため、取引本文フィールドページの “Link Text” 設定は使用できなくなります。このため、上記のコードスニペットで設定しているように、“<#assign…” や “<a href…” のようなコードのエレメントを使用する必要があります。