目前市场上有几种付款方式可供选择。PayPal结账选项就是其中之一。在我之前的文章中，我已经讨论了几个支付选项 - 使用PHP的Braintree PayPal，支付系统和使用PHP和MySQL的PayPal Express Checkout。这些是迄今为止观看次数最多的热门文章。今天，让我们看看PayPal Express Checkout如何与React JS配合使用。
?
用于测试用户名的实时演示沙箱PayPal凭据：demos@9lessons.info密码：9lessons
Live Demo
第一部分：使用ReactJS和RESTful API登录Facebook和Google
数据库设计
要构建PayPal结账订购系统，您必须创建以下表格。社交登录用户表已出现在上一篇文章中。
产品
产品表包含所有产品详细信息。您可以根据需要扩展此表。
CREATE TABLE产品（
pidintAUTO_INCREMENTPRIMARY KEY，
产品varchar（300），
product_imagevarchar（200），
价格浮动，
货币varchar（10）
）;
订单
订单表包含PayPal付款ID的所有用户订单详细信息。
CREATE TABLE命令（
oidintAUTO_INCREMENTPRIMARY KEY，
pid_fkint，
uid_fkint，
payerIDvarchar（500），
paymentIDvarchar（500），
tokenvarchar（500），
createdint（11）
）;
Home.js
让我们继续这篇文章。这里存在用户会话存储数据，用setState存储数据。使用用户ID和令牌，您可以访问其他信息，如产品和订单详细信息。
从‘react‘导入React，{Component};
import‘./Home.css‘;
从‘react-router-dom‘导入{Redirect};
classHomeextendsComponent{
构造函数（道具）{
超级（道具）;
这个。state={
名字：‘‘，
重定向：false，
};
}
componentDidMount（）{
让data=JSON。解析（的sessionStorage。的getItem（‘用户数据‘））;
安慰。记录（数据）;
这个。的setState（{名称：数据。用户数据。名称}）
}
render（）{
如果（！的sessionStorage。的getItem（‘用户数据‘）||此。状态。重定向）{
return（<Redirect to={‘/‘}/>）
}
回来（
<div>
欢迎{this。state.name}
</div>
）;
}
}
出口默认首页;
让我们开始
您必须为多种用途创建通用组件。在这个项目中，我们通常使用项目标题并注销。
Title.js
此组件包含项目标题和注销功能。使用道具可以扰乱数据。您可以在多个页面中导入此组件。
从“react”导入React，{Component};
从“react-router-dom”导入{Redirect};
import“./ Title.css”;
classTitleextendsComponent{
构造函数（道具）{
超级（道具）;
这个。注销=这个。注销。bind（this）;
这个。state={
重定向：false
};
}
logout（）{
sessionStorage。setItem（“userData”，“”）;
sessionStorage.clear（）;
这个。setState（{redirect：true}）;
}
render（）{
如果（此。状态。重定向）{
return<Redirect to={“/”}/>;
}
回来（
<div className=“row”>
<div className=“medium-12 columns”>
<ul className=“right”>
<li>
<A HREF=“/订单”>订单</一>
</li>
<li>
<a href=“＃”onClick={this。注销}>
登出
</a>
</li>
</ul>
<h2>欢迎{this。道具.name}</h2>
</div>
</div>
）;
}
}
出口默认标题;
ProductsList.js
用于显示所有产品详细信息的组件。这里的产品数据是从React propsconstuctor调用的。onClick按钮this.props.checkOut指向父函数，您将在下一步中找到它。
从“react”导入React，{Component};
import“./ ProductsList.css”;
classProductsList扩展Component{
构造函数（道具）{
超级（道具）;
}
render（）{
让productList=这个。道具。productsData。map（function（productData，index）{
回来（
<div className=“row list”key={index}>
<div className=“medium-3 columns”>
<img
src={
“https://demos.9lessons.info/PHP-PayPal-ExpressCheckout/img/”+
productData。product_img
}
/>
</div>
<div className=“medium-3 columns”>{productData.product}</div>
<div className=“medium-3 columns”>$ {productData。价格}</div>
<div className=“medium-3 columns”>
<button className=“button”value={productData。pid}
onClick={this。道具。结帐}>
订购
</button>
</div>
</div>
）;
}，此）;
return<div>{productList}</div>;
}
}
出口默认的产品列表;
使用RESTful API导入组件和数据绑定
Home.js使用PostData URL提取提供程序
导入Title和ProductList组件。函数getProducts（）根据登录用户ID和令牌从产品API获取数据。
从“react”导入React，{Component};
import“./ Home.css”;
从“react-router-dom”导入{Redirect};
从“../../services/PostData”导入{PostData};
从“../Title/Title”导入标题;
从“../ProductsList/ProductsList”导入ProductsList;
classHomeextendsComponent{
构造函数（道具）{
超级（道具）;
这个。state={
名称：“”，
重定向：false，
产品：[]，
pid：“”
};
这个。getProducts=this。getProducts。bind（this）;
这个。checkout=这个。结帐。bind（this）;
}
componentDidMount（）{
让data=JSON。解析（的sessionStorage。的getItem（“用户数据”））;
这个。的getProducts（数据。用户数据）;
这个。的setState（{名称：数据。用户数据。名称}）;
}
getProducts（userData）{
让postData={uid：userData。uid，token：userData。令牌};
安慰。log（postData）;
PostData（“产品”，postData）。然后（result=>{
让responseJson=结果;
这个。的setState（{产品：responseJson。产品}）;
}）;
}
结帐（e）{
让pid=e.target。getAttribute（“value”）;
sessionStorage。setItem（“pid”，pid）;
这个。setState（{pid：pid}）;
}
render（）{
如果（！的sessionStorage。的getItem（“用户数据”）||此。状态。重定向）{
return<Redirect to={“/”}/>;
}
如果（此。状态。PID>0）{
return<Redirect to={“/ checkout”}/>;
}
回来（
<div className=“row body”>
<Title name={this。state.name}/>
<ProductsList productsData={this。国家。产品}
checkout={this。结帐}/>
</div>
）;
}
}
出口默认首页;
函数checkOut（）根据product value属性更改this.state.pid值。在render方法中，如果pid值存在，则它将重定向到/ checkout页面。
使用PayPal和Checkout页面
您必须安装PayPal结账组件才能连接PayPal API。
为React安装PayPal Express Checkout插件。
$npminstallreact-paypal-express-checkout--save
Paypal.js
使用Paypal Express Button插件创建自定义组件。您必须配置您的PayPal沙箱和生产merchent ID以获得更多信息，并使用PHP和MySQL检查PayPal Express Checkout。在付款成功时，它将使用createOther方法调用onSuccess。此PHP API将使用payerID，paymentToken等付款数据进行验证。有效调用将重定向状态值更改为true，并将其重定向到订单页面。
从“react”导入React，{Component};
import“./ PayPal.css”;
从“react-paypal-express-checkout”导入PaypalExpressBtn;
从“../../services/PostData”导入{PostData};
从“react-router-dom”导入{Redirect};
PayPal类扩展了Component{
构造函数（道具）{
超级（道具）;
这个。state={
重定向：false
};
这个。createOrder=this。createOrder。bind（this）;
}
createOrder（payment）{
让postData={
uid：这个。道具。userData。uid，
令牌：这个。道具。userData。令牌，
payerID：付款。payerID，
paymentID：付款。paymentID，
paymentToken：付款。paymentToken，
pid：这个。道具。PID
};
PostData（“createOrder”，postData）。然后（result=>{
让responseJson=结果;
if（responseJson.status===“true”）{
这个。setState（{redirect：true}）;
}
}）;
}
render（）{
如果（此。状态。重定向）{
return<Redirect to={“/ orders”}/>;
}
constonSuccess=payment=>{
这个。createOrder（付款）;
};
constonCancel=data=>{
安慰。log（“付款已取消！”，数据）;
};
constonError=err=>{
安慰。log（“错误！”，错误）;
};
让env=“沙盒”;//改为直播的“制作”
letcurrency=“USD”;
让total=this。道具.value;
constclient={
沙箱：“AQwoZAAHsmA5vBLj_mZffS3NWJjNJODewuV2WakPm-BQilgsawTtnbLvWHNC73idcfiaHBOjaeTDkAS8”，
生产：“<插入生产客户端ID>”
};
回来（
<PaypalExpressBtn
env={env}
client={client}
货币={货币}
总计={总计}
onError={onError}
onSuccess={onSuccess}
onCancel={onCancel}
/>
）;
}
}
出口默认PayPal;
对于生产，您可以将let evn值更改为“production”。使用我的沙盒令牌进行测试。
CheckOut.js
Checkout页面，用于显示有关所选产品的更多详细信息。导入PayPal组件并设置属性值，如产品值，pid和userData。
从“react”导入React，{Component};
import“./ Checkout.css”;
从“react-router-dom”导入{Redirect};
从“../../services/PostData”导入{PostData};
从“../Title/Title”导入标题;
从“../PayPal/PayPal”导入PayPal;
classCheckout扩展Component{
构造函数（道具）{
超级（道具）;
这个。state={
名称：“”，
重定向：false，
pid：“”，
产品：[]，
userData：[]
};
}
componentDidMount（）{
让data=JSON。解析（的sessionStorage。的getItem（“用户数据”））;
这个。getProductData（数据。用户数据）;
这个。的setState（{名称：数据。用户数据。名称}）;
这个。的setState（{的UserData：数据。的UserData}）;
}
getProductData（userData）{
让pid=sessionStorage。getItem（“pid”）;
让postData={uid：userData。uid，token：userData。token，pid：pid};
PostData（“getProduct”，postData）。然后（result=>{
让responseJson=结果;
这个。setState（{product：responseJson.product}）;
}）;
}
render（）{
如果（！的sessionStorage。的getItem（“用户数据”）||此。状态。重定向）{
return<Redirect to={“/”}/>;
}
回来（
<div className=“row body”>
<Title name={this。state.name}/>
<h4>结帐</h4>
<div className=“row”>
<div className=“medium-4 columns”>Product</div>
<div className=“medium-4 columns”>名称</div>
<div className=“medium-4 columns”>价格</div>
</div>
<div className=“row”>
<div className=“medium-4 columns”>
<img
src={
“https://demos.9lessons.info/PHP-PayPal-ExpressCheckout/img/”+
这个。国家。产品。product_img
}
/>
</div>
<div className=“medium-4 columns”>{this。state.product.product}</div>
<div className=“medium-4 columns”>
{这。国家。产品。价格}
<PayPal
value={this。国家。产品。价格}
pid={this。国家。产品。pid}
userData={this。国家。userData}
/>
</div>
</div>
</div>
）;
}
}
出口默认结帐;＃
Orders.js
Orders页面包含您所有成功的订单。函数getOrders从RESTful apis获取订单，组件OrdersList基于state.orders数组呈现。
从“react”导入React，{Component};
import“./ Orders.css”;
从“react-router-dom”导入{Redirect};
从“../../services/PostData”导入{PostData};
从“../Title/Title”导入标题;
从“../OrdersList/OrdersList”导入OrdersList;
classOrdersextendsComponent{
构造函数（道具）{
超级（道具）;
这个。state={
名称：“”，
重定向：false，
订单：[]
};
这个。getOrders=这个。getOrders。bind（this）;
}
componentDidMount（）{
让data=JSON。解析（的sessionStorage。的getItem（“用户数据”））;
这个。getOrders（数据。用户数据）;
这个。的setState（{名称：数据。用户数据。名称}）;
}
getOrders（userData）{
让postData={uid：userData。uid，token：userData。令牌};
PostData（“orders”，postData）。然后（result=>{
让responseJson=结果;
这个。的setState（{订单：responseJson。订单}）;
}）;
}
render（）{
如果（！的sessionStorage。的getItem（“用户数据”）||此。状态。重定向）{
return<Redirect to={“/”}/>;
}
回来（
<div className=“row body”>
<Title name={this。state.name}/>
<OrdersList ordersData={this。国家。订单}/>
</div>
）;
}
}
出口默认订单;
OrderList.js
显示用户付款订单的组件。
从“react”导入React，{Component};
import“./ OrdersList.css”;
classOrdersListextendsComponent{
构造函数（道具）{
超级（道具）;
}
render（）{
让ordersList=这个。道具。ordersData。map（function（orderData，index）{
回来（
<div clasName=“row orderList”key={index}>
<div className=“medium-3 columns”>{orderData。oid}</div>
<div className=“medium-3 columns”>{orderData.product}</div>
<div className=“medium-3 columns”>$ {orderData。价格}</div>
<div className=“medium-3 columns”>{orderData。已创建}</div>
</div>
）;
}，此）;
return<div>{ordersList}</div>;
}
}
exportdefaultOrdersList;
使用PHP RESTful
这个项目是使用ReactJS登录Facebook和谷歌以及使用PHP和MySQL的PayPal Express Checkout
PayPal Express Checkout PHP RESTful +社交登录API在Github上下载此项目
index.php
包含在POST方法调用之后。请使用ReactJS查看使用Facebook和Google登录
<？PHP
/ * ### Srinivas Tamada ### * /
/ * ### https://www.9lessons.info ### * /
需要‘config.php文件‘;
要求‘Slim / Slim.php‘;
\ Slim \Slim::registerAutoloader（）;
$ app=new\ Slim \Slim（）;
$ app- >post（‘/ signup‘，‘signup‘）;/ *用户注册* /
$ app- >post（‘/ products‘，‘products‘）;/ *用户产品* /
$ app- >post（‘/ orders‘，‘orders‘）;/ *用户订单* /
$ app- >post（‘/ getProduct‘，‘getProduct‘）;/ *获得自豪* /
$ app- >post（‘/ createOrder‘，‘createOrder‘）;/ *创建订单* /
$ app- >run（）;
......
......
......
......
？>
产品
获取产品表的产品详细信息。如果你想要你可以扩展添加分页。
functionproducts（）{
$ request=\ Slim \Slim::getInstance（）- >request（）;
$ data=json_decode（$ request- >getBody（））;
$ uid=$ data- >uid;
$ token=$ data- >token;
$ system_token=apiToken（$ uid）;
if（$ token==$ system_token）{
$ db=getDB（）;
$ sql=“SELECT*FROMproducts”;
$ stmt=$ db- >prepare（$ sql）;
$ stmt- >execute（）;
$ products=$ stmt- >fetchALL（PDO::FETCH_OBJ）;
if（$ products）{
$ products=json_encode（$ products）;
echo‘{“products”：‘。$产品。‘}‘;
}else{
echo‘{“error”：{“text”：“无数据可用”}}‘;
}
}
其他{
echo‘{“error”：{“text”：“No access”}}‘;
}
}
订单
基于帖子输入uid的用户订单详细信息。
functionorders（）{
$ request=\ Slim \Slim::getInstance（）- >request（）;
$ data=json_decode（$ request- >getBody（））;
$ uid=$ data- >uid;
$ token=$ data- >token;
$ system_token=apiToken（$ uid）;
if（$ token==$ system_token）{
$ db=getDB（）;
$的SQL=“SELECT*FROM订单O，产品P.WHERE?。pid_fk=P。PID和uid_fk=：UID按订单?。OIDDESC;”;
$ stmt=$ db- >prepare（$ sql）;
$ stmt- >bindParam（“uid”，$ uid，PDO::PARAM_INT）;
$ stmt- >execute（）;
$ orders=$ stmt- >fetchALL（PDO::FETCH_OBJ）;
if（$ orders）{
$ orders=json_encode（$ orders）;
echo‘{“orders”：‘。$订单。‘}‘;
}else{
echo‘{“error”：{“text”：“无数据可用”}}‘;
}
}
其他{
echo‘{“error”：{“text”：“No access”}}‘;
}
}
getProduct
根据产品ID获取单个产品详细信息。
functiongetProduct（）{
$ request=\ Slim \Slim::getInstance（）- >request（）;
$ data=json_decode（$ request- >getBody（））;
$ uid=$ data- >uid;
$ token=$ data- >token;
$ pid=$ data- >pid;
$ system_token=apiToken（$ uid）;
if（$ token==$ system_token）{
$ db=getDB（）;
$ sql=“SELECT*FROMproductsWHEREpid=：pid”;
$ stmt=$ db- >prepare（$ sql）;
$ stmt- >bindParam（“pid”，$ pid，PDO::PARAM_STR）;
$ stmt- >execute（）;
$ product=$ stmt- >fetch（PDO::FETCH_OBJ）;
if（$ product）{
$ product=json_encode（$ product）;
echo‘{“product”：‘。$ product。‘}‘;
}else{
echo‘{“error”：{“text”：“无数据可用”}}‘;
}
}
其他{
echo‘{“error”：{“text”：“No access”}}‘;
}
}
createOrder
创建成功付款的订单。这将调用内部CURL动作函数paypalCheck。
functioncreateOrder（）{
$ request=\ Slim \Slim::getInstance（）- >request（）;
$ data=json_decode（$ request- >getBody（））;
$ uid=$ data- >uid;
$ token=$ data- >token;
$ pid=$ data- >pid;
$ payerID=$ data- >payerID;
$ paymentToken=$ data- >paymentToken;
$ paymentID=$ data- >paymentID;
$ system_token=apiToken（$ uid）;
if（$ token==$ system_token）{
if（paypalCheck（$ paymentID，$ pid，$ payerID，$ paymentToken，$ uid））{
echo‘{“status”：“true”}‘;
}else{
echo‘{“error”：{“text”：“无数据可用”}}‘;
}
}
其他{
echo‘{“error”：{“text”：“No access”}}‘;
}
}
paypalCheck内部函数
使用CURL方法验证PayPal转换以便更好地了解使用PHP和MySQL检查PayPal Express Checkout。
functionpaypalCheck（$ paymentID，$ pid，$ payerID，$ paymentToken，$ uid）{
$ ch=curl_init（）;
$ clientId=PayPal_CLIENT_ID;
$ secret=PayPal_SECRET;
curl_setopt（$ CH，CURLOPT_URL，PayPal_BASE_URL。‘的oauth2 /令牌‘）;
curl_setopt（$ ch，CURLOPT_HEADER，false）;
curl_setopt（$ ch，CURLOPT_SSL_VERIFYPEER，false）;
curl_setopt（$ ch，CURLOPT_POST，true）;
curl_setopt（$ ch，CURLOPT_RETURNTRANSFER，true）;
curl_setopt（$ ch，CURLOPT_USERPWD，$ clientId。“：”。$ secret）;
curl_setopt（$ ch，CURLOPT_POSTFIELDS，“grant_type = client_credentials”）;
$ result=curl_exec（$ ch）;
$ accessToken=null;
if（empty（$ result））{
返回虚假;
}
其他{
$ json=json_decode（$ result）;
$ accessToken=$ json- >access_token;
$卷曲=curl_init（PayPal_BASE_URL。‘付款/支付/‘。$ paymentID）;
curl_setopt（$ curl，CURLOPT_POST，false）;
curl_setopt（$ curl，CURLOPT_SSL_VERIFYPEER，false）;
curl_setopt（$ curl，CURLOPT_HEADER，false）;
curl_setopt（$ curl，CURLOPT_RETURNTRANSFER，true）;
curl_setopt（$ curl，CURLOPT_HTTPHEADER，array（
‘授权：持票人‘。$ accessToken，
‘接受：application / json‘，
‘Content-Type：application / xml‘
））;
$ response=curl_exec（$ curl）;
$ result=json_decode（$ response）;
$ state=$ result- >state;
$ total=$ result- >transactions[0]- >amount- >total;
$ currency=$ result- >transactions[0]- >amount- >currency;
$ subtotal=$ result- >transactions[0]- >amount- >details- >subtotal;
$ recipient_name=$ result- >transactions[0]- >item_list- >shipping_address- >recipient_name;
curl_close（$ ch）;
curl_close（$ curl）;
$ product=getProductData（$ pid）;
if（$ state==‘approved‘&&$ currency==$ product- >currency&&$ product- >price==$ subtotal）{
updateOrder（$ pid，$ payerID，$ paymentID，$ paymentToken，$ uid）;
返回true;
}
其他{
返回虚假;
}
}
}
updateOrder内部函数
使用付款详细信息插入订单详细信息。
functionupdateOrder（$ pid，$ payerID，$ paymentID，$ token，$ uid）
{
if（paymentCheck（$ paymentID）<1&&$ uid>0）{
$ db=getDB（）;
$ stmt=$ db- >prepare（“INSERTINTOorders（uid_fk，pid_fk，payerID，paymentID，token，created）VALUES（：uid，：pid，：payerID，：paymentID，：token，：created）”）;
$ stmt- >bindParam（“paymentID”，$ paymentID，PDO::PARAM_STR）;
$ stmt- >bindParam（“payerID”，$ payerID，PDO::PARAM_STR）;
$ stmt- >bindParam（“token”，$ token，PDO::PARAM_STR）;
$ stmt- >bindParam（“pid”，$ pid，PDO::PARAM_INT）;
$ stmt- >bindParam（“uid”，$ uid，PDO::PARAM_INT）;
$ created=time（）;
$ stmt- >bindParam（“created”，$ created，PDO::PARAM_INT）;
$ stmt- >execute（）;
$ db=null;
返回true;
}
其他{
返回虚假;
}
}
paymentCheck内部功能
使用方法交叉检查预付款不是。
功能paymentCheck（$ paymentID）
{
$ db=getDB（）;
$ stmt=$ db- >prepare（“SELECT*FROMordersWHEREpaymentID=：paymentID”）;
$ stmt- >bindParam（“paymentID”，$ paymentID，PDO::PARAM_STR）;
$ stmt- >execute（）;
$ count=$ stmt- >rowcount（）;
$ db=null;
返回$ count;
}
运行此项目React
$gitclonehttps://github.com/srinivastamada/react-login-paypal.git
$cdreact-login-paypal
$yarnstart
使用React JS和PHP RESTful进行PayPal Express Checkout
原文地址：https://www.cnblogs.com/xjsp/p/9723234.html