Stripe.js and Elements / Stripe.js と要素

「決済」及び「開発」関連用語集

カテゴリー: 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の細かいラッパーで、内部の状態とコンポーネントのライフサイクルを管理する

週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 YouTube | 動画サービス(課金販売できるプラットフォーム) 7
2 その他エントリー(Stripe) カテゴリー 4
2 EMVレベル1 / EMVレベル2 / EMVCo とは? 4
2 Off-session Payments with Payment Intents / Payment Intents を使用したオフセッション支払 4
3 支払い 3
3 クレジットカード決済 | 課金 3
3 QA(Stripe) カテゴリー 3
3 Stripe Q15。PaymentIntent でエラー。カード番号に不備があります。 | QA(Stripe) 3
4 EMVCo | クレジットカード仕様(仕様) 2
4 Stripe Q16。PaymentIntentの支払いで郵便番号入力を求められる。Radar rules の ZIP code を無効にしているのに | QA(Stripe) 2
4 Stripe エラー(Stripe) カテゴリー 2
4 資金決済に関する法律(資金決済法)とは?/(1)前払式支払手段 /(2)資金移動業 2
4 プリペイドカード | カード 2
4 Stripe Q60. Checkout\SessionオブジェクトとPaymentIntentオブジェクトの関係性は1対1ですか? | QA(Stripe) 2
4 QRコード決済 | 課金 2
4 Stripe Q48。「Checkout\Session - server」「Charge」「PaymentIntent」の使い分け方 | QA(Stripe) 2
4 振込 | 送金 2
5 Stripe Q11。テストAPIで、実際のカード番号を入力したらどうなりますか? | QA(Stripe) 1
5 Vプリカとは?/ 特徴 1
5 ICクレジットカード | クレジットカード仕様(仕様) 1
2024/3/29 1:01 更新
指定期間人気ページランキング / 2020-5-28 → 2024-3-28
順位 ページタイトル抜粋 アクセス数
1 Stripeアカウントへログインする際、モバイル端末で受信したコード入力を求められる理由は? | その他エントリー(Stripe) 2006
2 EMVCo | クレジットカード仕様(仕様) 1252
3 Stripe Q13。決済成功時に、「請求に紐づけられたメールアドレス」に対して、メール送信したいのですが、 | QA(Stripe) 938
4 Stripe Q16。PaymentIntentの支払いで郵便番号入力を求められる。Radar rules の ZIP code を無効にしているのに | QA(Stripe) 898
5 Twitch | ゲーム実況配信サービス(課金販売できるプラットフォーム) 876
6 クレジットカード決済 | 課金 875
7 決済用語 853
8 Stripe Q50。 Connect 「Standardアカウント」で、自身に連結された子アカウントを、ダッシュボードから削除するには? | QA(Stripe) 822
9 Omise | 「支払」機能を有する決済系サービス(決済サービス) 762
10 Stripe Q1。Stripeにおける個人事業主の定義 | QA(Stripe) 755
11 Stripe Q31。ダッシュボードでの「支払い作成」の見方について | QA(Stripe) 736
12 pixivFANBOX | クリエイター支援プラットフォーム(課金販売できるプラットフォーム) 733
13 EMVレベル1 / EMVレベル2 / EMVCo とは? 710
14 YouTube | 動画サービス(課金販売できるプラットフォーム) 646
15 プリペイドカード | カード 636
16 EPUB | ファイルフォーマット(電子書籍) 585
17 サブスクリプション | 課金 563
18 Stripeで"No such token: src"と表示されたら、最初にAPIキーを確認する | Stripe エラー(Stripe) 542
19 Stripe Q74.「お客様のビジネスの詳細」とは何ですか? | Stripe 536
20 ファンティア | クリエイター支援プラットフォーム(課金販売できるプラットフォーム) 482
2024/3/29 1:01 更新