data-on-failed="onFailed"></script>この時、一つ目の引数にステータスコード、二つ目の引数にエラー内容が送られてきます。取得できません"}}表示言語を変更するPAY.JPのクレジットカード入力フォームは日本語と英語に対応しています。以下は英語に変更する例です。data-lang="en"></script>ボタンはもちろん、入力フォームのラベルもすべて英語になります。YAMADA」とデフォルト表示(プレースホルダー)されています。data-name-placeholder="名前を英語で入力してください"></script>このようにPAY.JPのクレジットカード入力フォームは細かなカスタマイズができます。皆さんのサービスに合わせて変更してください。DSS準拠に向けて、クレジットカード情報をいかに所持せずに決済処理を提供するかが必要になっています。)PAY.JPのチェックアウトボタンを付けるだけでクレジットカード番号をトークン化できますが、よりカスタマイズしたフォームで自社サイトと親和性高く提供したいと考える方も多いでしょう。そこで使えるのがpayjp.jsになります。Webブラウザ上でクレジットカード番号を入力してもらい、それをトークン化する流れをJavaScriptで提供する機能です。payjp.jsの準備payjp.jsは以下のJavaScriptコードを追加するだけで利用できます。次にクレジットカード番号を入力する項目を用意します。これはHTMLで直接記述します。この時、カード番号/有効期限(年および月)は必須です。処理としてはトークン作成処理になりますので、請求先住所やカード保有者といった情報も送信できます。id="card_token"></div>JavaScriptでの処理そしてボタンを押したタイミングなどでJavaScriptの処理を実行します。)くらいしか処理はいりません。サーバにクレジットカード情報を送信し、結果としてトークンなどの情報を受け取っているのが分かります。後はこのトークンをサーバに送信し、課金額と一緒に決済処理を行えば良いでしょう。使うことでクレジットカード入力画面の自由度は飛躍的に高まります。DSSへの対応も不要です。comment2017-12-01PAY.JPで発生したイベントをWebhookで受け取る機能紹介Webサービスというのは基本的にプル型です。クライアント側からアクセスしてはじめてデータを受け取ったり、逆に登録したりします。購入が発生した時や、何からのイベントが発生したときにそれをすぐに知りたいというニーズは強くあります。それを可能にするのがWebhookです。API利用者側の指定するURLにアクセスしてもらう仕組みです。簡単なシーケンス図は次のようになります。有名なところではGitHubのWebhookがあって、リポジトリへのコードプッシュがあったり、マージした時に通知を受け取れる仕組みがあります。Slackもチャットメッセージが来た時にWebhookで通知してもらえます。同様にPAY.JPでもWebhookが用意されていますので、取引が発生したり、定期課金が作成されたタイミングなどで通知を受け取れます。PAY.JP注意点として、Webhookを完全に信用するのは危険です。100%確実に届くとは言い切れません。Webhookを受け取るサーバが落ちているケースもあるでしょう。PAY.JPのWebhookでは400または500系エラーを受け取った際には3分間隔で3回までリトライしますが、それを超えると通知を行いませんので注意してください。APIを用いるのが良いでしょう。この記事ではそんなWebhookを実装するための方法を紹介します。サーバの準備WebhookはPAY.JPからあらかじめ指定したサーバを呼び出す仕組みです。サーバはインターネット上に公開されている必要があります。サービスとローカルのHTTPサーバがつながり、ローカルコンピュータをインターネット上に公開できる仕組みです(厳密には違いますが、ここでは簡略化しています)。昔はダイナミックDNSで同様の仕組みが提供されていましたが、もっと手軽に使える技術になります。リケーションフレームワークです。呼ばれるようになっています。コードは後で解説します。名前を変更してください。内容は最初、次のようになっているはずです。"YOUR_WEBHOOK_TOKEN"}これのテスト公開鍵、テスト秘密鍵をそれぞれ書き換えてください。"whook_4a...f8"}次にローカルコンピュータでサーバを立ち上げます。ngrokインストールしたら、以下のコマンドでローカルコンピュータにインターネット上からアクセスできるようになります。PAY.JPの管理画面にてWebhookするURLとして登録します。取引を行うではテストで決済を行ってみます。できるようになっています。100円支払うという表示とボタンが'確認できるはずです。ボタンを押すとPAY.JPのクレジットカード入力フォームが表示されます。テストのカード番号はこちらを参考にしてください。呼ばれて1000円の決済処理が行われます。決済処理が無事完了すると、次のような場面が表示されるでしょう。Webhookが呼ばれるそして少し待つとPAY.JPからWebhookが呼ばれます。ターミナルなどの画面に次のように表示されたら成功です。1000(jpy)Webhookの検証WebhookのURLには特にセキュリティがありません。外部から誰でも呼べてしまうアドレスになります。ヘッダーを確認してください。この内容はPAY.JPの管理画面で確認できますので、リクエストに踏まれるヘッダーと同じものであればPAY.JPからの正当なWebhookだと確認できます。イベントの種類なお、PAY.JPでは以下のイベントの際にWebhookを呼び出します。詳細はこちらで確認できます。それぞれにイベント種別(type)が設定されていますので、それを見て何のイベントであるかを知ることができます。PAY.JPから送られてきたデータを使って、チャットにメッセージを流したり、メールを送信するといった処理につなげるのも良いでしょう。前述の通り、100%の信頼性を前提にするのはお勧めしませんが、通知を使うことで業務の生産性をさらに高めることができるはずです。上げ確定させる機能紹介レストランやお店で商品を購入する場合、クレジットカードでの支払いはその場で確定します。内部的に見ると、次の2つの処理を同時に行っています。与信というのはお金を受け取れる保証と言えます。与信枠はクレジットカード会社が保証しており、その枠の範囲内であればオーソリが成功します。そのオーソリを売り上げ確定することでクレジットカード会社は店舗にお金を払ったり、カード保有者の口座からお金を引き落とします。このオーソリと支払い確定がずれる場合はどんな形があるかというと、例えば予約商品があります。Eコマースサイトの場合、多くは支払い確定を出荷ベースにしています。そのため、いざ商品を出荷するタイミングでクレジットカード決済がエラーになると非常に困ります。いって注文時に支払いを確定させてしまった場合、商品の入荷が1ヶ月以上先だと先にお金だけ引き落とされます。これは消費者にとってよくありません。他にもここ数年流行っているクラウドファンディングがあります。こちらは出資額が一定以上に達しないとプロジェクトが失敗します。賛同者が集まるまではあくまでも架空の決済状態(与信を確保した状態)でなければいけません。そこでどちらにも納得のいく仕組みとして、オーソリという形が存在します。オーソリで決済枠を確保できていれば、支払いを確定するタイミングを遅らせることができます。APIで実現する方法を紹介します。今回はRubyで行っています。SDKのインストールPAY.JPではRuby向けにSDKを提供しています。インストールはRubygemsでできます。payjp初期設定PAY.JPにてアカウントを作成すると、公開鍵と秘密鍵が得られます。この秘密鍵を使ってSDKを初期設定します。次に支払いデータを作成します。これはChargeクラスを使います。クレジットカード番号を直接扱うのはPAY.JPでは推奨されないため、クレジットカード番号をトークン化し、さらに顧客と結びつけてあることとします。そちらの実装についてはこちらの記事をご覧ください。しているのがポイントです。これによって支払い処理の確定はせず、オーソリのみを実行します。'jpy',)管理画面では次のように表示されます。この有効期限はデフォルトで7日、最長で60日となっています。期限を延長するもし有効期限が足りない場合、さらに延長できます。こちらもデフォルトで7日、最長で60日となっています。10)支払いをキャンセルするもし商品が出荷できなくなったり、クラウドファンディングで出資が集まらなかった場合は支払いデータをキャンセルしなければなりません。しないと枠をずっと確保し続けることになり、消費者のクレジットカード決済に影響が出てしまうでしょう。オプションを使うことで一部キャンセルも可能です。20)支払いを確定するそして支払いを確定する処理です。元の金額のまま確定することもできますが、金額を変更することもできます。オプションを指定します。20)これで支払いが確定し、店舗側は入金されることになります。このようなフローで与信を使った取引が実現できます。支払い確定であったり、逆にキャンセルは必要になったタイミングで早めに行うのが良いでしょう。キャンセルしないまま放置していると、枠を確保し続けてしまうのでクレジットカード決済が失敗する可能性が高まってしまいます。デビットカードやプリペイドカードでは、与信枠の確保のタイミングで引き落とし処理が発生いたしますので、購入者が利用する際の説明などに留意ください。Help以上、ビジネスフローによりますが、与信を使った決済を行う場合の参考にしてください。APIを使ってクレジットカード決済ができるサービスです。クレジットカード決済サービス多数のプログラミング言語(Ruby/Java/PHP/Python/Perl/Go/Swift/Node.js)などに対してSDKを提供しています。そんなPAY.JPのごくごく基本的なコードをRubyで書いてみます。インストールまずSDKをインストールします。コマンドまたはGemfileを使います。Licenseです)。しています)で読み込みます。'payjp'APIキーの取得PAY.JPでユーザ登録して、ダッシュボードに入ると設定の中にAPIキー情報があります。今回はデモなのでテスト秘密鍵を使います。'YOUR_API_KEY'初期化APIキーを使ってPayjpクラスを初期化します。api_keyカードトークンの取得ここで処理の流れを紹介します。PAY.JPではクレジットカード番号を一旦トークン化し、そのトークンを使って決済処理を行います。通常、このトークンはテンポラリトークン(一回しか使えない有効期限付きトークン)ですが、顧客と紐付けを行うことで繰り返し使えるようになります。このトークンの仕組みでは、クレジットカード番号自体、サービスサイト側で触らないようにするJavaScriptの仕組みを用意しております。トークンだけがサーバに送られるようになります。シーケンス図にすると次のようになります。本記事ではこちらを使った実装を紹介します。PAY.JPよりピックアップしています。CVC(セキュリティコード)や有効期限は適当です。公開鍵を指定してください。data-key="YOUR_PUBLIC_KEY"></script></form>そしてボタンを押すとクレジットカード番号を入力するモーダルウィンドウが表示されます。いう名前でテンポラリトークンが送信されます。続いてこの取得したトークンを使って決済処理を行います。これは簡単で、金額とトークンを渡すだけです。'jpy',)結果は次のように返ってきます。使うとダッシュボードで該当する取引を探せます。こんな感じでごく簡単に実装できます。Announcement)。これから実装される場合にはJavaScriptでトークンを生成する方法を採用いただくようご留意ください。IDを組み込む機能紹介PAY.JPはオンライン決済を提供しています。IDも提供しています。これはオンライン決済の他、リアル店舗や個人間決済でも使えます。ID決済を組み込めます。決済画面を表示するPAY.JPのCheckoutを使った場合、元々の決済フォームは次のようになっているかと思います。PAY.JPの管理画面で取得できる公開鍵です。</script></form>そのscriptタグに要素を一つ追加します。(取得方法はこれから説明します)。クライアントという項目があります。このOAuthクライアントを追加します。IDという項目が確認できます。これをHTMLフォームのYOUR_CLIENT_IDを書き換えてください。</script></form>これで準備完了です。PAY.JPでの処理そしてボタンを押すとモーダルでPAY.JPの決済フォームが表示されます。PAY.JPからテスト用のクレジットカード番号を選んでください。テストの場合、有効期限やCVC、名前は適当で問題ありません。ID決済が選択できるようになります。テストモードの場合はどんなメールアドレスとパスワードの組み合わせでもログインできます(ただしバリデーションは行われます)。ログインするとあからじめ一枚のクレジットカードと紐付いているのでそのまま決済ができます。処理が完了すると、フォームの送信イベントがすぐに呼ばれます。いう名前でPOSTされてきます。そのまま使うこともできますし、今後繰り返し使っていくのであれば顧客情報と結びつけることもできます。以下は顧客情報と結びつける場合です(Rubyの場合)。params['payjp-token'])レスポンスであるcustomer.idを自社のデータベースに保存しておきます。するとトークンが繰り返し使えるようになります。実際の決済処理は次のようになります。指定しているのが特徴です。'決済に関する説明')例えばECコマースのユーザ情報と結びつけることで、二度目以降はクレジットカード番号の入力を不要にできます。仕組みの違いはHTMLタグの要素追加だけなので、ユーザにとってはカード番号を入力しないで済むという利点が活かせます。PAY.JPでCheckoutを導入されている方はぜひ追加してみてください。