Bancontact 付款与 Stripe 和 CommerceJS

Question

我目前在电子商务网站上工作。为此，我使用 nextJS、commerceJS 和 Stripe。我现在可以用卡付款。我还想添加 bancontact 付款方式。我不知道该怎么做。我在互联网上找不到相关信息。

这是我的卡支付方式：

import { loadStripe } from "@stripe/stripe-js";
import {
  Elements,
  CardElement,
  ElementsConsumer,
} from "@stripe/react-stripe-js";
import { Stripe, StripeElements } from "@stripe/stripe-js/types/stripe-js";
import { useCheckout } from "@/context/checkout";
import commerce from "@/lib/commerce";

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string
);

interface PaymentSectionProps {}

export const PaymentSection: React.FC<PaymentSectionProps> = ({}) => {
  const { token, shippingData, handleCaptureCheckout, order } = useCheckout();

  const handleSubmit = async (
    event: React.FormEvent<HTMLFormElement>,
    elements: StripeElements | null,
    stripe: Stripe | null
  ) => {
    event.preventDefault();

    if (!stripe || !elements) return;

    const cardElement = elements.getElement(CardElement);

    //@ts-ignore
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: cardElement,
    });

    if (error) {
      console.error("error", error);
    } else {
      console.log(token);
      if (shippingData && token) {
        console.log("Here");

        const orderData = {
          line_items: token.line_items,
          customer: {
            firstname: shippingData.customer.firstname,
            lastname: shippingData.customer.lastname,
            email: shippingData.customer.email,
          },
          shipping: {
            name: shippingData.shipping.name,
            street: shippingData.shipping.street,
            town_city: shippingData.shipping.town_city,
            county_state: shippingData.shipping.county_state,
            postal_zip_code: shippingData.shipping.postal_zip_code,
            country: shippingData.shipping.country,
          },
          fulfillment: { shipping_method: "fadfda" },
          payment: {
            gateway: "stripe",
            stripe: {
              payment_method_id: paymentMethod.id,
            },
          },
        };

        handleCaptureCheckout(token.id, orderData);
        console.log(order);
      }
    }
  };

  return (
    <section className="w-full h-screen flex justify-center items-center">
      <Elements stripe={stripePromise}>
        <ElementsConsumer>
          {({ elements, stripe }) => (
            <form
              onSubmit={(e) => handleSubmit(e, elements, stripe)}
              className="w-full"
            >
              <CardElement />
              <br /> <br />
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <button type="submit" disabled={!stripe} color="primary">
                  Pay
                </button>
              </div>
            </form>
          )}
        </ElementsConsumer>
      </Elements>
    </section>
  );
};

在 stripe 文档页面上，我找到了一些关于 paymentIntents 的内容。这不是正确的做法吗？