反应贝宝结帐

Posted 2023-02-22

【中文标题】反应贝宝结帐

【英文标题】：React PayPal Checkout

【发布时间】：2020-09-23 11:59:05

【问题描述】：

我用 PayPal 结账功能建立了一个小而简单的网上商店，到目前为止它可以正常工作。知道我想在我的 PayPal 账户的交易历史中查看所购买的产品。因此，我需要添加有关购买的更多详细信息，以查看下了什么订单。

我找到了多个教程，但我仍然不知道如何实现。到目前为止，这是我的 payPalButton 组件：

如何向付款对象添加更多详细信息？？

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';

export default class MyApp extends React.Component 
   render() 
      const onSuccess = (payment) => 
         payment.console // Congratulation, it came here means everything's fine!
            .log('The payment was succeeded!', payment);
         this.props.clearCart();
         this.props.history.push('/');
         // You can bind the "payment" object's value to your state or props or whatever here, please see below for sample returned data
      ;

      const onCancel = (data) => 
         // User pressed "cancel" or close Paypal's popup!
         console.log('The payment was cancelled!', data);
         // You can bind the "data" object's value to your state or props or whatever here, please see below for sample returned data
      ;

      const onError = (err) => 
         // The main Paypal's script cannot be loaded or somethings block the loading of that script!
         console.log('Error!', err);
         // Because the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
         // => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
      ;

      let env = 'sandbox'; // you can set here to 'production' for production
      let currency = 'EUR'; // or you can set this value from your props or state
      //   let total = 1; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
      // Document on Paypal's currency code: https://developer.paypal.com/docs/classic/api/currency_codes/

      const client = 
         sandbox: process.env.REACT_APP_ID,
         production: 'YOUR-PRODUCTION-APP-ID',
      ;
      // In order to get production's app-ID, you will have to send your app to Paypal for approval first
      // For sandbox app-ID (after logging into your developer account, please locate the "REST API apps" section, click "Create App"):
      //   => https://developer.paypal.com/docs/classic/lifecycle/sb_credentials/
      // For production app-ID:
      //   => https://developer.paypal.com/docs/classic/lifecycle/goingLive/

      // NB. You can also have many Paypal express checkout buttons on page, just pass in the correct amount and they will work!
      return (
         <PaypalExpressBtn
            env=env
            client=client
            currency=currency
            total=this.props.total
            onError=onError
            onSuccess=onSuccess
            onCancel=onCancel
            style=
               size: 'small',
               color: 'blue',
               shape: 'rect',
            
         />
      );
   

【参考方案1】：

您可能使用的是较旧的 React 组件，请尝试 https://www.npmjs.com/package/react-paypal-button-v2

不要使用onSuccess，改用onApprove：https://***.com/a/62193541/2069605

这是一个 v2/orders purchase_units object 的示例，其中包含一个描述和两个项目：

 "purchase_units": [
  "description": "Stuff",
  "amount": 
    "value": "20.00",
    "currency_code": "USD",
    "breakdown": 
      "item_total": 
        "currency_code": "USD",
        "value": "20.00"
      ,
    
  ,
  "items": [
    
      "unit_amount": 
        "currency_code": "USD",
        "value": "10.00"
      ,
      "quantity": "1",
      "name": "Item 1",
    ,
    
      "unit_amount": 
        "currency_code": "USD",
        "value": "10.00"
      ,
      "quantity": "1",
      "name": "Item 2",
    ,
  ],
]

（其中很多字段实际上是必需的，并且总数必须匹配，因此以这个示例为起点非常有用。）

【讨论】：

感谢您的回答！如何动态添加商品，因为我事先不知道客户会购买什么样的产品，所以我想传递此数据并添加购物车中的商品。

如何添加沙盒 ID 或生产 ID？

尝试使用较新的组件来设置您的客户端 ID。动态设置 purchase_units 数组。

你有一个如何动态设置purchase_units数组的例子吗？

"purchase_units": [myFunctionThatReturnsThePurchaseUnitsObjectIWant()]