Блог

Я создал приложение и серверную часть, и у меня возникли проблемы на последнем этапе подтверждения успешной транзакции. В частности, свойство price платежа не передается. Похоже, что product.price можно определить во внешнем коде, не уверен, почему он неправильно передается на серверную часть.

Спасибо за всю вашу помощь!

Сообщение об ошибке: ошибка типа: не удается прочитать свойство ‘price’ неопределенного

Мое приложение с кодом платежа:

 import React, { useState } from 'react';
import './styles.scss';
import StripeCheckout from "react-stripe-checkout"

function Subscribe() { 

const[product, setProduct] = useState({
  name: "Ezcema Guru Services",
  price: 30,
  productBy: "EzcemaGuru"
});

const makePayment = token => {
  const middle = {
    token,
    product
  };
  const top = {
    "Content-Type": "application/json"
  };

  return fetch(`http://localhost:8282/payment`, {
    method: "POST",
    top,
    middle: JSON.stringify(middle)
  })
    .then(response => {
      console.log("RESPONSE ", response)
      const { status } = response;
      console.log("STATUS ", status)
    })
    .catch(error => console.log(error));
  

};



    return(
       
       <div>
        <h1>
          Subscription Page
        </h1>
        <StripeCheckout 
        stripeKey="pk_test_51HdglCIiJoZbD0sLYY2Yw8uryaImmNp8RURTyWZUXtv2D3ONtkIrVxtF6E5wnbtEeEJFoZm411ZglYSQRA25RDvU00Sbs3f1Ug"
        token={makePayment}
        name="Ezcema Insider"
        amount={product.price * 100}>
        </StripeCheckout>
      </div>
    )
  }
  


export default Subscribe;
  

Мой серверный код:

 const cors = require("cors");
const express = require("express");
const stripe = require("stripe")("sk_test_51HdglCIiJoZbD0sLTvXHKuQ8ovCcxM1cXxS2NTmEajZWa1F6p7XkEDbht82uaMWbIXh4tPMB5RbMLD7EpHprdty300nwUOAD2t")
const { v4: uuidv4 } = require('uuid');
const { resolve } = require("path");

const app = express();


//middleware 
app.use(express.json())
app.use(cors());



//routes
app.get("/", (req, res) => {
    res.send("IT WORKS")
});

app.post("/payment", (req, res) => {

    const {product, token} = req.body; 
    console.log("PRODUCT ", product);
    console.log("PRICE ", product.price);
    const idempontencyKey = uuid()

    return stripe.customers.create({
        email: token.email,
        source: token.id
    }).then(customer=> {
        stripe.charges.create({
            amount: product.price * 100,
            currency: 'usd',
            customer: customer.id,
            receipt_email: token.email,
            description: `purchase of ${product.name}`,
        }, {idempontencyKey})
        })
        .then(result => res. status(200).json(result))
        .catch(err => console.log(err) )
    })



//listen

app.listen(8282, () => console.log("LISTENING AT PORT 8282"));
  

Вы передаете неизвестные параметры в fetch API, top параметра or нет middle : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Я думаю, вы, вероятно, хотели использовать headers and body вместо:

 return fetch(`http://localhost:8282/payment`, {
  method: "POST",
  headers: top,
  body: JSON.stringify(middle)
})