2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Stripe Payment Elementのフォームで国名欄を非表示にしたい

Last updated at Posted at 2022-01-19

Payment Elementを使うと、下の画像のように支払いフォームに国名を選択するドロップダウンが出てきます。

国内のみでサービス展開している事業者にとっては必要ないフィールドなので、ここを隠す方法がないか調べたのでメモとして残します。

PaymentElementオブジェクトを作るときに fields 属性を追加することで設定可能です。

index.js
  const paymentElement = elements.create('payment', {
    fields: {
      billingDetails: {
        address: {
          country: "never"
        }
      }
    }
  });

参照: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-country

出来ました。
が、この状態で決済しようとするとJS側でエラーになります。

Uncaught (in promise) IntegrationError: You specified "never" for fields.billing_details.address.country when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.address.country when calling stripe.confirmPayment or stripe.confirmSetup. If you opt out of collecting data via the payment Element using the fields option, the data must be passed at confirm-time.

どうやら、stripe.confirmPayment() を呼び出すときに国名を入れろ!とのことです。それもそうか笑

index.js
  // Confirm the card payment that was created server side:
  const {error} = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: "https://xxxxxxxx/return",
+     payment_method_data: {
+       billing_details: {
+         address: {
+           country: "JP"
+         }
+       }
+     }
    }
  });

confirmPaymentのオプションで国名を指定したら無事決済できました。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?