[英]Stripe Payment Form not Displaying in React
我正在為一個項目構建一個 React 應用程序,並且我正在嘗試將 Stripe 合並到其中,以便接受用戶帳戶余額的付款。 當我單擊按鈕並顯示支付組件的 url 時,不顯示支付組件。 我懷疑這與我的路由有關。 應用代碼如下:
import React, { Component } from 'react';
import { Switch, Route, Redirect, withRouter } from "react-router-dom";
//import { loadStripe } from "@stripe/stripe-js";
import { connect } from 'react-redux'
import { loggedIn } from "./actions/currentAccount.js"
import { Elements, StripeProvider } from "react-stripe-elements";
import PaymentNew from './components/PaymentNew'
import AccountContainer from './containers/AccountContainer'
import Navbar from './components/Navbar'
import DepartmentsContainer from './containers/DepartmentsContainer'
import Login from './components/registrations/Login'
import Signup from './components/registrations/Signup'
class App extends Component {
componentDidMount() {
if (localStorage.getItem("loggedIn")) {
loggedIn(this.props.history);
}
}
render() {
//const stripe = loadStripe('pk_test_tZpOKpVsO8ccsjSLbrnuwwEH');
const currentAccount = localStorage.getItem("loggedIn");
console.log('current account is: ' + JSON.stringify(this.props.loginFormReducer));
return (
<div className="App">
<h2>{ currentAccount ?
`Logged in as ${this.props.loginFormReducer.attributes.name}` :
"Not logged in" }</h2>
<Switch>
<Route exact path='/api/v1/login' render={props => ( <Login {...props}/>)}/>
<Route exact path='/api/v1/signup' render={props => ( <Signup {...props}/>)}/>
<Redirect from="/logout" to="api/v1/login" />
<Route exact path='/accounts/:id' render={props => {
return <AccountContainer {...props} account={currentAccount}/>
} }/>
<Route exact path='/accounts/:id/departments' render={props => {
return <DepartmentsContainer/>
} }/>
<Route path='/accounts/:id/payments/new' render={props => {
<StripeProvider apiKey="pk_test_tZpOKpVsO8ccsjSLbrnuwwEH">
<Elements>
<PaymentNew {...props}/>
</Elements>
</StripeProvider>
}} />
</Switch>
{ currentAccount ? <Navbar account={currentAccount}/> : null }
</div>
);
}
}
const mapStateToProps = state => { //what portion of state to provide to props
return { //executed with each change to the store.
...state
};
}
export default withRouter(connect(mapStateToProps, { loggedIn })(App)); // specifies
component to provide data to. ```
Routing is as follows:
Routes.rb
Rails.application.routes.draw do
#root 'api/v1/login'
post 'api/v1/login', to: 'api/v1/sessions#create'
delete 'api/v1/logout', to: 'api/v1/sessions#destroy'
post 'api/v1/signup' => 'api/v1/accounts#create'
get 'api/v1/logged_in' => 'api/v1/sessions#is_logged_in?'
namespace :api do
namespace :v1 do
resources :accounts do
resources :departments
resources :payments
end
end
end
end
The Payment form:
import React from 'react'
import { useState } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {injectStripe} from 'react-stripe-elements';
import { newPayment } from "../actions/currentPayments";
const PaymentNew = (props) => {
const [form, setForm] = useState({
amount: ''
});
console.log(this.props)
//const accountId = this.props
const handlePaymentFormChange = (event, target) => {
setForm({
...form,
[target]: event.target.value,
});
}
const handlePaymentFormSubmit = (event, accountId) => {
event.preventDefault()
newPayment(form, accountId)
}
return (
<div className="NewPayment">
<h1>New Payment</h1>
<form onSubmit={handlePaymentFormSubmit}>
<input
placeholder="amount"
type="text"
name="amount"
autoComplete="on"
value={form.amount}
onChange={(event)=> handlePaymentFormChange(event, "amount")}
/><br/>
<input
placeholder="cardnumber"
type="text"
name="card number"
autoComplete="on"
value={form.cardnumber}
onChange={(event)=> handlePaymentFormChange(event, "cardnumber")}
/><br/>
<input
placeholder="expiration"
type="text"
name="expiration"
autoComplete="on"
value={form.expiry}
onChange={(event)=> handlePaymentFormChange(event, "expiration")}
/><br/>
<input
placeholder="cvc"
type="text"
name="cvc"
autoComplete="on"
value={form.cvc}
onChange={(event)=> handlePaymentFormChange(event, "cvc")}
/><br/>
<button placeholder="submit" type="submit">
Make Payment
</button>
<br></br>
<br></br>
<div>
</div>
</form>
<div>
</div>
</div>
)
}
/*function InjectedCheckoutForm() {
return (
<ElementsConsumer>
{({ stripe, elements }) => (
<CheckoutForm stripe={stripe} elements={elements} />
)}
</ElementsConsumer>
);
}*/
const mapStateToProps = state => {
return {
form: state.form
};
};
export default withRouter(connect(mapStateToProps, { newPayment } ),
injectStripe(PaymentNew));
I have tried to change the route in app from exact path to just path. I have also removed elements and StripeProvider. In both cases the component still does not display and all that I see is the navbar. Any help and suggestions are appreciated.
您將需要逐層分解並確定導致 React 組件無法呈現的原因。 目前尚不清楚您“缺少”哪些組件。 您可以添加顯示缺失內容的屏幕截圖嗎?
您可能會嘗試的一件事是將<StripeProvider>
移動到路由器<Switch>
之外,以便它是持久的。
簡化您的組件樹。 找出失敗的地方。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.