Please Help! Payments with Stripe server 400 error

Support
,
1

Hello everyone! First post :slight_smile:

My Netlify site is https://vb-react.netlify.app/

I have followed this tutorial https://www.freecodecamp.org/news/serverless-online-payments/
but I can not get the serverless function to connect to Stripe

this is my netlify.toml

[build]
  command = "react-scripts build"
  functions = "netlify/functions"
  publish = "."

[[redirects]]
  from = '/api/*'
  to = '/.netlify/functions/:splat'
  status = 200

[[redirects]]
  from = '/bio'
  to = '/home'
  status = 200

[[redirects]]
  from = '/bio'
  to = '/home'
  status = 200

this my checkout (where I believe the problem is)

import React from "react";
import Stripe from "stripe";
import styled from "styled-components";

const stripe = Stripe(
  "pk_test_51HqgwdGKpDMhyEuL11A63hDc42CNdjZbMH93xDPIumVyYlgGe5byVF9rXhgW0rs64r0uaDjQUqlwOUDXrbTZy9nx00cyCIwiBm"
);

const callApi = () => {
  fetch("/api/stripe", {
    method: "POST",
  })
    .then((response) => response.json())
    .then((response) => console.log(response))

    .then((session) => {
      return stripe.redirectToCheckout({ sessionId: session.id });
    })
    .then((result) => {
      if (result.err) {
        alert(result.err.message);
      }
    })
    .catch((err) => {
      console.error("Error:", err);
    });
};

const Checkout = () => {
  return (
    <div>
      <form action="/create-checkout-session" method="POST">
        <ChkButton type="submit" onClick={callApi}>
          Checkout
        </ChkButton>
      </form>
    </div>
  );
};

const ChkButton = styled.button`
  background-color: #fff;
  color: #333;
  padding: 10px 16px;
  border-radius: 1.2rem;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 110;
  border: 0.2rem solid #333;
`;

export default Checkout;


I have been going in circles for days. Any help would be much appreciated
2

Relates to:

3

Yes, sorry I ddi not include it but I have a functions file too

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

exports.handler = async (event, context) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: "gbp",
          product_data: {
            id: "price_1LxHk4GKpDMhyEuL53Xfr9oB",
            name: "Prunus serrulata 'Kanzan'",
          },
          price: 60,
        },
        quantity: 1,
      },
      {
        price_data: {
          currency: "gbp",
          product_data: {
            id: "price_1LxHiBGKpDMhyEuLOkox92AU",
            name: "Cupressus x leylandii",
          },
          price: 90,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://vb-react.netlify.app/success",
    cancel_url: "https://vb-react.netlify.app/cancel",
  });

  return {
    statusCode: 200,
    body: JSON.stringify({
      id: session.id,
    }),
  };
};
4

Hi @victorB , I checked your Function logs on your site and it does look like there are some errors shown there. Specifically, I’m seeing this:

Nov 29, 08:36:07 AM: 1525a00d ERROR  Invoke Error 	{"errorType":"Error","errorMessage":"Received unknown parameter: line_items[0][price_data]

There are additional details in your Function log in the Netlify UI if you’d like to take a look and debug further, so let us know if that helps you narrow down the possible cause of your issue.

5

I will have a look thanks!