PAY.JPは無料で簡単に導入できる開発者向けのオンライン決済サービスです。PAYJPの利点はAPIリファレンスが全て日本語で読めること、オーソリの期間が長いこと、例えばstripeは7日〜30日(*)ですがpayjpは60日です。決済手数料がお安いのも魅力です(2022年08月18日現在)
手数料の比較はこちらを参照ください。

それではPAY.JP-pluginについて見ていきたいと思います。
まずこのページではSTEP1としてPAYJPアカウントを作成してpluginをインストール、簡単なアクションを実行してユーザーを登録するところまでを行います。次のSTEP2ではカードを作成して実際に決済処理を実行していきます。
STEP1
PAJPアカウントを作成しよう
プラグインを設定しよう
ユーザーを作ろう
PAYJPアカウントを作成しよう
まずはPAYJPにアクセスし「申し込む」から新規登録を行います。

マイページにログインできたら、メニューの「API」をクリックしてください。

秘密鍵と公開鍵が表示されます。後で必要になりますのでコピーしておきます。

プラグインを設定しよう
pluginタブから「PAY.JP-plugin」をインストールすると下のようなフィールドが現れます。ここで先ほどPAJPから得た秘密鍵、公開鍵を設定します。まず「Username」に秘密鍵、「pk」に公開鍵を設定します。
上二つの項目が本番用、下の二つの項目がテスト用です。

ユーザーを作ろう
秘密鍵、公開鍵の設定が終わったらようやくプラグインを実行していきます。
まず、bubbleの「DBタブ」をクリックして「User」テーブルにフィールドを追加します。ここでは「payjp_id」とします。

「Userテーブル」にbubbleのユーザーを一人作っておきます。

次にbubbleの「Designタブ」をクリックして画面で適当なボタンを配置します。ここでは「ユーザーを登録する」ボタンを配置しました。「Start/Edit Workflow」からワークフローの画面に移ります。

bubbleワークフローの画面で、「ユーザーを登録する」ボタンにアクションを設定します。「Click here to add an action 」で「plugin」→「API PayJP Call add customer」を選択します。

同じくbubbleワークフローの画面で、Step2にアクションを追加します。「Data」→「Make changes to thing...」を選択します。「Thing to change」に「Current User」。変更するフィールドは先ほど上で追加した「payjp_id」です。「payjp_id」の値は「Result of step1」→「body id」です。理屈はともかく、一旦これで動作を確認します。

それでは「Run as→」から実行しましょう。

「ユーザーを登録する」ボタンをクリックします。画面上は何も実行されないように見えますが「Step by Step」で確認すると処理の流れを追うことができます。

では「DBタブ」から「User」テーブルを確認してください。
フィールド「payjp_id」の値に「cus_」から始まる文字列が入っています。
先ほどワークフローでAPIを実行した後に「Result of step1」から「body id」を選択しましたが、その時の値です。APIを実行してPAYJPにユーザーを登録したことで、PAYJPから一意なIDが割り振られたのです。

PAYJP管理画面からも確認しましょう。メニューから「顧客」を選択すると「cus_」から始まる文字列が入っています。

DBに入っている「payjp_id」の値と同じ「cus_」から始まる文字列が表示されているはずです。これでwebサイトからPAPJPに接続しユーザーを登録することができました。
カード情報欄が「カード未登録」になっています。次回はカードを登録し、商品を購入するところまでをみていきたいと思います。
*stripeは日本円での決済の場合 Visa、Mastercard の場合 30 日以内、American Express の場合は 7 日以内
ノーコード開発ならシースリーレーヴへお任せください!

シースリーレーヴでは「地球上で最も顧客の成功を実現する企業」をモットーに開発だけでなく、企画からデザイン・開発、リリース後のマーケティングやサポートまでWebサービスやアプリの受託開発に関する相談、開発を承っております。
お客様は、リリースが終わりではなく、そこからがスタート!
サービスを通して、お客様、そしてユーザーが本当に成し遂げたい事を実現するお手伝いをさせて頂きます。
弊社はノーコード開発・システム開発もできる弊社だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。
どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します!
実際に開発してみたいけれど、予算は?こんなサービスを作りたいけどノーコードでできるのか?最短でどれくらい?どんな小さなことでも、ぜひお気軽にご相談下さい。
技術スタッフがご相談させて頂きます!
ノーコード開発に関するお役立ち資料も無料でダウンロードできますのでぜひご参照ください。
最後まで読んでいただき、ありがとうございました!