#yen6305

1 messages · Page 1 of 1 (latest)

frail oxideBOT
normal merlin
#

Hello! What does your code calling stripe.elements() look like?

ionic vale
#

I am using Next.js

frail oxideBOT
normal merlin
#

I need to specifically see your Elements provider

#

I don't think you included that

ionic vale
#

Oh, oops! Here the Elements provider:

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

export default function Checkout() {
    const [clientSecret, setClientSecret] = React.useState("");

    const [cart, setCart ] = useContext(CartContext);
    const [cartKeyAvailable, setCartKeyAvailable] = React.useState(false);

    const [isFetchingPaymentIntent, setIsFetchingPaymentIntent] = React.useState(false);
    const [hasFetchedPaymentIntent, setHasFetchedPaymentIntent] = React.useState(false);

     const appearance = {
        theme: 'stripe',
      };

      const options = {
        // clientSecret,
        appearance,
      };

    return (
        <Layout>
            <Container>
                <Elements options={options} stripe={stripePromise}>
                    <CheckoutContainer />
                </Elements>
            </Container>
        </Layout>
    )
}
normal merlin
#

That's your issue right there - like the error say you need to specify a mode

ionic vale
#

Ah thankyou a lot, I also have to pass an amount. Do you know why I have to do that? Because the amount has already been calculated in my payment-intent file, so I am wondering why u should also pass the amount in the options.

#

payment-intent code:

// // This is your test secret API key.
import axios from 'axios'; // Import Axios

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

const fetchCartData = async (cartKey) => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_WP_API_URL}/wp-json/cocart/v2/cart?cart_key=${cartKey}`
      );
  
      return response.data;
    } catch (error) {
      throw new Error("Error fetching cart data: " + error.message);
    }
 };

  export default async function handler(req, res) {
    const { cartKey } = req.body;

    if (!cartKey) {
        throw new Error("Cart key is missing.");
    }

     // Fetch the cart data using the CoCart Lite API
    const cartData = await fetchCartData(cartKey);

    console.log(cartData);

     // Calculate the total amount based on line items in the cart data (items is seen as a line item)
    // Line item is an item that has been placed in a cart. In this case only the SSG - Striking Strings Glissando is in the cart with a quantity.
    const totalAmount = cartData.items.reduce((accumulator, item) => {
        const quantity = item.quantity.value;
        const price = parseFloat(item.price);

        return accumulator + quantity * price;
      }, 0);

    const paymentIntent = await stripe.paymentIntents.create({
      amount: totalAmount,
      currency: "eur",
    //   payment_method_types: ['card', 'ideal'],
    //   capture_method: 'manual',
      automatic_payment_methods: {
        enabled: true,
      },
    });
  
    res.send({
      clientSecret: paymentIntent.client_secret,
      paymentIntentId: paymentIntent.id,
    });
  };
normal merlin
#

We need the amount client-side so we now which payment method types to display (we filter some out because some of them have amount-specific restrictions)

#

and we also need it for things like google pay/apple pay that show the amount in their UIs

ionic vale
#

Ahh okay!! Thanks for the explanation