Stripeでクレジットカード決済時のカード番号の最後4桁の取得について

Question

前提・実現したいこと

https://stripe.com/docs/stripe-js/elements/quickstart
ここ↑を参照して、決済画面を作っています。

入力画面→確認画面遷移して、入力カードの最後4桁を画面に表示したいです。

    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

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

stripeのAPIからカード番号を返さないので、どうすればカードの最後4桁を取得して、画面にしますか？

試したこと

JSにStripe Elementの入力値をなかなか取得できませんでした
（入力のカード下4桁を取得して、確認画面に表示する）

Answer 1

stripeのAPIからカード番号を返さないので、どうすればカードの最後4桁を取得して、画面にしますか？

カード番号そのものを返すAPIは存在しませんが、カードの最後4桁を取得するAPIは存在します。
それがCardオブジェクトのlast4です。
https://stripe.com/docs/api/cards/object#card_object-last4

Comments

[wangzj]

ご回答ありがとうございます。
backendはすでにStripe APIを呼び出して、情報を取得しています。
ここでは、入力→確認で、JSで取得したいです。
多分、無理ですかね

[xenbeat]

> JSで取得したい
この方法は無理ですが

> backendはすでにStripe APIを呼び出して、情報を取得しています
ここで取得してviewに渡せば良いだけのことです。

[wangzj]

丁寧に教えていただいて、ありがとうございます。
入力→確認で、backendを経由したくないので、大丈夫です。
JSで無理なら、あきらめます。

[xenbeat]

> 入力→確認で、backendを経由したくないので

???
elementsでトークン化してbackendにそれを渡しているのですよね？？

[xenbeat]

どこまで実装されているのかわかりませんが、今一度全体の実装フローを確認してください。
以下Step 4でサーバー（backend）を経由することになるので、「backendを経由したくない」というのは、カードの最後4桁を表示する以前に、Stripeを使いたくないと言っているようなものです。
https://stripe.com/docs/stripe-js/elements/quickstart#submit-token

[wangzj]

入力画面はStripeを使っているので、こっちはbackendが必要ないです。
①入力（Stripe）＞②Stripe token取得＞③確認画面表示＞④backend＞⑤完了
①～③でカード下4桁を取得できないようです。

[xenbeat]

> ③確認画面表示
SPAで実装されているのですか？
①〜③は一切backendを経由していないということでしょうか。

[wangzj]

そうですね

Answer 2

なかなか取得できませんでした

これがどういう意味を指すか分からないんですが、結局「時間や労力はかかったけどできた」ように捉えられますがどうなのでしょうか。

いずれにしてもAPIがカード番号を返さないのはセキュリティ的な観点から当然と言えば当然です。
また、画面にわざわざカード番号を一部でも表示させるメリットってないと思うので、
利用しているAPIの仕組み上、返ってこないのであれば表示させないという選択肢しかないと思います。

Comments

[wangzj]

ご回答ありがとうございます。
本文に補足しました。（入力のカード下4桁を取得して、確認画面に表示する）
他のサイトも確認画面で入力のカード下4桁を表示しているので、私も表示させようと思いますが、なかなか下4桁を取得できませんでした

[m.ts10806]

それはStripe利用しているサイトなのでしょうか、別の仕組みを利用しているものなのでしょうか。
実装の形態が提示内容だけでは分からないので一概に言えませんが、入力は外部でしているか、自サイトで入力したものをAPIに認証させているか、で違います。
自サイトで入力されているのであれば、OKだった場合に下4桁だけ切り出して表示させれば良いだけの話ですし、そうでなく、入力もすべて外部サイトに任せているのでしたら返ってくる情報が全てなのでそこに含まれないなら無理です。

[wangzj]

入力は外部でしています。Stripeのサンプルコードです。
多分、無理ですね。

[m.ts10806]

結局認証自体は入力時点で行われる作りにされているようですが、それだとちょっとおかしい気がします。
認証してしまうと支払いまでいってしまいませんか？
大体は確認画面から送信後に認証を行うものと思いますが。

[wangzj]

①入力（Stripe）＞②Stripe token取得＞③確認画面表示＞④backend＞⑤完了
こういう流れで実装しました。
ここまで、支払はないです。
token idをもらって、支払は今後、いつかのタイミングで実行する予定です。

Answer 3

Stripe提供物をそのまま使うなら、カード番号を取得できません。
裏でStripe APIを改めて呼び出さないといけません。
どうしても、下4桁を表示しないいけない場合、自力で入力～確認画面を作って、BACKでStripe APIを叩くということになります。