问题描述
我正在学习一个教程,其中老师正在将 PayPal 集成到电子商务网站中。问题是,我只有 2 个按钮(图 1),但讲师有 3 个。 (图片 2)我试图一步一步地跟随他,但也许这是 react-paypal-button-v2 库的更新版本或类似的问题。其他 2 个按钮正在正确显示。 (即使它会很好,如果“借记卡或信用卡”按钮有说明)正如您所看到的,我还缺少按钮下方的“由 PayPal 提供支持”行。我已经通过沙箱帐户测试了主要 PayPal 按钮的功能,在这方面一切正常。有人可以帮我解决这个问题吗?非常感谢您的最终帮助。
这些是我当前的 PayPal 按钮 -(图片 0)
更新 - 从代码中删除注释(我将它们留在 SO 上的位置,所以我可以看到它们的位置)后,我已经解决了这个问题 “由 PayPal 提供支持”和“借记卡或信用卡”行。所以现在我的按钮看起来像这样 -(图 1)
这是想要的结果 -(图片 2)
OrderScreen.js -(请注意,尽管事实上,Stack Overflow 上的某些注释不是灰色的,但在我的 IDE 中它们实际上是灰色的)
import React,{ useState,useEffect } from "react";
import { Button,Row,Col,ListGroup,Image,Card } from "react-bootstrap";
import { Link } from "react-router-dom";
import { usedispatch,useSelector } from "react-redux";
import { PayPalButton } from 'react-paypal-button-v2'
import Message from "../components/Message";
import Loader from '../components/Loader'
import { getorderDetails,payOrder } from "../actions/orderActions";
import { ORDER_PAY_RESET } from '../constants/orderConstants'
function OrderScreen({ match }) {
const orderId = match.params.id
const dispatch = usedispatch();
const [sdkReady,setSdkReady] = useState(false)
//we are updating the setSdkReady
//false is the default value,but once we load the setSdkReady,then it will be set to true
//if we are not ready,then we will not add the button,but if we are ready,we will add the button
//that is going to depend on whether successpay is true or not (?)
const orderDetails = useSelector(state => state.orderDetails)
const {order,error,loading} = orderDetails
const orderPay = useSelector(state => state.orderPay)
const { loading:loadingPay,success:successpay } = orderPay //here we are setting a custom name for the loading
if(!loading && !error){
order.itemsPrice = order.orderItems
.reduce((acc,item) => acc + item.price * item.qty,0)
.toFixed(2);
//acc znamená accumulator,toFixed(2) znamená,že výsledné číslo bude mít maximálně jen 2 decimal places
} //orderItems gets calculated only once we have that order
const addPayPalScript = () => { //this function is going to be dependent on our order status
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://www.paypal.com/sdk/js?client-id=AVrrJLnByiAFSjPZ91_-o5OeBqUzCQulKVl0aly2FyVOQfZ9cHn2kvUSDNvSJqMv8S9KzBc2_lxRBnuV'
script.async = true
script.onload = () => {
setSdkReady(true)
}
document.body.appendChild(script) //we are appending the script to the dom
}
useEffect(() => {
if (!order || successpay || order._id !== Number(orderId)){ //we are going to dispatch this,if we don´t have an order or if the order id is not here yet
dispatch({ type:ORDER_PAY_RESET })
dispatch(getorderDetails(orderId)) //this is going to make the api call using that id
//we only get the order details when we don´t have that information yet
} else if(!order.isPaid){ //if order is not paid
if(!window.paypal){
addPayPalScript() //if the script is not there,then add it
} else {
setSdkReady(true) //this gets our script ready
}
}
},[dispatch,order,orderId,successpay]) //uvnitř hranatých závorek jsou dependencies
const successpaymentHandler = (paymentResult) => {
//paymentResult is going to be the data,that the paypal will give us
//it will be the response from paypal
dispatch(payOrder(orderId,paymentResult)) //payOrder is taking in 2 parameters
//payOrder sends our API call and it goes and updates our database
}
return loading ? ( //we are checking,if (?) we are loading
<Loader/> //load spinner
) : error ? ( //if we are not loading,then (else je :) we will check for an error
<Message variant='danger'>{error}</Message> //if there is an error,let´s throw out that message
) : ( //if none of the above are true,then pass in the final component
<div>
<h1>Order: {order._id}</h1>
<Row>
<Col md={8}>
<ListGroup variant="flush">
<ListGroup.Item>
<h2>Shipping</h2>
<p><strong>Name: </strong> {order.user.name}</p>
<p><strong>Email: </strong><a href={`mailto:${order.user.email}`}>{order.user.email}</a></p>
<p>
<strong>Shipping: </strong>
{order.shippingAddress.address},{order.shippingAddress.city}
{" "}
{order.shippingAddress.postalCode},{" "}
{order.shippingAddress.country}
</p>
{order.isDelivered ? ( //this will be updated from the admin panel
<Message variant='success'>Delivered on {order.deliveredAt}</Message>
) : ( // if this is not delivered,then the else statement will take place
<Message variant='warning'>Not Delivered</Message>
)}
</ListGroup.Item>
<ListGroup.Item>
<h2>Payment Method</h2>
<p>
<strong>Method: </strong>
{order.paymentMethod}
</p>
{order.isPaid ? ( //this will be updated from the admin panel
<Message variant='success'>Paid on {order.paidAt}</Message>
) : ( // if this is not paid,then the else statement will take place
<Message variant='warning'>Not Paid</Message>
)}
</ListGroup.Item>
<ListGroup.Item>
<h2>Order Items</h2>
{order.orderItems.length === 0 ? (
<Message variant="info">Order is empty</Message>
) : (
<ListGroup variant="flush">
{order.orderItems.map((item,index) => (
<ListGroup.Item key={index}>
<Row>
<Col md={1}>
<Image
src={item.image}
alt={item.name}
fluid
rounded
/>
</Col>
<Col>
<Link to={`/product/${item.product}`}>
{item.name}
</Link>
</Col>
<Col md={4}>
{item.qty} X ${item.price} = $
{(item.qty * item.price).toFixed(2)}
</Col>
</Row>
</ListGroup.Item>
))}
</ListGroup>
)}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={4}>
<Card>
<ListGroup variant="flush">
<ListGroup.Item>
<h2>Order Summary</h2>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Items:</Col>
<Col>${order.itemsPrice}</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Shipping:</Col>
<Col>${order.shippingPrice}</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Tax:</Col>
<Col>${order.taxPrice}</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Total:</Col>
<Col>${order.totalPrice}</Col>
</Row>
</ListGroup.Item>
{!order.isPaid && (
<ListGroup.Item>
{loadingPay && <Loader/>}
{!sdkReady ? ( //while we are loading,then output the loader
<Loader/>
) : ( //else
<PayPalButton
amount={order.totalPrice}
onSuccess={successpaymentHandler}
/>
)}
</ListGroup.Item>
)}
</ListGroup>
</Card>
</Col>
</Row>
</div>
);
}
export default OrderScreen;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)