Stripe React PaymentElement 未显示关联帐户

Question

我正在尝试根据此处的文档创建自定义 Stripe Checkout。 (Web/React/Node)https://stripe.com/docs/payments/quickstart

根据文档，我成功创建了 paymentIntent 并收费。

问题是当我将连接的帐户添加到条带实例时，<PaymentElement> 拒绝显示。我可以在 Stripe 仪表板上确认确实在关联账户中为存在于所述关联账户中的正确客户成功创建了支付意向，我成功传回了支付意向 ID，但该元素不会显示。就像健全性检查一样，当我删除连接的帐户时，它会按预期工作。

我正在关注这里 https://stripe.com/docs/connect/enable-payment-acceptance-guide?elements-or-checkout=elements&html-or-react=react 如何添加连接的帐户。

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_NTv6FvtshDhM7cWcoiIvFk1w', {
  stripeAccount: '{{CONNECTED_STRIPE_ACCOUNT_ID}}'
});

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

这是我的实现

import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "./CheckoutForm";

export default function Checkout({
  stripeAccount,
  amount,
  firstName,
  lastName,
  email,
}) {

// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
// This is your test publishable API key.
const stripePromise = loadStripe(
  "pk_test_1234",
  stripeAccount
);

  const [clientSecret, setClientSecret] = useState("");

  useEffect(async () => {
    // Create PaymentIntent as soon as the page loads
    fetch("http://localhost:3000/api/app/createPaymentIntent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        stripeAccount,
        amount,
        firstName,
        lastName,
        email,
      }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

  const appearance = {
    theme: "stripe",
    labels: "floating",
    variables: {
      fontLineHeight: "50px",
      borderStyle: "solid",
      borderWidth: "2px",
      borderColor: "#efefef",
      backgroundColor: "#000",
      boxShadow: "0px 16px 32px 0px rgb(0 0 0 / 6%)",
      borderRadius: "30px",
      padding: "0 25px",
      marginBottom: "20px",
    },
  };

  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="Checkout">
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  );
}

//节点

 // Create a PaymentIntent with the order amount and currency
          const paymentIntent = await stripe.paymentIntents.create(
            {
              customer: stripeCustomer.id,
              amount: amount * 100,
              currency: "usd",
              automatic_payment_methods: {
                enabled: true,
              },
            },
            {
               stripeAccount,
            }
          );

//node 注意：如果我像下面这样注释掉连接的帐户，那么它就可以正常工作。

  // Create a PaymentIntent with the order amount and currency
          const paymentIntent = await stripe.paymentIntents.create(
            {
            //   customer: stripeCustomer.id,
              amount: amount * 100,
              currency: "usd",
              automatic_payment_methods: {
                enabled: true,
              },
            },
            // {
            //   stripeAccount,
            // }
          );

Answer 1

看起来您没有将 options prop 传递给 <Elements /> 供应商组件（它需要来自您的付款意向的 client_secret）。

function App() {
  return (
    <Elements stripe={stripePromise} options={{ clientSecret: 'pi_xxx_secret_yyy' }}>
      <CheckoutForm />
    </Elements>
  );
};

Answer 2

感谢您分享额外的背景信息。看来您没有正确初始化 Stripe.js，特别是在尝试传递 stripeAccount parameter:

时

const stripePromise = loadStripe("pk_test_1234", {
  stripeAccount
});

参见here。

Stripe React PaymentElement 未显示关联帐户

Stripe React PaymentElement not showing for connected accounts

javascript

node.js

reactjs

react-hooks

stripe-payments