Stripe Connect 嵌入式入门弹出窗口被阻止

Question

我一直在遵循使用 Stripe Connect 设置 Onboarding 的教程 https://docs.stripe.com/connect/onboarding/quickstart#init-stripe

我已完成所有设置，并且包含“添加信息”按钮的 iFrame 显示在页面上，但是一旦我单击它，我会收到一个控制台错误，内容如下：

AccountOnboarding.tsx:133 Uncaught (in promise) SubmerchantAuthError: Popup is blocked by browser.
    at SubmerchantAuthenticationContext.tsx:436:18
    at new Promise (<anonymous>)
    at SubmerchantAuthenticationContext.tsx:431:14
    at SubmerchantAuthenticationContext.tsx:452:14
    at async SubmerchantAuthenticationContext.tsx:580:17

即便如此，弹出窗口确实会打开，但仅显示加载指示器。

我深入研究了代码，似乎出现了这个问题，因为来自 Stripe 连接库中的

window.open

的调用返回 null。我知道当不是由用户直接发起时，这可能是

window.open

的问题，但我没有看到其他人在 Stripe 和 React 中遇到这个问题。

这是我的代码..也许我正在做一些微妙的错误，即使我遵循了教程：

const createAccountSession = async (accountId: string) => {
  const { data } = await api.post("/payments/sessions", { account: accountId })
  return data
}

const useCreateAccountSession = () => useMutation({
  mutationFn: (accountId: string) => createAccountSession(accountId)
})

const useStripeConnect = (accountId: string) => {
  const { mutate, data, isPending, isError, isSuccess } = useCreateAccountSession()
  const [stripeConnectInstance, setStripeConnectInstance] = useState<StripeConnectInstance>()

  useEffect(() => {
    if (data) {
      setStripeConnectInstance(
        loadConnectAndInitialize({
          publishableKey: import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY,
          fetchClientSecret: () => data.clientSecret,
          appearance: {
            overlays: "dialog",
            variables: {
              colorPrimary: "#635BFF",
            },
          },
        })
      );
    } else {
      mutate(accountId)
    }
  }, [data])

  return stripeConnectInstance;
};

const OnboardSeller = ({ accountId }: OnboardSellerProps) => {

  const stripeConnectInstance = useStripeConnect(accountId)
  const [onboardingExited, setOnboardingExited] = useState(false)

  return (
    <>
      {stripeConnectInstance && (
        <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
          <ConnectAccountOnboarding
            onExit={() => setOnboardingExited(true)}
          />
        </ConnectComponentsProvider>
      )}
    </>
  )
}

Answer 1

错误消息表明您的浏览器阻止了弹出窗口。您可以启用弹出窗口并重试吗？