kintoneとgusuku Customineを利用して、ノーコードにStripeの支払いリンクを作成・管理する

kintoneを利用することで、さまざまな社内業務やデータを整理・管理することができます。商談管理や製品の販売などの用途で利用する場合には、見積書や請求書の作成・管理と、その請求状況の管理などにkintoneを利用することもでき、kintone側でも「営業支援パック」や「商品見積書パック」など、さまざまなアプリを公開されています。

![スクリーンショット 2023-10-30 15.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6ba6f71b-12c7-77ee-c43d-73496687be0f.png)

これらのアプリを使うことで、簡単に見積書や請求書を作成し、メールまたは郵送にて請求を行うことができます。

## メール・郵送以外の経路で、顧客の注文を受け付けたい

一方でLINEやInstagramなど、チャット・SNSを介した顧客とのコミュニケーションが必要となるビジネスシーンも増えてきました。kintoneの拡張機能でも、LINEとkintoneを連携する機能も複数登場しています。

https://kintone-sol.cybozu.co.jp/integrate/joyzo013.html

https://kintone-sol.cybozu.co.jp/integrate/kuzen001.html

これらのチャンネルで注文を受け付けるには、メールや郵送以外の方法で請求書または支払いページのURL（支払いリンク）を顧客に届ける必要があります。

## チャットアプリやSNSのDMから請求を受け付けるために、「支払いリンク」を発行する

決済サービスによっては、チャットアプリやSNSなどでも利用できるように、「支払いリンク」を発行する機能を提供しています。例えばStripeでは、[Payment Links](https://stripe.com/jp/payments/payment-links)を利用して、コードを書かずに支払いのためのURLを発行できます。

![スクリーンショット 2023-10-30 16.01.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2c46db46-6519-922e-e041-2d79d2e42b2f.png)

https://stripe.com/jp/payments/payment-links

[Payment Links](https://stripe.com/jp/payments/payment-links)とkintoneを連携することで、**kintone上で管理している商品情報をもとに、新しいチャネルからの注文を受け付ける**ことができます。

kintone上にあるデータをStripeの[Payment Links](https://stripe.com/jp/payments/payment-links)へ連携するには、[gusuku Customine](https://customine.gusuku.io/)などのノーコードツールが利用できます。

https://www.r3it.com/info/stripe-customine-relation


## gusuku Customineを利用して、ノーコードにkintone上の商品データから支払いリンクを発行する

実際に、[gusuku Customine](https://customine.gusuku.io/)を使って、kintoneの商品情報から支払いリンクを作成してみましょう。連携が完了すると、次の動画のように、kintone上で支払いのためのURLを発行できるようになります。

![customine-payment-links-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/26faddf4-f9ae-d6d2-830d-846b1046c29d.gif)

### 費用について

Stripeおよびgusuku Customineは、無料で利用を開始できます。

kintoneについても、[30日間の無料トライアル](https://kintone.cybozu.co.jp/trial/)を利用して試用が可能です。APIを利用した開発なども検討されている方は、[kintone 開発者ライセンス（開発環境）](https://cybozu.dev/ja/kintone/developer-license/)を利用することもできます。

### kintone上で、商品リストアプリを用意する

まずはデータソースとなるアプリをkintoneに用意しましょう。[kintoneアプリストア]から、[商品見積書パック]を選択して、[このアプリパックを追加]ボタンをクリックしましょう。

![スクリーンショット 2023-10-30 15.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6ba6f71b-12c7-77ee-c43d-73496687be0f.png)

追加に成功すると、kintoneのポータル画面にある[アプリ]セクションに、[商品リスト]が追加されます。

![スクリーンショット 2023-10-30 16.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9941c1a6-ad9d-498d-8eac-dc4474f39ac8.png)

[商品リスト]をクリックすると、一覧画面が開きます。

![スクリーンショット 2023-10-30 16.17.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c225096f-e11c-3ba6-da88-dee1367a6a00.png)


初期状態ではデータが登録されていませんので、画像の例を参考に商品データを２・３件登録しましょう。

![スクリーンショット 2023-10-30 16.18.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/701a7696-1d59-1cb9-a682-e3093463a10f.png)

商品の登録が複数件できていれば、OKです。

![スクリーンショット 2023-10-30 16.19.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/efc1c5f1-5585-fb5e-7ee6-539caef594e6.png)

### StripeのAPIキーを取得する

CustomineからStripeを操作するには、StripeのAPIキーが必要です。[Stripeダッシュボード](https://dashboard.stripe.com/test)の[APIキー](https://dashboard.stripe.com/test/apikeys)ページから、[シークレットキー]を取得しましょう。

![スクリーンショット 2023-10-30 16.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a9fc4ea0-d04b-3da7-0d00-a1cde6f144f3.png)


### Customineで、kintoneの商品リストアプリをカスタマイズする

ここからはカスタマイズ作業を、Customine管理画面から行います。

[gusuku共通管理画面]右側にある[ブックマーク]内の[Customine　ドライブ画面]リンクをクリックしましょう。

![スクリーンショット 2023-10-30 16.26.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/45bc73d4-2b53-e09e-0cdb-06db3d4e7e33.png)

Customineのドライブ画面では、Customineを利用したカスタマイズや[Job Runner](https://www.r3it.com/info/service-jobrunner-release)などの管理と新規作成を行うことができます。新しいカスタマイズを行いますので、[新規のカスタマイズ作成]ボタンをクリックしましょう。

![スクリーンショット 2023-10-30 16.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e3e6a7ff-2535-0b11-9e20-68c4d57ef03b.png)

カスタマイズは[アプリのカスタマイズ]の他に、kintoneやStripeのWebhookイベントを処理する「kintoneアプリのWebhook」や「定期実行タスク」なども作れます。ここでは[kintoneアプリのカスタマイズ]を選びましょう。

![スクリーンショット 2023-10-30 16.30.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/3e1f2611-4ab4-d944-6b2e-553ddb4c2188.png)

カスタマイズを行うkintoneアプリを選択する画面が開きます。ここで[商品リスト]アプリを選択したいところですが、場合によってはアプリが表示されていないケースも存在します。これは作成したアプリが、Customine側に登録されていないことが原因です。

![スクリーンショット 2023-10-30 16.32.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/fb7b0c9c-50ab-3c1c-1e81-c728b0bf4133.png)

一覧に[商品リスト]アプリがない場合、[登録アプリを追加]ボタンをクリックしましょう。kintoneで作成したアプリの一覧が画面に表示されますので、[商品リスト]アプリのチェックボックスをオンにして、[選択したアプリを登録]ボタンをクリックしましょう。

![スクリーンショット 2023-10-30 16.34.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1731e041-f88e-fe91-4a83-942cf0a4003d.png)

アプリ選択画面に、[商品リスト]アプリが表示されましたので、ラジオボタンをクリックした後、[選択決定]をクリックしましょう。

![スクリーンショット 2023-10-30 16.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d2ef2afe-50eb-7783-10bb-d4827ac040db.png)

これでカスタマイズのための準備ができました。

![スクリーンショット 2023-10-30 16.37.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/51ae7e40-0e5d-e87f-e0a5-faffd2bbdbab.png)

#### 1: 商品リストの一覧に、チェックボックスとボタンを追加する

Customineでは、左側に表示内容や操作などの「やること」を、右側に表示するページの種類やデータの内容などの「条件」を設定します。まずは「どの商品を支払いリンクに含めるか」を選択するための、チェックボックスと作成ボタンを用意しましょう。

![スクリーンショット 2023-10-30 16.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/41a925a4-aa27-8e4a-2ae6-b4eb8d4918bf.png)

##### 一覧にチェックボックスを追加する

1つ目のボックスにある[やることを追加してください]テキストをクリックしましょう。するとCustomineでできるカスタマイズが一覧表示されます。

![スクリーンショット 2023-10-30 16.41.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f8fd7971-3f70-1c52-4eaf-02f23daed208.png)

一覧の右上に、検索フォームがありますので、[チェックボックス]と入力して[Enterキー]をクリックしましょう。するとチェックボックスに関するカスタマイズが表示されます。


![スクリーンショット 2023-10-30 16.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ed9a6f25-04ce-b03f-aedb-995b2d87471c.png)

商品の一覧にチェックボックスを追加したいので、[一覧にチェックボックス列を追加する]を選択し、[選択決定]をクリックしましょう。


![スクリーンショット 2023-10-30 16.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/973ed40c-6eb6-6252-efd0-ecd6198256f7.png)

[やること]が更新されました。条件についても、[一覧画面を表示した時]が自動的に設定されています。また、同時にチェックボックスで選択したデータを取得するためのアクションが、4番として追加されました。このように、関連するアクションが存在する場合や条件が限定的な場合は、ある程度自動的に設定を行ってくれます。

![スクリーンショット 2023-10-30 16.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ff96c623-f31b-9776-1ef0-4eacdfb82e41.png)

##### 操作ボタンを追加するアクションを追加する

４番で追加されたレコードを取得するアクションを実行するため、ボタンを追加しましょう。まず、４番のアクション右上にある「下向き矢印が１つあるボタン」をクリックし、２番のアクションを先に実行できるようにします。

![スクリーンショット 2023-10-30 16.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/22b34648-bd16-f37b-2db5-7c1564c4ae64.png)

１番と４番の間に２番のアクションが移動しました。ここにボタンを表示するアクションを設定します。

![スクリーンショット 2023-10-30 16.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/50b43af7-786d-8618-d0ae-2da4fad349a4.png)

２番の[やることを追加してください]テキストをクリックしましょう。今度は[ボタン]で[やること]を検索します。

![スクリーンショット 2023-10-30 16.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7c2bbbb3-0c1b-7c92-c318-bfac9a6640ac.png)

続いて[ボタンをメニュー位置に配置する]を選択して、[選択決定]ボタンを押しましょう。これでボタンを一覧画面に表示するアクションを追加できます。

![スクリーンショット 2023-10-30 16.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a8f2e004-96d8-f184-ceef-c282f004ca14.png)

こちらも条件が自動挿入された状態で、２番のアクションが更新されました。ただし「メニュー位置のどの場所にボタンを配置するか」がまだ決まっていません。

![スクリーンショット 2023-10-30 16.50.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0b002663-6019-c89b-d556-0fefb536bf62.png)

[場所]フィールドに[選択してください]テキストが表示されていますので、これをクリックします。すると表示位置の選択画面が開きますので、[一覧メニューの右側]を選びましょう。

![スクリーンショット 2023-10-30 16.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/036ad7ad-47c8-b23e-32a9-8d08024b631c.png)

[選択決定]をクリックすると、配置場所が保存されます。

![スクリーンショット 2023-10-31 9.55.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/420a3976-a9eb-0022-faf6-e4c8e3987b3c.png)

##### 操作ボタンを押した際のアクションを登録しよう

ボタンの配置ができましたので、チェックボックス列を追加した際に登録された、4番のアクションと紐づけましょう。

　4番のアクション右側にある[ボタンを押した時]セクションの、[ボタン]ラベル右側にある[選択してください]をクリックします。

![スクリーンショット 2023-10-31 10.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/07f4f75f-73ce-d346-58a3-c250c69d1338.png)

モーダルで、トリガーとして指定できるボタンが一覧表示されます。今回の手順では1つしか出てきませんので、これを選択しましょう。

![スクリーンショット 2023-10-31 10.06.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/33d5367c-9e3f-636a-3641-05136664f517.png)

[選択決定]ボタンをクリックして、アクションに登録します。

![スクリーンショット 2023-10-31 10.06.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/af7cfb2e-4ad6-9ab3-a193-fac108538986.png)

ボタンラベルの右側に、対応するアクションの番号がついていれば、紐付け完了です。

![スクリーンショット 2023-10-31 10.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8c9ef85e-b485-4e95-fc70-53aca69d73a2.png)

##### kintoneアプリへ登録する

ここまでで一度作業内容をアプリに反映させましょう。

![スクリーンショット 2023-10-31 10.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f9954b31-94b6-48d8-c8b7-f1b006d9d0d2.png)

ページ上部の[kintoneアプリへ登録]ボタンをクリックすると、アプリへの登録が開始されます。

![スクリーンショット 2023-10-31 10.18.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2ec4263f-556d-ef93-76c5-eef1ff99a926.png)

kintone側で作成した[商品リスト]アプリページに移動します。別タブ・別ウィンドウで開いている場合は、ページの更新・再読み込みを行いましょう。すると一覧の左端にチェックリストが表示されます。

![スクリーンショット 2023-10-31 10.18.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7ba6ec5a-cce2-33d4-0084-38fedf1f9038.png)

一覧上部に[ボタン]という名前のボタンが表示されていることも確認できます。gusuku Customineを使ったkintoneアプリのカスタマイズは、このようにコードを書かずに進めることが可能です。

#### 2: 選択されたレコードから、Stripeの支払いリンクを作成する

続いてボタンをクリックして、選択した商品を購入できる支払いリンクを作成する処理を追加しましょう。

##### Stripeの支払いリンクを作成するアクションを追加しよう
3番アクションの[条件を追加してください]をダブルクリックしましょう。ダブルクリックすることで、自動的に「前のアクション（今回は4番）の実行が完了した時」が条件として設定されます。

![スクリーンショット 2023-10-31 10.33.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/02e794d9-da0f-432e-d8cc-f3ffdd74b719.png)


続いて3番の[やることを追加してください]をクリックし、モーダル右上の検索フォームで[stripe]と検索しましょう。

![スクリーンショット 2023-10-31 10.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f804ac7c-4cbd-ea94-87fd-5c2c7f453fe2.png)

Customineでサポートされている、Stripe連携アクションが表示されます。今回は支払いリンクを作成するのが目的ですので、[Stripeの支払いリンクを作成する]を選択しましょう。

![スクリーンショット 2023-10-31 10.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1f9dbd90-3055-3f4d-8e9d-ad68737d6acf.png)

[選択決定]ボタンをクリックすると。アクション部分の表示が変わります。

![スクリーンショット 2023-10-31 10.34.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/081bb28f-6059-b086-9c56-6529b5d23b69.png)

##### アクションにStripeのAPIキーを設定しよう

Stripeと連携するアクションは、内部的にStripeのAPIを利用します。そのため自身のStripeアカウントとCustomineを連携させるため、StripeのAPIキーを登録する必要があります。

アクションの[Stripe APIキー]右側にある、[入力してください]をクリックしましょう。

![スクリーンショット 2023-10-31 10.34.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/083bc037-56c8-a433-c1bb-32898b0fefca.png)

入力フォームが表示されますので、「StripeのAPIキーを取得する」ステップで取得したAPIキーをペーストしましょう。入力後は[OK]ボタンをクリックして保存します。

![スクリーンショット 2023-10-31 10.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a843bbcc-4e2a-dc68-0bf9-f963fe5b639b.png)

登録したAPIキーは暗号化された状態でCustomineに保存されます。より安全な運用を目指す場合には、Customineで使用する用の[制限付きのAPIキー](https://stripe.com/docs/keys#create-restricted-api-secret-key)を作成して利用しましょう。

![スクリーンショット 2023-10-31 10.50.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ab6e8f98-f9b2-6125-b7d9-69dd9f42560b.png)

##### 明細マッピングで、選択した商品の情報を送信しよう

続いて支払いリンクに登録する商品情報を設定しましょう。[明細マッピング]右側の[入力してください]をクリックすると、マッピング画面が開きます。

![スクリーンショット 2023-10-31 10.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/fba30def-4724-e82c-4e21-1bcd662fce4d.png)

[支払いリンクを作成するアクションのドキュメント](https://docs-customine.gusuku.io/ja/actions/external/stripe_create_paymentlink/)を参考に、マッピングを設定しましょう。

明細の[商品コード]左側にある[挿入]と表示されているセレクトボックスをクリックすると、どのデータをマッピングに利用するかを選べます。今回は[フィールド]を選択しましょう。

![スクリーンショット 2023-10-31 10.54.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e6f6bb9c-b33d-1c98-8052-642dac95b2f0.png)

[フィールド]を選択すると、kintoneアプリのフィールド選択画面が開きます。[型番]フィールドを選択し、[選択決定]を押しましょう。

![スクリーンショット 2023-10-31 10.55.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/20a687fb-8106-2df1-1ac1-391003e5a71f.png)

[セットする値]に[= 型番]が挿入されました。このようにして、他のアクションの結果やkintoneアプリのフィールド情報を、Stripeに送信するAPIリクエストとマッピングできます。

![スクリーンショット 2023-10-31 10.56.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7e947e08-5f91-6360-1ce6-d4aa7df75379.png)

今回のサンプルでは、[商品名][単価][数量]を次の画像のように設定しましょう。

![スクリーンショット 2023-10-31 10.57.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/251d970c-6114-ca71-c38a-552492b48650.png)

設定が終われば、[OK]ボタンをクリックして保存します。保存すると、アクションの詳細に設定が反映されます。

![スクリーンショット 2023-10-31 10.58.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/4db45fb0-28fb-2f5b-3980-ce9653e2613d.png)


##### 作成した支払いリンクのURLを、画面に表示しよう

最後に、作成した支払いリンクのURLを、kintoneアプリから見れるようにしましょう。ページ下部の[アクションを追加]ボタンをクリックします。

![スクリーンショット 2023-10-31 10.59.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/de998be3-a168-ee4c-44cb-8eb86c5d72cc.png)

5番のアクションが追加されました。こちらも前のステップが成功したタイミングで実行するアクションですので、[条件を追加してください]をダブルクリックします。

![スクリーンショット 2023-10-31 10.59.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/03db5abf-1746-b304-420c-430951447a51.png)

条件が追加されました。[やることを追加してください]をクリックしましょう。

![スクリーンショット 2023-10-31 11.00.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/90dca383-ff61-888f-084f-9d18e85fe1d0.png)

[やること]の選択画面では、「カテゴリー」から「その他のUI」を選択し、「情報ダイアログを表示する」を選択します。選択した状態で[選択決定]ボタンをクリックしましょう。

![スクリーンショット 2023-10-31 11.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f9c260e0-e173-ddd4-4d3e-934a92b54c37.png)

ダイアログを表示するアクションが追加できました。表示するメッセージを編集するため、[メッセージ入力]右側の[入力してください]をクリックしましょう。

![スクリーンショット 2023-10-31 11.09.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/91076f10-b11b-5d78-9c47-a663a452fc57.png)

テキスト入力画面が開きます。作成した支払いリンクのURLを挿入するためには、[その他のアクションの結果]ボタンをクリックします。

![スクリーンショット 2023-10-31 11.10.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/52b8e681-7997-b43d-59eb-5a4119081ccb.png)

結果を挿入するアクションを選ぶ画面が開きます。[Stripeの支払いリンクを作成する]アクションを選択しましょう。

![スクリーンショット 2023-10-31 11.10.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d1c71c26-9111-3421-0840-5ce058fa85bc.png)

アクションの実行結果からは、URLまたはIDを取得できます。今回はURLを表示させたいので、[支払いリンクURL]を選びます。選んだ状態で、[選択決定]をクリックしましょう。

![スクリーンショット 2023-10-31 11.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/edac95d4-3107-6835-14af-f4e0d0f3aad3.png)

テキスト入力欄に、`${$3.url}`のような形で、アクションの実行結果が追加されました。これをテキストリンクに変換するには、追加されたテキストを選択した状態で、[リンクの追加または削除]ボタンをクリックします。

![スクリーンショット 2023-10-31 11.14.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a50852ff-0830-6705-9302-bf38a47c4eb7.png)

リンクを設定する画面が表示されますので、リンクテキストと同じ`${$3.url}`のようなテキストを入力しましょう。[Save]ボタンをクリックすると、リンクが設定されます。

![スクリーンショット 2023-10-31 11.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/05646357-156c-8f3f-4bbd-fe002b77a399.png)

リンクが設定されたテキストは、文字の色が変わります。この状態で[OK]ボタンをクリックすると、ダイアログに表示するメッセージを保存できます。

![スクリーンショット 2023-10-31 11.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8867190e-bcb6-e45b-596b-2befda630bec.png)

#### Customineのカスタマイズを、kintoneアプリへ登録する

カスタマイズが完了しましたので、変更をkintoneアプリに登録しましょう。[kintoneアプリに登録]ボタンをクリックすると、アプリ側のカスタマイズも更新されます。

![スクリーンショット 2023-10-31 11.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a839c235-41d6-74bd-8ad1-98e750a18fb6.png)

kintoneアプリのタブ・ウィンドウを再読み込みして、商品を選択後に[ボタン]をクリックしてみましょう。注文URLがダイアログに表示されていれば、作成成功です。

![スクリーンショット 2023-10-31 11.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/bdc691bf-7aa7-bb94-91e3-92090e74636f.png)

URLをクリックすると、商品リストで選択した商品と金額を利用した支払い画面が表示されます。

![スクリーンショット 2023-10-31 11.18.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/da9214d4-bfb8-22f3-f214-f339a1f04638.png)

このようにして、kintoneのデータを利用したクレジットカード決済・支払いフォームを作成することができます。

## [Advanced] Stripeの支払いリンクも、kintoneで管理する

作成した支払いリンクの管理も、kintoneとCustomineを使って管理できます。

次のようなフィールドを持つkintoneアプリを作成しましょう。

![スクリーンショット 2023-10-31 11.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6c1a8c48-57ac-8951-9b50-8a27d6687fdb.png)

その後、Customine側で[テーブルデータをセットしたレコードを追加する]アクションを利用して、作成した支払いリンクやレコードの情報を[支払いリンク管理]のkintoneアプリに追加するアクションを追加しましょう。

![スクリーンショット 2023-10-31 11.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/be392d59-d4d4-0c31-7fd5-185fa37e85cb.png)

変更をkintoneアプリに登録すると、次のGIFのように、作成した支払いリンクをkintoneで一覧表示・管理できるワークフローが作れます。

![customine-payment-links-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6b130ec4-5271-5607-bc3e-b54dac3ad565.gif)

## 実際の運用に向けたTips

この記事では、支払いリンクの作成方法とCustomineの使い方にフォーカスして紹介しました。実際の運用では、「支払いリンクを利用した注文情報を受け取るワークフロー」や「使い終わった支払いリンクを無効化するカスタマイズ」なども作成する必要があります。これらについても、Customineの機能を利用して実装が可能ですので、ぜひお試しください。

https://docs-customine.gusuku.io/ja/actions/external/stripe_deactivate_paymentlink/

https://docs-customine.gusuku.io/ja/job/conditions/condition_webhook/if_stripe_webhook_payment_intent_suceeded/

また、StripeダッシュボードやiOS / Androidアプリを利用して、支払いの成功やチャージバック申請などの支払いに関する通知を、メールやアプリ・SMSから受け取れるようにも設定できます。

https://support.stripe.com/questions/set-up-account-email-notifications

https://apps.apple.com/us/app/stripe-dashboard/id978516833

https://play.google.com/store/apps/details?id=com.stripe.android.dashboard&hl=ja&gl=US&pli=1


## [PR]Cybozu Days 2023にアールスリーインスティテュートと共同でブース出展します

2023年11月8日（水）9日（木）に幕張メッセ9～11ホールで開催されるCybozu Days 2023に、Stripeパートナーのアールスリーインスティテュート社と共同でブースを出展します。

https://days.cybozu.co.jp/exhibition/?tag=panda

今回紹介したCustomineを利用した連携方法や、Stripe APIを利用したkintoneプラグイン開発などを紹介予定ですので、ぜひご参加ください。

https://days.cybozu.co.jp/