Использование Stripe Checkout в React и Express js - PullRequest
Новая
       15

Использование Stripe Checkout в React и Express js

0 голосов
/ 13 марта 2020

Я пытаюсь настроить Stripe Checkout в своем приложении реакции, где, если пользователь нажимает кнопку, он направляет их на страницу оформления Stripe через Stripe Checkout. На внешнем интерфейсе он требует идентификатора сеанса, и я полагаю, чтобы получить этот идентификатор с моего сервера nodejs / express. Я все еще новичок на nodejs и мне нужна помощь, чтобы правильно настроить его, чтобы я мог создать маршрут, который отправляет правильный ответ на идентификатор сеанса. Кроме того, эта настройка предназначена для ежемесячных подписок

Сервер. js

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const path = require("path");
const stripe = require("stripe")("sk_test_**********************");

if (process.env.NODE_ENV !== "production") require("dotenv").config();

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client/build")));

  app.get("*", function(req, res) {
    res.sendFile(path.join(__dirname, "client/build", "index.html"));
  });
}

app.post("/charge", (req, res) => {
  (async () => {
    const session = await stripe.checkout.sessions.create({
      payment_method_type: ["card"],
      subscription_data: {
        items: [
          {
            plan: "plan_***********"
          }
        ]
      },
      success_url:
        "https://example.com/success?session_id={CHECKOUT_SESSION_ID}",
      cancel_url: "https://example.com/cancel"
    });
  })();
});

app.listen(port, err => {
  if (err) throw err;
  console.log("Server running on port" + port);
});

Оформление заказа. js

import React, { useState, useEffect } from "react";

const Checkout = ({ price }) => {
  const [isProcessing, setProcessingTo] = useState(false);
  const [checkoutError, setChecoutError] = useState();

let sessionId;

  const stripe = Stripe("pk_test_*******************************");

  useEffect(() => {
    fetch("/charge", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({})
    })
      .then(function(r) {
        return r.json();
      })
      .then(function(response) {
        sessionId = response.id;
      });
  });

  const handleClick = e => {
    e.preventDefault();
    stripe.redirectToCheckout({
      sessionId: sessionId
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Buy</button>
    </div>
  );
};

export default Checkout;

1 Ответ

2 голосов
/ 13 марта 2020

Когда вы создаете объект сеанса через Stripe API, вам нужно вернуть результат обратно во внешний интерфейс. В настоящее время вы ничего не возвращаете. 

const session = await stripe.checkout.sessions.create({
    ...
    ...
    ...
});
res.send({ id: session.id }); // send an object back with the id
...