web-dev-qa-db-ja.com

Stripe Checkoutのポップアップフォームにカスタムフィールドを追加する方法

ストライプチェックアウトフォームに姓、名、カスタムボタン付きのチェックボックスなどのカスタムフィールドを追加するにはどうすればよいですか？これまでのところこれを思いついた。

<script src="https://checkout.stripe.com/checkout.js"></script>

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_i2txBI2jUjSQIMoqFz3Fo326"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-name="Matt's Widgets and Gizmos"
    data-description="2 widgets ($20.00)"
    data-amount="2000"
    data-billingAddress="true"
    data-shippingAddress="true">
  </script>
</form>

そして、Stripe Checkoutには以下のカスタム値のみを含めることができることがわかりました。

stripeBillingName: 
stripeBillingAddressLine1: 
stripeBillingAddressApt:
stripeBillingAddressZip: 
stripeBillingAddressCity: 
stripeBillingAddressState: 
stripeBillingAddressCountry: 
stripeBillingAddressCountryCode:

これを回避する方法はありますか？教えてくださいありがとう

javascripthtmlstripe-payments
17
Ahmad

残念ながら、ストライプチェックアウトを微調整してカスタムフィールドまたはチェックボックスを追加する方法はありません。ここでの解決策は Custom Checkout を使用し、それらの追加フィールドを独自のフォームに追加することです。たとえば、顧客の名前を収集し、独自の利用規約に同意して、支払いボタンのクリックのみを許可するように顧客に依頼します。

次に、顧客がCheckoutにカードの詳細を入力し、Stripeがトークンを返送すると、トークンをサーバーに送信し、エンドで収集した追加の詳細も一緒に送信します。

14
koopajah

Stripeは stripe.js メソッドと非推奨のチェックアウトモーダルメソッドの使用を推奨しています（新しい Stripe Checkout と混同しないでください）。

そのために、カスタムフィールド（名前、パッケージタイプ、カスタムタグなど）を追加するために、次のコードを追加してstripe.js関数stripeTokenHandler（）を微調整することがわかりました。

var customInput = document.createElement('input');
customInput.setAttribute('type', 'hidden');
customInput.setAttribute('name', 'customInput');
customInput.setAttribute('value', $("input[name=customInput]:checked").val());
form.appendChild(customInput);

したがって、「customInput」というラジオボタングループがある場合、選択されたラジオボタンの値が「customInput」$ _ POSTフィールドにアタッチされます。このようにして、ターゲットスクリプトはそれを取得して使用できます。

これが誰かを助けることを願っています。

0
Chris Simmons

clientReferenceIdとして渡すことにより、自分のファイルを追加してみることができます。 =>extrauserid :: option2 :: option2しかし、残念ながら、これはpayment_intent.succeededで取得できず、SKUがない場合と同じです。

clientReferenceId string

Checkoutセッションを参照する一意の文字列。これは、顧客ID、カートIDなどにできます。これはcheckout.session.completed Webhookに含まれており、購入を完了するために使用できます。

var data = {
    customerEmail: eml,
    successUrl: 'https://...',
    cancelUrl: 'https://...',
    clientReferenceId: user + '::' + option1,
    items: [{  
       sku: sku, 
       quantity: 1
    }],
}
stripe.redirectToCheckout(data);

checkout.session.completed

"cancel_url": "https://....",
"client_reference_id": "user123::somevalue",
"customer": "cus_H1vFYbxY2XMAz6",
0
user956584