const を使用して接続されているアカウントの Stripe_account_id を追加すると CORS エラーが発生する

概要

Stripe 支払いリクエストボタンを設定しました。ストライプアカウント「acct_XXX…」を手動で追加すると、すべてが機能し、接続されているアカウントのダッシュボード上で支払いが成功します。

しかし、これをpayment_request_buttons.jsのconstに入れようとすると、次のようになります。

const stripe_account_id = document.getElementById('stripe_account_id').value;

const stripe = Stripe('pk_test_XXX...'), {
  apiVersion: "2022-11-15",
  stripeAccount: stripe_account_id,
});

隠された入力:

<input id="stripe_account_id" type="hidden" value="<%= "'#{@user.stripe_account_id}'" %>">

次の CORS エラーが発生します。

No 'Access-Control-Allow-Origin' header is present

const を使用する場合と比べて、手動でアカウントを入力する場合の違いがわかりません。

コンソールのストライプリンクからこのエラーに遭遇しました。

{
"error": {
"message": "You did not provide an API key. You need to 
provide your API key in the Authorization header, using 
Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). 
See https://stripe.com/docs/api#authentication for details, 
or we can help at https://support.stripe.com/.",
"type": "invalid_request_error"
 }
}

解決策

このエラーは解決しました。

ストライプアカウントを手動で渡す場合は、中にアカウント番号を含むアポストロフィ「」を使用しますが、ストライプへの投稿データを見ると、それらが削除されていることがわかります。

_stripe_account: acct_xxx...........

したがって、私のRubyコードでは、値にアポストロフィを追加していました。結果は次のとおりです。

value="<%= "'#{@user.stripe_account_id}'" %>">

_stripe_account: 'acct_xxx...........'

送信されるとエラーが発生します。

アポストロフィを除いた私の更新された Ruby コード:

value="<%= @user.stripe_account_id %>">

このデータは、「ネットワーク」>「wallet-config」>「ペイロード」>「フォームデータ」で見つかりました。

これで CORS エラーが解決され、機能するようになりました。