Bancontact payment with Stripe and CommerceJS

Question

I'm currently working on a e-commerce website. For that I use nextJS,commerceJS and Stripe. I have now a working payment with card. I also want to add bancontact payment method. I don't have any idea on how to do it. I couldn't find something about it on the internet.

Here is what I have for card payment:

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>
  );
};

On the stripe documentation page I found something about paymentIntents. Wouldn't this be a correct way to do it?

Answer 1

Your code above uses Stripe's CardElement, which can only be used to accept card payments. You should use the PaymentElement to accept Bancontact, cards, and any other payment methods you wish to support: https://stripe.com/docs/payments/payment-element