Stripe Payment Linksで配送方法と配送料金を指定できるようにする方法

StripeのPayment Linksを利用すると、No Codeでさまざまなビジネスで利用できる支払いリンクを作成できます。

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

2022/05のアップデートからは、商品の料金とは別に配送方法や配送料金についても設定できるようになりました。

今回は、「通常発送・速達便」などの配送方法を決済ページで指定する方法を紹介します。

## 配送方法・料金をDashboardで登録する

*[APIでの登録方法をはこちら](https://qiita.com/hideokamoto/items/1a56ede321e1650a6302#nodejs-sdk%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

配送方法や料金は、Stripe Dashboardから設定できます。

[商品]から[配送料金]を選びましょう。

![スクリーンショット 2022-05-16 17.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a19fcf27-c688-ec03-27be-3ac7a731bd4c.png)
直接リンク: https://dashboard.stripe.com/test/shipping-rates

[配送料金を追加]または[新規]ボタンをクリックすると、登録画面が表示されます。

![スクリーンショット 2022-05-16 18.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/b6095958-e2dd-a607-62a8-7934c8322cef.png)

料金・説明文と予想配送日時が設定できます。

Stripe Taxを有効化している場合、税金に関する設定も行えます。

![スクリーンショット 2022-05-16 18.06.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ba11bbad-5e69-ad22-7e34-e2342c9c199f.png)

## 支払いリンク作成ページでサポートする地域と、配送方法を指定する

配送料金を設定した後、支払いリンクページの作成画面に移動しましょう。

配送料金を設定するには、[オプション]の「顧客の住所を収集する]にチェックを入れましょう。

その後、[請求先住所と配送先住所]を選択すると、[配送先の国を選択する]ボタンが表示されます。

![スクリーンショット 2022-05-16 18.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e5009ebb-e7b0-d717-d93a-d793c6e0cd45.png)

配送地域の候補が出ますので、[日本]を選択しましょう。

![スクリーンショット 2022-05-16 18.13.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a6bc6414-6315-4178-ccd8-8fc12f7ee4c9.png)

地域を指定すると、配送料金を選択する画面が追加されます。

![スクリーンショット 2022-05-16 18.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ffa2cd00-031e-3eb7-44f0-75d4ca23c9d2.png)

登録した配送料金を選ぶ画面がでますので、設定したい料金を選択しましょう。

![スクリーンショット 2022-05-16 18.16.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/699f87ea-2d51-4ed7-ec39-edade3ea7d53.png)

複数選択することもできます。

![スクリーンショット 2022-05-16 18.17.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c94c2985-5d53-0d14-33d2-d270ef097676.png)

あとは保存するだけで、支払いリンクの生成が完了します。

## テストモードで動作を確認する

作成した支払いリンクのURLにアクセスしてみましょう。

配送料金を１つ指定している場合、登録した配送料金が明細に表示されます。

![スクリーンショット 2022-05-16 18.20.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c0f6ed32-92e4-99b3-75ba-b0e0fbf2e879.png)

複数設定している場合は、住所フォームの下に配送方法を選ぶ画面が追加されます。

![スクリーンショット 2022-05-16 18.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/cc64ee49-77ac-02b8-0a0f-acad86bb2a3d.png)

## 注文データで、配送方法を確認する

選択された配送方法は、Dashboardの[支払い]から確認できます。

[Checkoutサマリー]の[配送]に配送料金の設定名が表示されますので、内容に応じて配送の手配を行いましょう。

![スクリーンショット 2022-05-16 18.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a4229649-8af0-aebe-036a-c16b05d2e376.png)

システムと連携させたい場合には、以下の記事を参考にWebhook APIを実装しましょう。

https://qiita.com/hideokamoto/items/1a56ede321e1650a6302#webhook%E3%81%A7%E9%81%B8%E6%8A%9E%E3%81%95%E3%82%8C%E3%81%9F%E9%85%8D%E9%80%81%E6%96%B9%E6%B3%95%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B

# [PR] Stripe開発者向け情報をQiitaにて配信中！

- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)

など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。

-> [Stripe Organizationsをフォローして最新情報をQiitaで受け取る](https://qiita.com/organizations/stripe)