PAY.JP カード情報と紐づいた顧客の作成

Question

###前提・実現したいこと

学習用に作成しているWEBサービス（コピーサイト）にPAY.JPを利用して決済機能をつけようとしています。オリジナルがユーザー登録時にクレジットカード情報を登録する形式なので、本サービスも同じ仕様にしたいです。

しかし、カードトークンの生成はできるのですが、
payjp側の顧客と生成されたカードトークンが結び付けられずに困っています。

###発生している問題・エラーメッセージ

Railsで実装しようとするとセキュリティ周りのエラーが出る。
payjp.jsを利用するとカードトークンは作成できるが、顧客と結びつかない。

###該当のソースコード

必要があれば記載します。

###試したこと

####① railsのcreateメソッド内で作成してみる。

Railsで実装しようとすると下記のエラーが出ます。

エラー文：
Sending credit card numbers directly to the API is generally unsafe. Use Checkout or payjp.js.

参考：http://payjp-announce.hatenablog.com/entry/2017/11/10/182738http://payjp

####② エラー文に言われた通りpayjp.jsを利用し、実装してみる。

カードトークンの生成はできますが、顧客の作成ができませんでした。
payjp.jsでカードトークンを生成後、json形式でレスポンスが返ってきます。
その中のid情報を使って、railsからcreateすればカード情報の紐づいた顧客が作成できるのですが、
javascriptからrailsに渡し方がわかりませんでした。
（非同期で入手したデータはそもそも無理でしょうか）

####③先に顧客を作成し、後からカード情報を紐付ける。

クライアントがカード情報を入力する前のVIEWで空の顧客を作成し、
その顧客のIDを利用してカードトークンを作成すればできるのではと思ったのですが、
何を以ってそのID指定できるのか、、、となりました。

####④JavaScriptで顧客を作成する。
非同期に非同期を重ねるというのは、そもそもできるのでしょうか。
レスポンスで返ってきたjsonの中のidを使ってcreateできればできると思ったのですが、
payjp.jsの関数内で顧客登録もできるのでしょうか。

###補足情報（FW/ツールのバージョンなど）
初心者なので、スペック等どこまで記述すれば良いのかわからないのですが、
取り急ぎ下記の環境で作業しております。

macOS Mojave 10.14
Rails 5.1.6
ruby 2.3.1
rbenv 1.1.1
mysql 5.6.42

Answer 1

だいたいそうゆう認識で大丈夫です。ただカードに関しては実際はtoken IDを指定しますので、顧客objectを作成する時に指定する"card:xxxxx"はtoken IDになります。

require 'payjp'
Payjp.api_key = 'sk_xxxxxxxx'
Payjp::Customer.create(
  id: 'hogehoge', #ユニークな顧客id  
  card:'tok_xxxxxxx',   #checkoutからPOSTされたtoken ID 
  description: 'test'
)

token IDは顧客objectに直接紐付けますので、サーバ側に別途カードobjectを作成する必要はないです。

Comments

[kennyyasumura]

ご回答ありがとうございました！
スッキリしました！！

Answer 2

質問者さんがいくつか思い違いをしていますので、基本的な流れを下記に書きますので流れを把握してください。

---

1.tokenの取得

非通過によりサーバサイドでtoken取得は出来なくなりました。また、非通過とは関係ないですがシークレットキーでのtoken取得も出来ないようになっています。そのため、フロント(エンドユーザーに見える部分)でcheckoutを使用してtoken取得を行い、当該tokenをサーバ側にPOSTする必要があります。
なおcheckoutにはパブリックキーを使用してください。

2.顧客の作成

PAYJPの顧客objectの作成はシークレットキーを使用してサーバ側で行う必要があります。
checkoutはあくまでtoken取得のためだけのJSライブラリになります。
顧客とカード情報を結び付けたいのであれば、まずは顧客情報を入力できるフォームを用意して当該データをサーバ側にPOSTしてから、サーバ側でPAYJPのAPIを利用して作成する顧客objectと紐付けを考慮する必要があります。
このPAYJPの顧客object作成の時に1で取得したtokenを利用して紐付けをしてください。

---

流れ的に一般的なフォームで入力されたデータをサーバ側にPOSTして、そのデータを利用してサーバ側で処理することと違いはないかと思います。

Comments

[kennyyasumura]

ご回答いただきありがとうございます！
顧客は顧客で作成し、カードはカードで作成。
生成されたトークンのうち必要なデータを保存しておき、
それぞれのトークンIDで以って紐付けを行うという事でしょうか。

トンチンカンな事を言っていたら、すみません。。

require 'payjp'
Payjp.api_key = 'sk_test_XXXXX'
customer = Payjp::Customer.retrieve('cus_XXXXX')
customer.cards.create(
card: 'tok_XXXXX'
)