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

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

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

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

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

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

-----

・追記（2023-11-24）

Google フォームで決済機能付き注文フォームを実現する

-----

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

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

① 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」は後ほど書き換えます。