将 Stripe 支付方式集成到 react JS 中答案

【问题标题】：Integrate Stripe payment method into react JS将 Stripe 支付方式集成到 react JS 中
【发布时间】：2022-06-12 13:56:17
【问题描述】：

需要帮助。现在我正在学习将条纹支付方式集成到 reactJS 中。我按照这个教程Stripe Youtube tutorial

由于 2021 年 3 月上传的视频，部分代码不适用于当前的 ReactJS 版本。我的 ReactJS 版本是 18.1.0

所以我分享了我根据该教程构建的代码。

文件索引.JS。我为这个文件修改了react-dom。

import React from 'react' 
import App from './App'

import { createRoot } from 'react-dom/client'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
    <div>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </div>  
);

文件App.js 无需更改。和教程一样

import {BrowserRouter as Switch, Route } from 'react-router-dom'
import PaymentForm from './PaymentForm'

const App = () => {
    
    <Switch>
        <Route path="/" exact>
            <PaymentForm />
        </Route>
    </Switch>
}

export default App;

文件index.html也和教程一样

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React Stripe app</title>
  </head>
  <body> 
    <div id="root"></div> 
  </body>
</html>

文件PaymentForm.js也和教程一样

const PaymentForm = () => {
    return 'Payment Form'
}

export default PaymentForm;

问题是，浏览器不显示任何内容。从这一步开始......浏览器应该显示单词Payment Form

我的标签控制台上没有错误。也在我的终端上显示此消息

You can now view reactstripe in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.106:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

我不确定代码有什么问题。浏览器什么也不显示。真的很空。

请帮忙

【问题讨论】：

标签： reactjs stripe-payments

【解决方案1】：

我不确定，因为我自己是新手，但也许您需要在 app.js 中的 jsx 之前写 return。

我认为代码应该如下所示：

import {BrowserRouter as Switch, Route } from 'react-router-dom'
import PaymentForm from './PaymentForm'

const App = () => {
return (
<Switch>
    <Route path="/" exact>
        <PaymentForm />
    </Route>
</Switch>);
}

export default App;

这是因为jsx必须在函数中返回。

【讨论】：

【解决方案2】：

我不能 100% 确定这是否能解决您的问题，但您的代码存在许多问题。首先，根据我对条带集成的理解，您的 App.js 文档应如下所示：

import {BrowserRouter as Switch, Route } from 'react-router-dom'
import PaymentForm from './PaymentForm'
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

const App = () => {

const stripePromise = loadStripe(<YOUR_PUBLISHABLE_KEY>);
    
    <Switch>
        <Route path="/" exact>
           <Elements stripe={stripePromise}>
            <PaymentForm />
           </Elements>
        </Route>
    </Switch>
}

export default App;

由于所有条带组件都必须包含在<Elements>中

其次，最重要的是，您的屏幕是空白的，因为您没有返回任何内容。我不确定您是否习惯于使用香草 javascript 而不是react 进行编码，但是在react 中，为了在屏幕上获取文本，您必须使用return( ); 和html 包含在return 中.因此，如果您尝试显示单词 'Payment Form'，您的 PaymentForm.js 应该如下所示：

import React from 'react';

const PaymentForm = () => {

return (
<div>
Payment Form
</div>
);
}

export default PaymentForm;

【讨论】：