Stripe Tax使用時、Apple Pay・Google Payを表示する方法

この記事は、JP_Stripes Advent Calendar 2022 7 日目の記事です。

とあるプロジェクトで Stripe を使った月額サービスアプリを作りましたが、開発時 Apple 　 Pay と Google Pay(以下電子決済と呼ぶ)が表示されない現象がありました。

本来は以下のように表示されます。

電子決済は基本自動で有効化になっているため、Stripe ダッシュボード上の設定不足はありませんでした。

原因

色々調査した結果、Checkout URL を生成する際の設定が原因だと判明しました。

以下は Checkout 作成時のコードです。

const { url } = await stripe.checkout.sessions.create({
  customer: "STRIPE_CUSTOMER_ID",
  customer_update: {
    address: "auto",
  },
  automatic_tax: {
    enabled: true,
  },
  line_items: [
    {
      price: "STRIPE_PRICE_ID",
      quantity: 1,
    },
  ],
  mode: "subscription",
  payment_method_types: ["card"],
  success_url: "SUCCESS_URL",
  cancel_url: "CANCEL_URL",
});

問題の箇所はautomatic_taxで、最近アップデートで追加された Stripe の税金自動計算設定で実装しておりました。

おそらく Stripe の公式 FAQ サイトにも記載されてるように、住所の入力フォームをオフにしているため表示されなかったのだと推測してます。

https://stripe.com/docs/tax/faq#stripe-tax-で-apple-pay-と-google-pay-を利用できますか？

便利な機能だったので自動設定を採用したかったのですが、住所入力フォームを追加するだけで解約率が下がると予想したため今回は別の解決策にしました。

解決方法

自動ではなく、手動で作ることで解決しました。

旧式のやり方で、Stripe の税金設定で、パーセンテージ、国を設定すると以下のようにtax_idが発行されます。

const { url } = await stripe.checkout.sessions.create({
  customer: "STRIPE_CUSTOMER_ID",
  line_items: [
    {
      price: "STRIPE_PRICE_ID",
      quantity: 1,
      tax_rates: ["STRIPE_TAX_ID"],
    },
  ],
  mode: "subscription",
  payment_method_types: ["card"],
  success_url: "SUCCESS_URL",
  cancel_url: "CANCEL_URL",
});

先程のtax_idをline_items内のtax_rates内に配列形式で渡せば完了です。

これで問題なく表示されました。

本当は自動で設定したかったのですが、解決策がわからなかったので知見をお持ちの方がおられましたらぜひコメントの方にお願いします。