Stripe Payments > COLLECTING PAYMENT DETAILS / 支払い詳細の収集 > Stripe.js and Elements

Stripedocumentation

目次一覧

 状態:-  閲覧数:467  投稿日:2019-02-27  更新日:2019-04-11  
Stripe.js and Elements / Stripe.js と要素
Card Element Quickstart / カード要素のクイックスタート

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

 閲覧数:124 投稿日:2019-02-27 更新日:2019-04-12 

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

Card Element Quickstart / カード要素のクイックスタート

 閲覧数:130 投稿日:2019-02-28 更新日:2019-04-12 

docs


Payments > Collecting payment details > Stripe.js and Elementst > Quickstart
Card Element Quickstart
カード要素のクイックスタート
・事前に構築されたUIコンポーネントであるElementsを使用して、カードの機密情報を安全に収集する

「Stripeによる支払処理」は、(処理単位として)2つに分別可能


1.「顧客が入力した支払方法の詳細」を安全に収集する
2.「収集した支払方法」を charge request で使用

・あなたは「機密のカードデータ」を扱う必要なしに安全に、「あなたの顧客のカード情報を集める支払いフォーム」を作成するため、事前構築されたUIコンポーネントであるStripe Elementsを利用することができる
・「カード詳細」はその後、代表的なトークンに変換される
・このトークンは、あなた(販売者側)のサーバーへ、安全に送信できる

4つのステップ


Elementsを使用してカスタム支払いフォームを作成するには、4つのステップが必要
・1.ストライプ要素を設定する
・2.支払いフォームを作成する
・3.カード情報を安全に送信するためのトークンを作成する
・4.トークンと残りのフォームをサーバーに送信する

1.ストライプ要素を設定する


ElementsはStripe.jsの一部として利用できる
・ 始めるには、このスクリプトをあなたのページに含めてくれ - それは常にhttps://js.stripe.comから直接ロードされるべきである
<script src="https://js.stripe.com/v3/"></script>

Stripeの高度な詐欺防止機能を最大限に活用するには?
・チェックアウトページだけでなく、サイトのすべてのページにこのスクリプトを含める
・すべてのページにスクリプトを含めることで、Stripeは、ユーザーがWebサイトを閲覧したときに「詐欺を示す可能性がある異常な動作」を検出できる

次に、Elementsのインスタンスを作成する
const stripe = Stripe('pk_test_〇〇');
const elements = stripe.elements();


2.支払いフォームを作成する


顧客からカードの詳細を安全に収集するために
・ElementsはStripeがホストするUIコンポーネントを作成する
・直接作成するのではなく、あなたの支払いフォームに配置される

これらのコンポーネントを挿入する場所を決定するには
・支払いフォーム内に一意のIDを持つ空のDOM要素(コンテナ)を作成する
・コンテナを<label>内または<label>横に、Elementコンテナの一意のidと一致するfor属性を付けて配置することをお勧めする
・そうすることによって、顧客が対応するラベルをクリックしたときに要素が自動的にフォーカスを得る

例:
<form action="/charge" method="post" id="payment-form">
 <div class="form-row">
   <label for="card-element">
     Credit or debit card
   </label>
   <div id="card-element">
     <!-- A Stripe Element will be inserted here. -->
   </div>

   <!-- Used to display Element errors. -->
   <div id="card-errors" role="alert"></div>
 </div>

 <button>Submit Payment</button>
</form>


・上記のフォームがロードされたら、Elementのインスタンスを作成し、それを上記で作成されたElementコンテナにマウントする
// Custom styling can be passed to options when creating an Element.
const style = {
 base: {
   // Add your base input styles here. For example:
   fontSize: '16px',
   color: "#32325d",
 },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');


・card要素は、フォームを単純化し、「すべて必要なカード詳細を、安全に収集する単一の柔軟な入力フィールド」を挿入することによって、必要なフィールドの数を最小限に抑える
・サポートされている Element型の全リストについては、 Stripe.jsのリファレンスドキュメントを参照してください。

・Elementsは、入力されたとおりにユーザー入力を検証する
・あなたの顧客が間違わないよう、あなたはcard要素のchangeイベントに耳を傾けそしてあらゆるエラーを表示するべきである:
card.addEventListener('change', ({error}) => {
 const displayError = document.getElementById('card-errors');
 if (error) {
   displayError.textContent = error.message;
 } else {
   displayError.textContent = '';
 }
});


3.カード情報を安全に送信するためのトークンを作成する


・Elementsを使用して収集された「支払い詳細」は、その後トークンに変換できる
・フォーム上のsubmitイベントを処理するイベントハンドラを作成する
・ハンドラーはフィールドをトークン化のためにStripeに送信し、フォームの送信を防ぐ(フォームは次のステップでJavaScriptによって送信される)
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
 event.preventDefault();

 const {token, error} = await stripe.createToken(card);

 if (error) {
   // Inform the customer that there was an error.
   const errorElement = document.getElementById('card-errors');
   errorElement.textContent = error.message;
 } else {
   // Send the token to your server.
   stripeTokenHandler(token);
 }
});


createTokenを呼び出して、それにcard要素を渡す
・この関数は、この例では使用されていない、顧客から収集された追加の支払い情報を含むオプションの2番目のパラメーターも受け入れる
・この関数はresultオブジェクトで解決されるPromiseを返す
・このオブジェクトは以下のいずれかを持つ
result.token : トークンは正常に作成された
result.error :エラーがあった。 これにはクライアントサイドの検証エラーが含まれる。 考えられるすべてのエラーについては、 APIリファレンスを参照してくれ

ストライプは、保存時にカード情報を検証する。 このプロセスの結果として、顧客は彼らの明細書に1ドルの一時的な承認を見るかもしれない。 これは、将来の請求が成功することを保証するものではない(例えば、カードに十分な資金がなくなった、紛失または盗難にあった、またはアカウントが閉鎖された場合など)。 このプロセスには、任意のチェックや、Stripe: Radarによる従来の銀行チェック(CVCや郵便番号など)も含まれ、実行された可能性がある

4.トークンと残りのフォームをサーバーに送信する


最後のステップ
・収集した追加情報とともにトークンをサーバーに送信することである
const stripeTokenHandler = (token) => {
 // Insert the token ID into the form so it gets submitted to the server
 const form = document.getElementById('payment-form');
 const hiddenInput = document.createElement('input');
 hiddenInput.setAttribute('type', 'hidden');
 hiddenInput.setAttribute('name', 'stripeToken');
 hiddenInput.setAttribute('value', token.id);
 form.appendChild(hiddenInput);

 // Submit the form
 form.submit();
}


Viewport メタタグが必要


すべてのデバイスで優れたユーザーエクスペリエンスを提供するには
・ページのviewport widthをdevice-widthに設定する必要がある
・これはviewportメタタグで行われる
・他にもいくつかのビューポート設定があり、必要に応じて設定できる
・設定のどこかにwidth=device-widthを含めるようにしてくれ

・例えば、次のものはElementsで動作する
<meta name="viewport" content="width=device-width, initial-scale=1" />
・あなたのページにすでにこのタグがあり、それにwidth=device-width含まれていれば、すべて設定済みである
width=device-widthを設定せずにElementsを使用しても機能するが、とにかく追加することを強くお勧めする。 特に、 handleCardPaymentを使用する場合は、 3D Secureによる追加認証を提供するため、モーダルオーバーレイを表示する必要がある場合がある。 このビューポート設定がないと、モーダルが開かれている間、モバイルユーザーに良い経験を保証することはできない



Stripe Payments > COLLECTING PAYMENT DETAILS / 支払い詳細の収集 > Checkout Reference

Stripe Billing > Quickstart / クイックスタート

コメント投稿(ログインが必要)



類似度ページランキング
順位 ページタイトル抜粋
1 Stripe Payments > COLLECTING PAYMENT DETAILS / 支払い詳細の収集 > Checkout Reference 45
2 Stripe Payments > COLLECTING PAYMENT DETAILS > Checkout 39
3 Stripe Payments > CHARGES / 料金 35
4 Stripe Payments > SOURCES / ソース 32
5 Stripe Payments > PREPARING FOR SCA > Payment Intents 32
6 Stripe Payments > PREPARING FOR SCA > SCA Migration Overview / SCAの移行の概要 32
7 Stripe Q16。PaymentIntentの支払いで郵便番号入力を求められる。Radar rules の ZIP code を無効にしているのに 26
8 Stripe Payments > Quickstart / クイックスタート 25
9 Stripe Q35。「Payment Intents API」で、3Dセキュアなどの認証手順を(顧客が)使用しないことは出来ますか? 24
10 Stripe Q19。「PaymentIntents」と「Sourceオブジェクト」と「Sources API」の関係について 24
11 Stripe Q33。CustomerオブジェクトのcreateSourceメソッドのAPIドキュメントについて 24
12 Stripe Q60. Checkout\SessionオブジェクトとPaymentIntentオブジェクトの関係性は1対1ですか? 23
13 Stripe Q48。「Checkout\Session - server」「Charge」「PaymentIntent」の使い分け方 23
14 Stripe Q37。PaymentIntentで支払いを行った後、成功画面を表示させるためにはどうすれば良いですか? 23
15 Stripe Q46。Direct Charges で手数料聴取する場合、'payment_intent_data'の「有り」「無し」の違いは? 22
16 Payment Intents API 22
17 Payment Request API 22
18 Visa Global Security Summits 22
19 Stripe Billing > Quickstart / クイックスタート 22
20 Purchase Fulfillment 22
2021/11/27 11:13 更新
週間人気ページランキング / 11-20 → 11-26
順位 ページタイトル抜粋 アクセス数
1 Stripeアカウントへログインする際、モバイル端末で受信したコード入力を求められる理由は? | その他エントリー(Stripe) 17
2 機能一覧表 / Q.アカウント複数作成 / Stripeアカウント登録 11
3 EMVCo | クレジットカード仕様(仕様) 9
3 Stripe Q16。PaymentIntentの支払いで郵便番号入力を求められる。Radar rules の ZIP code を無効にしているのに | QA(Stripe) 9
4 Stripe Q31。ダッシュボードでの「支払い作成」の見方について | QA(Stripe) 8
4 Stripe Q50。 Connect 「Standardアカウント」で、自身に連結された子アカウントを、ダッシュボードから削除するには? | QA(Stripe) 8
5 クレジットカード決済代行サービス | 決済(Webサービスビジネス) 7
6 ふわっち | ライブ配信サービス(課金販売できるプラットフォーム) 6
6 Stripe Q11。テストAPIで、実際のカード番号を入力したらどうなりますか? | QA(Stripe) 6
6 Stripe Connect Customアカウント の検討 | Stripe 6
6 Payment Intents Usage Guide / Payment Intents 使用ガイド 6
7 Stripe Q13。決済成功時に、「請求に紐づけられたメールアドレス」に対して、メール送信したいのですが、 | QA(Stripe) 5
8 資金決済に関する法律(資金決済法)とは?/(1)前払式支払手段 /(2)資金移動業 4
9 Stripe Q47。Charge::create の 'receipt_email' について | QA(Stripe) 3
9 PAY.JP アカウント登録後の自動返信メール / PAY.JP Platform / PAY.JP Platform 用語の整理 3
9 Stripe Q48。「Checkout\Session - server」「Charge」「PaymentIntent」の使い分け方 | QA(Stripe) 3
9 Stripe Q55.Checkout\Session::createする際の、'client_reference_id'パラメータと'payment_intent_data.metadata'パラメータの違いについて | QA(Stripe) 3
9 Stripe エラー(Stripe) カテゴリー 3
9 Stripe Q52.Checkout\Sessionで1回限りの決済終了した際、添付メール自動送信することはできますか? | QA(Stripe) 3
9 「払い戻し」と「チャージバック」の違い | 違い 3
2021/11/27 1:01 更新