Javascript 未显示PayPal“以后付款”按钮

我正在学习一个教程，老师正在将PayPal集成到一个电子商务网站中。问题是，我只有2个按钮（图1），但讲师有3个。（图2）我试图一步一步地跟随他，但可能是因为react-paypal-button-v2库或类似的更新版本。其他2个按钮显示正常。（即使它会很好，如果“借记卡或信用卡”按钮会有一个描述）如你所见，我也错过了按钮下面的“由贝宝供电”行。我已经通过沙箱帐户测试了PayPal主按钮的功能，在这方面一切正常。有谁能帮我解决这个问题吗？非常感谢您最终的帮助

这些是我当前的PayPal按钮-（图0）

更新-在从代码中删除注释（我将它们放在此处，以便我可以看到它们的位置）后，我用 “由贝宝提供动力”和“借记卡或信用卡”行。现在我的按钮看起来像这样-（图1）

下面是期望的结果-（图2）

OrderScreen.js-（请注意，尽管在堆栈溢出中有些注释不是灰色的，但在我的IDE中它们实际上是灰色的）

import React，{useState，useffect}来自“React”；
从“react bootstrap”导入{按钮、行、列、列表组、图像、卡}；
从“react router dom”导入{Link}；
从“react redux”导入{useDispatch，useSelector}；
从'react-paypal-button-v2'导入{PayPalButton}
从“./组件/消息”导入消息；
从“../components/Loader”导入加载程序
从“./actions/orderActions”导入{getOrderDetails，payOrder}；
从“../constants/orderConstants”导入{ORDER_PAY_RESET}
函数顺序屏幕（{match}）{
const orderId=match.params.id
const dispatch=usedpatch（）；
const[sdkReady，setSdkReady]=useState（false）
//我们正在更新SETDKREADY
//false是默认值，但一旦加载setSdkReady，它就会被设置为true
//如果我们还没有准备好，那么我们将不添加按钮，但是如果我们准备好了，我们将添加按钮
//这将取决于successPay是否为真（？）
const orderDetails=useSelector（state=>state.orderDetails）
const{order，error，loading}=orderDetails
const orderPay=useSelector（state=>state.orderPay）
const{loading:loadingPay，success:successPay}=orderPay//这里我们为加载设置一个自定义名称
如果（！加载&&！错误）{
order.itemsPrice=order.orderItems
.减少（（会计科目，项目）=>会计科目+项目价格*项目数量，0）
.toFixed（2）；
//acc znamená累加器，固定（2）znamená，že výsldenčslo bude mít maximálnějen小数点后2位
}//orderItems仅在获得该订单后计算
const addPayPalScript=（）=>{//此函数将取决于我们的订单状态
常量脚本=document.createElement（'script'）
script.type='text/javascript'
script.src=https://www.paypal.com/sdk/js?client-id=avrrjlnbyafsjpz91_5;oebquzqulkvl0aly2fyvoqfz9chn2kvusdnvsjqmv8s9kzbc2_lxRBnuV'
script.async=true
script.onload=（）=>{
setSdkReady（真）
}
document.body.appendChild（script）//我们正在将脚本附加到dom
}
useffect（（）=>{
如果（！order | | | | successPay | | | order.| id！==Number（orderId））{//如果我们没有订单或者订单id不在这里，我们将发送此订单
分派（{type:ORDER\u PAY\u RESET}）
dispatch（getOrderDetails（orderId））//这将使用该id进行api调用
//我们只有在没有这些信息的情况下才能获得订单的详细信息
}如果（！order.isPaid）{//如果订单未付款，则为else
如果（！window.paypal）{
addPayPalScript（）//如果脚本不存在，则添加它
}否则{
setSdkReady（true）//这将使脚本准备就绪
}
}   
}，[dispatch，order，orderId，successPay]）//uvnitřhranatých závorek jsou依赖项
const successPaymentHandler=（paymentResult）=>{
//paymentResult将是paypal提供给我们的数据
//这将是贝宝的回应
dispatch（payOrder（orderId，paymentResult））//payOrder接受2个参数
//payOrder发送我们的API调用，它会去更新我们的数据库
}
返回加载？（//我们正在检查，如果（？）我们正在加载
//负载微调器
)：错误？（//如果我们没有加载，那么（否则je:）我们将检查错误
{error}//如果有错误，让我们抛出该消息
)：（//如果以上都不正确，则传入最后一个组件
顺序：{Order.\u id}
航运
名称：{order.user.Name}

电子邮件：


配送：
{order.shippingAddress.address}，{order.shippingAddress.city}
{"  "}
{order.shippingAddress.postalCode}，{'}
{order.shippingAddress.country}

{order.isDelivered？（//这将从管理面板更新
在{order.deliveredAt}上交付
)：（//如果未传递，则将执行else语句
未交付
)}
付款方式

方法：
{order.paymentMethod}

{order.isPaid？（//这将从管理面板更新
于{order.paidAt}付款
)：（//如果未支付，则else语句将使用pla
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;