カテゴリー:
Stripe
閲覧数:289 配信日:2019-02-27 11:45
docs
Payments > Collecting payment details > Stripe.js and Elements
・Stripe.js and Elements
・Stripe.jsと要素
・Web用の最新の安全な支払いフローを構築する
Stripe.jsとは?
JavaScriptライブラリ
・支払いフローを構築するための基本的なJavaScriptライブラリ
・使用すると、ユーザーから機密情報を収集し、そのデータをあなた(販売者側)のサーバーへ安全に送信するための代表的なトークンを作成できる
・カスタマイズ可能なUI要素を使用して機密性の高い支払い情報を収集できる
・ Stripe.jsは、Apple Pay、Google Pay、Payment Request API のための単一のインターフェースも提供する
Stripe.jsを使用すると
・機密情報をトークン化し、 Checkoutと統合し、 3D Secure認証を処理することもできる
・すべての機密情報はStripe.jsによって処理されるため、SAQ Aレポート(自己問診によるPCI DSS準拠支援)に準拠した簡単なPCI準拠を特徴としている
※PCIコンプライアンスとして、SAQ A(自己問診によるPCI DSS準拠支援)方式を採用している
Stripe.jsを使用すると、次のようなさまざまな形式の機密情報を簡単に操作できる
・カード情報
・銀行口座の詳細
・個人を特定できる情報(PII)
・ソースを介した多種多様な支払い方法
注意事項
・独自の支払いフォームを作成したくない場合は、埋め込み形式の最適化された支払いツールCheckoutを検討してくれ
・独自の支払いフォームを作成したくない場合は、「1回限りの購入」と「subscriptions」の支払いを受け取るための「StripeがホストするページであるCheckout」を検討してくれ
Stripe要素
予め構築されたUIコンポーネント
・チェックアウトフローを構築するための構築済みUIコンポーネントセット
・Stripe.jsの機能として利用できる
・Elementsは、ユーザーから情報を収集するための入力やボタンなどの既製のUIコンポーネントを提供する
・Stripe.jsはあなた(販売者側)のサーバーに触れることなくエレメント内の機密情報をトークン化する
Elements には、次のような機能がある
・入力されたとおりにカード情報を自動的にフォーマットする
・プレースホルダを顧客の希望する言語に翻訳する
・顧客の画面またはモバイルデバイスの幅に合わせたレスポンシブデザイン
・チェックアウトフローの外観に合わせてカスタマイズ可能なスタイル
カード要素を使用すると、1つの要素内のすべてのカード情報を収集できる
・動的に更新されるカードのブランドアイコンと、番号、有効期限、CVC、および郵便番号の入力が含まれている
開始するには
・カード要素のクイックスタートを参照してくれ
支払い要求ボタンを使用すると?
・顧客はApple Pay 、 Google Pay 、Chromeカード、およびMicrosoft Payを使ってチェックアウトできる
・Apple Pay対応のブラウザを使用している場合、顧客には左下にボタンが表示される
・Payment Request APIをサポートするブラウザを使用している場合は、右下にボタンが表示される
IBAN要素を使用すると、顧客の銀行口座の詳細を収集できる
・Stripe Q12。IBAN要素を使用すると、日本でも顧客の銀行口座の詳細を取得できますか?
Elements の例
Elements は完全にカスタマイズ可能
・サイトの外観に合わせて要素をスタイル設定して、顧客にシームレスなチェックアウト体験を提供できる
・例えば要素にフォーカスがあるときなど、さまざまな入力状態をスタイルすることもできる
Elementsの使い方の例をいくつか見るには?
・GitHubにあるオープンソースの例とそれに付随するソースコードを調べてくれ
支払いを処理するためにElementsをバックエンドへ組み込む方法を示すend-to-end の例
・このデモアプリケーションをチェックし、GitHubでそのソースコードを参照してくれ
・このサンプルストアは、支払い要求、Apple Pay、Google Pay、およびその他の支払い方法をサポートしているカード支払いを受け入れる
・Card ElementとPayment Request Buttonの両方を実装したサンプルのeコマースストア
Reactで「Stripe.js and Elements」を使う
Reactと一緒にStripe.jsとElementsを使用したい場合
・GitHubで公開されているオープンソースのreact-stripe-elementsプロジェクトを使用してくれ
・このプロジェクトはStripe.jsとElementsの細かいラッパーで、内部の状態とコンポーネントのライフサイクルを管理する