javascript - 反应贝宝结帐
问题描述
我建立了一个带有 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',
}}
/>
);
}
}
解决方案
您可能使用的是较旧的反应组件,请尝试https://www.npmjs.com/package/react-paypal-button-v2
不要使用onSuccess,切换到onApprove:https ://stackoverflow.com/a/62193541/2069605
这是一个带有描述和两个项目的v2/orders purchase_units 对象的示例:
"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", }, ], }]
(其中很多字段实际上是必需的,并且总数必须匹配,因此以该示例为起点非常有用。)
推荐阅读
- excel - Powershell 错误:来自 HRESULT 的异常:0x800A03EC
- apache-spark - 如何加速 Spark (Pyspark) 中的缓存?
- c - C初学者问题:数组不打印
- excel - 防止 EventChange Sub 意外运行
- r - 如何根据其他数据框上的多个条件创建列
- kubernetes - Kubernetes Operator CSV 停滞不前
- ruby-on-rails - 如何调试 rails db:structure:dump?
- elasticsearch - 如何使用nest 7在索引映射中定义自定义过滤器
- ruby-on-rails - Rails actionMailer Message 只有 text/html MIME 部分
- javascript - Javascript/JQuery/Output 使用 JQUERY.get 调用端点时,promise 和 await 之间的输出不同