[ノーコード x Stripe で始めるオンライン決済] Stripe Quotesで見積書を作成し、そのまま請求を行う業務をノーコードで行う方法

Stripeを利用することで、毎月の請負契約の請求業務を自動化することができます。

しかし業界や取引先によっては、事前に見積書を作成し、その承認が終わってから改めて請求を行う必要があります。

Stripeでは、ノーコード / API実装両方でこの見積書発行に関する業務と、承認後の請求操作を自動化することができます。

それがStripe Quotesです。

https://stripe.com/jp/docs/quotes

# Stripe Quotesでできること

Quotesを利用することで、以下のようなオペレーションを行うことができます。

- Dashboard / APIから見積書を作成し、PDFを発行する
- 有効期限を設定し、期限が切れた見積書を無効にする
- 発行済みの見積書の内容を改訂し、最新版以外の見積書を無効化する
- 承認された見積書をそのまま請求書・定期課金に変換する

# ノーコードで見積書を作成する

Stripe Quotesは、Dashboardからノーコードで利用できます。

Dashboardの[見積もり](https://dashboard.stripe.com/test/quotes)からはじめましょう。

まずは、[見積もりを作成]をクリックします。

![スクリーンショット 0004-02-07 18.30.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/003cda13-b931-553e-a4ba-1752d0270b5a.png)

請求書やサブスクリプションなどと同じように、対象の顧客や商品・料金を設定する画面が表示されます。

![スクリーンショット 0004-02-07 18.33.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/4f4d8ba9-7e24-9ad2-cc27-540800406958.png)

## 見積書の有効期限を設定する

見積書には、有効期限が設定できます。

![スクリーンショット 0004-02-07 18.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9cb08e63-c52e-9f96-959e-486cfa485ee5.png)

「指定した日数」または「特定の日付」を期限に設定しましょう。

## ヘッダー・フッター・メモに見積書の情報を追記する

請求書などと同じく、メモやフッターのテキストを追加できます。

![スクリーンショット 0004-02-07 18.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1a35d98c-49e5-7506-caa0-1314c96e975f.png)

追加したテキストの表示は、ページ右上にある[プレビューをダウンロードする]ボタンからPDFをダウンロードして確認できます。

![スクリーンショット 0004-02-07 18.38.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f073ad95-f184-62f9-63c5-8e5be8bf83e6.png)

## 見積書を確定し、顧客に送付する

見積書の内容が固まれば、[見積もりを確定]をクリックします。

![スクリーンショット 0004-02-07 18.46.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/39c901fc-66b9-a12a-75df-eeacf2d8e4a1.png)

確定すると、見積もりの内容やPDFのダウンロードボタンが表示されます。

![スクリーンショット 0004-02-07 18.46.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/40f44b32-0607-3618-70a8-c476027efef0.png)

[見積もりPDF]ボタンをクリックし、見積書をダウンロードしましょう。
その後、顧客にメールで送付することで、見積書の作成と送付が完了します。

## 見積もり内容を変更する

数量の変更や商品の追加・削除・割引などの変更が発生することは少なくありません。その場合の操作もStripe Dashboardで行えます。

変更したい見積書の詳細ページで[...]ボタンをクリックし、[見積もりを改訂]をクリックしましょう。

![スクリーンショット 0004-02-07 18.49.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/fc2661e8-5c03-5e5b-c8a4-cbf28ffc9ad9.png)

改訂画面が表示されますので、変更したい情報を操作しましょう。

![スクリーンショット 0004-02-07 18.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8c233562-0da9-eef5-c3ef-5bea6ae0e7e8.png)

変更を確定させると、新しい見積書が作成されます。
サマリー画面に「改訂版として作成された」ことが記述されており、後から過去の見積もり内容を確認しやすくなっています。

![スクリーンショット 0004-02-07 18.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/16f97f63-e6b6-64b2-dfbb-eee968c4aacc.png)

### 改訂前の見積もりはキャンセルされる

改訂前の見積は、改訂版を確定させた時点で自動的にキャンセルされます。

![スクリーンショット 0004-02-07 18.52.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8c1b56ea-01ef-3cb3-79f0-e5c960c1dc56.png)

そのため、合意後に誤って古い見積もり内容で請求を行うなどのトラブルを防ぐことができます。

## 見積書を請求書にする

見積書のやりとりを行い、金額・内容が確定すれば、あとは請求書に変換するだけです。

見積書の詳細画面で、[請求書に変換]をクリックしましょう。

![スクリーンショット 0004-02-07 18.54.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2feac2ad-4828-4d21-b20e-a2aeb5fd58b3.png)

もし見積もり内容が定期課金プランの場合は、[サブスクリプションに変換]ボタンが表示されます。

![スクリーンショット 0004-02-07 18.55.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7ea92e0e-d9a1-1ad7-2d7d-62ca8483f784.png)

請求書への変換を行うと、あとは請求書やサブスクリプションの作成操作と同じ画面・フローが始まります。

![スクリーンショット 0004-02-07 18.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/656d67ab-0e39-1afa-5f62-d646b5174bbf.png)

![スクリーンショット 0004-02-07 18.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/92c694f0-3b2e-f405-5e2b-fe78095d92e6.png)

# APIで自動化も可能

Webサイトに掲載しているプランやフォームの入力内容に応じて見積書の発行・送付を自動化することもできます。

以下の例では、見積書作成依頼の操作が行われた場合に、Stripeに顧客データを作成し、見積書の作成と
PDFデータの取得を行なっています。

```javascript
function createAndSendQuotes(email, priceId) {
      const customer = await stripe.customers.create({
        email
      })
      const quote = await stripe.quotes.create({
        line_items: [{
          price: priceId,
          quantity: 1
        }],
        customer: customer.id
      })
      console.log(quote)
      await stripe.quotes.finalizeQuote(quote.id)
      const pdf = await stripe.quotes.pdf(quote.id)
      
      // Upload PDF to Amazon S3 or any other file storage

      // Send Email to customer with the uploaded PDF file address
}
```

PDFデータをAmazon S3などにアップロードし、一時リンクを取得してメール送信する仕組みにすることで、見積書の発行業務を自動化することができます。


# Invoicing Plus / Billing Scaleで利用可能

Stripe QuotesはInvoicing PlusまたはBilling Scaleの機能として提供しています。

そのため、一度きりの請求の場合はInvoicing Plus、定期課金の場合はBilling Scaleを有効化する必要があります。
そしてどちらも決済手数料に応じた追加料金が発生しますので、実運用の際は手数料にご注意ください。

- Invoicing Plus: 支払い済み請求書ごとに0.5% (通常は0.4%かつ25件まで毎月無料)
- Billing Scale: 全てのサブスクリプションに対して0.8% (通常は0.5%)

またどちらのプランについても、Quotes以外にも便利な機能がありますので、こちらもあわせてご検討ください。

https://stripe.com/jp/docs/billing/automatic-collection

https://stripe.com/jp/docs/quotes

https://stripe.com/partners/stripe-connector-for-netsuite


# [PR] Stripe開発者向け情報をQiitaにて配信中！
2021年12月よりQiitaにて、Stripe開発者のためのブログ記事更新を開始しました。

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

など、Stripeを利用してオンラインビジネスを始める方法について随時更新してまいります。

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