この度pay.jpの決済モジュールを本格的に導入してみたいと考えていたのですが、カード情報を入力するフォームをカスタマイズできず悩んでいます。

標準の入力フォーム(payjp.js V2)ではカード名義の入力欄が出てこないのですが、カード名義欄もありの状態で運用したいと考えています。

というのもネットを検索して見ると「カード名義の入力欄が無いのが怪しくて決済しなかった」「フィッシングサイトでは？」といった口コミなども出てくるので、やはり顧客の信頼の為にカード名義欄はあったほうが安心につながるのかな・・・と考えています。

pay.jpの情報を見ると、カード名義の入力フォームについてはpay.jp側からの提供が無いので自身で用意して組み込むように、ということのようです。

単純なHTMLやCSSであれば大丈夫なのですが、カード情報を取り扱うコードとなると私の力では書けず、斎藤様のお力をお借りできればと思っておりました。


github内で見つけたpay.jpのサンプルとして以下のフォームがありました。

https://payjp.github.io/sample/payjp-js/index.html

このフォームの見た目や入力欄はとてもすっきりしていて顧客側からも信頼しやすいデザインかと思ったのですが、このフォームをsoyshopのpay.jp支払いモジュールに組み込むことは可能でしょうか？

対応自体は可能です。
直近の対応は難しいので、来週以降で対応します

お手数をおかけして申し訳ありません。
ご対応頂けるのであれば、いつでもありがたいです。

重ね重ねいつもご対応をありがとうございます。

時間がありましたので仕様を確認してみました。

こちらは私の方で対応するのは難しいです。
既存のテンプレートに無理やり組んでみましたが、入力フォームがデザイン崩れを起こし、入力自体ができませんでした。

本件の対応を行うに当たって、カート用テンプレート一式が揃っていれば対応できます。
https://saitodev.co/soycms/soyshop/tutorial/86
https://saitodev.co/soycms/soyshop/tutorial/87
上記URLに記載されているカスタマイズ用のテンプレートすべて。

カスタマイズ用のテンプレートを作成するにあたって、
https://payjp.github.io/sample/payjp-js/index.html
のデザインをCart05Page.htmlに組み込んでデザイン崩れを起こさないようにお願いします。

Cart01PageからCart04Pageまではすべて動作する状態でお渡しください。

これらの条件が揃っていれば組み込めます。

ご回答をありがとうございます。

そのままサクッと使えるようなものではないのですね・・・。
検証していただいてありがとうございました。

できるかどうか分かりませんが、教えていただいたページを参照しつつ少しチャレンジして検討してみます。

ご対応ありがとうございました。

カード名義の入力フォームについてはpay.jp側からの提供が無いので自身で用意して組み込むよう

とありますが、既存のフォームに加えることから検討してみてください。
とりあえず、カード名義の入力フォームがあれば安心するのであれば、ダミーで入れてしまうのが手です。

CMSインストールディレクトリ/soyshop/webapp/src/module/plugins/payment_pay_jp/option/PayJpOptionPage.html

上記のパスのファイルで

<div>
	<button>支払う</button> 
	<a soy:id="back_link">戻る</a>
</div>

の箇所をHTML5の仕様を確認しながらrequired属性のinputタグを入れる等の改変してみたら実装できるかもしれません。

単純なHTMLやCSSであれば大丈夫なのですが、カード情報を取り扱うコードとなると私の力では書けず

APIは提供側が大体の処理を提供していて、出来ないという思い込みを捨て、提供側のコードを一つずつ検証しながら組み立てていくものです。

こちらで作成したコードでは、SOY Shopとの連携箇所がsoy:idの記述の部分で、SOY Shopの方でカード情報を取り扱うコードは作成していません。
OSSやAPIを利用する時はとりあえずコードを読んで見るという癖は付けておいた方が良いです。

コードを読むための参考として、下記のページを設けています。
https://saitodev.co/soycms/soy2/

＞とりあえず、カード名義の入力フォームがあれば安心するのであれば、ダミーで入れてしまうのが手です。

というのもまさしくその通りですね。

ひとまずはこの方法で対応しておき、APIについてもさらにいろいろと学びつつ、向上させていきたいと思います。

Soyshopがきっかけで、これまで全く分からなかったPHPやJavascriptも簡単なものであれば書けるようにはなってきたので、さらにステップアップするつもりで勉強＆トライしてみます。

教えていただいたページも参照させて頂きます。

有益なアドバイスをありがとうございました。