2023年11月14日火曜日

GAS でオンライン決済 PAY.JP を導入する

サービスに不可欠な決済。

現状、Web サービスへのオンライン決済導入というと、Stripe がダントツに強いそうですが、何かあった時には国内のサービスの方が安心な気もします（実際のところは分かりませんが）。

ということで、今回は、国産の PAY.JP によるオンライン決済（クレジットカードによる決済）のテスト導入を試してみました。

PAY.JP を運営している PAY 株式会社は、ネットショップ作成サービスを行っている BASE 株式会社の100%子会社みたいです。


最終的に、決済付きの Google フォームと連携した注文フォームをサーバーレスで運用できたらいいなと思っているので、実装には GAS（Google Apps Script）を使用しました。

-----
・追記（2023-11-24）

-----


以下、簡単な導入方法になります。

（決済に関するものですので、一応こうやると動くよという参考程度のものとしてください。ご利用の際は自己責任でお願いします）


① PAY.JP のアカウントを作成


まず、PAY.JP のアカウントを作成、「API設定」の「APIキーの情報」から「テスト秘密鍵」と「テスト公開鍵」をメモしておきます。


② GAS で「コード.gs」と「index.html」を作成


・「コード.gs」
const price = "3000";

function doGet(e) {
  const PUBLISH_KEY = "公開鍵";
  const html = HtmlService.createTemplateFromFile('index');
  
  html.price = price;
  html.PUBLISH_KEY = PUBLISH_KEY;

  return html.evaluate();
}

// PAY.JPでの決済処理
function doPost(e) {
  const card = e.parameter["payjp-token"];
  const SECRET_KEY = PropertiesService.getScriptProperties().getProperty("SECRET_KEY");

  let customer =  UrlFetchApp.fetch("https://api.pay.jp/v1/customers", {
    "method" : "post",
    "payload" : {
      "card": card
    },
    "headers": {'Authorization': "Basic " + Utilities.base64Encode(SECRET_KEY + ":")}
  });
  customer = JSON.parse(customer);

  UrlFetchApp.fetch("https://api.pay.jp/v1/charges", {
    "method" : "post",
    "payload" : {
      "amount": price,
      "currency": "JPY",
      "customer": customer.id
    },
    'headers' : {'Authorization': "Basic " + Utilities.base64Encode(SECRET_KEY + ":")}
  });

  return HtmlService.createHtmlOutput(price + "円の決済が完了しました。");
}
5行目の公開鍵は、先ほどメモした「テスト公開鍵」に書き換えてください。

「テスト秘密鍵」は、「プロジェクトの設定」の「スクリプト プロパティ」に保存してください。プロパティ名は「SECRET_KEY」としています。


・「index.html」
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <base target="_top">
    <title>PAY.JP Checkout Test</title>
  </head>
  <body>
    <p>PAY.JP 決済テスト</p>
    <form action="ウェブアプリのURL" method="post">
      <script src="https://checkout.pay.jp/" class="payjp-button" data-key=<?= PUBLISH_KEY?>></script>
    </form>
  </body>
</html>
10行目の「ウェブアプリのURL」は後ほど書き換えます。


③ ウェブアプリのデプロイ


GAS の「デプロイ」→「新しいデプロイ」から「種類の選択」で「ウェブアプリ」を選択。

・説明：任意
・ウェブアプリ / 次のユーザーとして実行：自分
・ウェブアプリ / アクセスできるユーザー：全員

として、「デプロイ」を実行。

表示されたウェブアプリのURLを index.html の10行目（action=）に入力。

「デプロイ」→「デプロイの管理」から編集で「新バージョン」を再度デプロイ。


これで、完成です。


＊＊＊

ウェブアプリのURLにアクセスして、動かしてみるとこんな感じになります。




うまくいっていれば、PAY.JP アカウントの売上データに反映されているはずです。

今回、エラーハンドリング等は省いて最低限の構成ですが、実際の運用ではもちろん必要になります。


By 時刻:
ラベル: