反応ストライプ要素にカスタムフィールド（電話番号など）を追加

Question

react-stripe-elementsを使用して電話番号のようなカスタムフィールドを作成する方法については、ドキュメントでかなり失われています。 <CardElement>コンポーネントを使用してカード情報を収集する簡単な例を得ましたが、トークン化されるデータに電話番号の別の入力を追加する方法はわかりません。

ビルトインフィールドのカード情報を持つトークンを受け取った後、そのトークンとトークン化されていない電話番号をサーバーに渡すことはできますが、すべてのデータをストライプ化する必要があります可能であれば一緒に

This examples pageには、電話番号を収集するフォームがいくつか表示されていますが、ソースコードではスタイリングの設定方法がほとんどのようですが、反応ストライプ要素を使用していないため、私はそれが好きなように。

編集：私は返されるトークンを見ると、phoneは単にサポートされていないことが表示されますname、adress_line1などのサポートされている他のパラメータを提供するために、独自のコンポーネントを実装言及自分のページなどにthis github issueを見つけました私はちょうどトークン化されていない形式でサーバーにその情報を送信する必要があります。それが完了する必要がある方法なら、私はそれで完全にうまくいきます。ちょうど私が正しいアプローチでそれについて話していることを確かめたかったのです。

Answer 1

documentationに少し深く見た後、それはがsourceのownerプロパティ、customerのshippingプロパティに電話番号を属性、およびorderのshippingプロパティ

Answer 2

ことができますように思えます独自の入力を使用することもできます。トークンを要求する前に、追加データを追加してください。たとえば、私のフォームでは、カード上に顧客名の入力を別にしています。あなたはここにAPIリファレンスにトークンを渡すことができますどのようなデータについての詳細を調べることができます

onSubmit = (e) => { 

e.preventDefault() 
    const form = e.target 
    const data = // your method for getting data from the form 

    stripe.createToken({ name: data.card_name }) 
    .then(({ token }) => { 
     // do things with token 
    }) 
    } 
} 

：https://stripe.com/docs/stripe-js/reference#stripe-create-token

他の非標準フィールドを追加するには、同様に、同じ方法でソースを作成することができます：https://stripe.com/docs/stripe-js/reference#stripe-create-sourceあなたの編集パー

stripe.createSource(element, sourceData)