GASでStripe決済をゼロから爆速で実装

[![Stripe&GAS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/0494464e-3288-56ba-cd7c-d94a94991f57.jpeg)](https://youtu.be/oNNvwa4u9zI)


# はじめに

[Stripe](https://dashboard.stripe.com/test/dashboard)という決済プラットフォームをGASで使えたら、スプレッドシートをデータベースにしたり、メールアドレスの入力を無くしたり、全部無料でできるから良いな〜と思ったので、実験しました。

YouTubeでの解説：https://youtu.be/oNNvwa4u9zI

# API キーの発行

テスト環境にチェックを入れて、開発者のボタンを押し、左側の「API キー」からAPIの発行ができます。

![スクリーンショット 2021-10-21 18.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/ad129e89-cbfc-5ed9-e58c-4e720aa59742.png)

# スプレッドシートの準備

[空のスプレッドシート](https://spreadsheet.new)を開き、1行目にそれぞれ
- A列に「メールアドレス」
- B列に「金額」
- C列に「日付」
としておきます。

そうしたら、ツールからスクリプトエディタを開きます。
![スクリーンショット 2021-10-21 22.23.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/f376b1ee-10c4-75fe-d52d-5ea022d2a453.png)


# GASの中身

```***公開可能キー***``` と ```***シークレットキー***``` の2つのキーを使います。
下記のコードの該当箇所に書き換えてご使用ください。

今回は ```コード.gs``` と ```index.html``` の2つのファイルを使います。

![スクリーンショット 2021-10-21 22.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/73be7bbe-39f8-552c-69ae-aa1bb8225a22.png)

### コード.gs

```js:コード.gs
const SHEET = SpreadsheetApp.getActiveSheet()
const PRICE = '2000'

function doGet(e) {
  const STRIPE_PUBLISH_KEY = "***公開可能キー***"
  const html = HtmlService.createTemplateFromFile('index')
  html.price = PRICE
  html.url = ScriptApp.getService().getUrl()
  html.email = Session.getActiveUser().getEmail()
  html.STRIPE_PUBLISH_KEY = STRIPE_PUBLISH_KEY
  return html.evaluate()
}

// Stripeでの決済処理
function doPost(e) {

  const STRIPE_SECRET_KEY = "***シークレットキー***"
  const stripeToken = e.parameter.stripeToken
  const stripeEmail = e.parameter.stripeEmail
  const UserData = findUser(stripeEmail)
  let htmlOutput = ''

  if (typeof UserData === "undefined") {
    UrlFetchApp.fetch("https://api.stripe.com/v1/charges", {
      'method' : 'post',
      'payload' : {
        'amount': PRICE,
        'currency': "JPY",
        'description': "テストです",
        'source': stripeToken
      },
      'headers' : {'Authorization' : " Basic " + Utilities.base64Encode(STRIPE_SECRET_KEY + ':')}
    })
    // スプレッドシートにデータを保存
    SHEET.appendRow([stripeEmail, PRICE, Utilities.formatDate(new Date(), "JST", "yyyy/MM/dd HH:mm:ss")])
    htmlOutput = `${stripeEmail} での購入が完了しました。`
  } else {
    htmlOutput = `購入に失敗しました。${stripeEmail} では ${UserData} に既に購入済みです。`
  }
  
  return HtmlService.createHtmlOutput(htmlOutput)

}

// ユーザー検索
function findUser(uid) {
  return getUserData().reduce(function(uuid, row) { return uuid || (row.key === uid && row.value) }, false) || undefined
}

// ユーザー情報取得
function getUserData() {
  const data = SHEET.getDataRange().getValues()
  return data.map(function(row) { return {key: row[0], value: row[2]} })
}

```

### index.html

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <base target="_top">
    <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
    <title>Stripe Checkout Test</title>
  </head>
  <body>
    <p>ようこそ！ <?= email?></p>
    <form action="<?= url ?>" method="POST">
    <script
      src = "https://checkout.stripe.com/checkout.js"
      class = "stripe-button"
      data-key = "<?= STRIPE_PUBLISH_KEY?>"
      data-amount = "<?= PRICE?>"
      data-email = "<?= email?>"
      data-currency = "JPY"
      data-name = "決済テスト"
      data-description = "テストです"
      data-image = "https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale = "ja"
      data-zip-code = "true">
    </script>
    </form>
  </body>
</html>

```

# デプロイ

コピペが完了したら、右上の「デプロイ」というボタンがあります。
![スクリーンショット 2021-10-21 22.30.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/40efca53-0679-3838-0d50-05f818ce81c0.png)

「新しいデプロイ」から⚙（歯車マーク）を押し、下記の設定でデプロイをします。
- 説明：任意に名前を入力
- ウェブアプリ（次のユーザーとして実行）：自分
- ウェブアプリ（アクセスできるユーザー）：全員

デプロイして発行されたウェブアプリのURLを開き、下記のボタンが押せる画面が立ち上がります。

![スクリーンショット 2021-10-21 22.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/64b5a813-39dc-5748-86a1-f5efa2685d59.png)

通常モードでは、メールアドレスが既に入力されています。
シークレットモードやGoogleでログインされていないブラウザでは、自分でメールアドレスを入力する必要があります。
テストモードでは、クレジットカード番号「4242 4242 4242 4242」で決済することができます。

![スクリーンショット 2021-10-21 22.29.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/23782520-d9b0-275b-ea31-81c778e7f499.png)

スプレッドシートに記入されれば、成功です。
あとは、[Stripeのダッシュボード](https://dashboard.stripe.com/test/dashboard)に戻り、テスト環境から本番環境に変えて、もう一度```***公開可能キー***``` と ```***シークレットキー***``` の2つのAPIキーを本番環境で発行すれば、実際に誰でも決済することができます。

念のため、二重決済対応はしておきました。
使用するにあたり、大変恐縮ですが、今回は決済機能なので、法律とかの問題や不都合が起きたりしても、自己責任でお願いします。

# 参考資料

[Google Formsで請求する仕組みを考える](https://qiita.com/soundTricker/items/ec0ab308cdfa2493d3ea)
[GASでStripeのAPIを使用して、顧客を取得する](https://specially198.com/get-customers-using-stripe-api-with-gas/)