使用React JS和PHP RESTful进行PayPal Express Checkout
目前市场上有几种付款方式可供选择。PayPal结账选项就是其中之一。在我之前的文章中,我已经讨论了几个支付选项 - 使用PHP的Braintree PayPal,支付系统和使用PHP和MySQL的PayPal Express Checkout。这些是迄今为止观看次数最多的热门文章。今天,让我们看看PayPal Express Checkout如何与React JS配合使用。
用于测试用户名的实时演示沙箱PayPal凭据:[email?protected]密码:9lessons? Live Demo 第一部分:使用ReactJS和RESTful API登录Facebook和Google 数据库设计 产品 CREATE TABLE?产品( 订单 CREATE TABLE?命令( Home.js 从‘react‘?导入React?,{?Component?}?;? import?‘./Home.css‘?; 从‘react-router-dom‘?导入?{?Redirect?}?; class?Home?extends?Component?{ 构造函数(道具){ ? ? 超级(道具); ? ? 这个。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”?; class?Title?extends?Component?{ 构造函数(道具){ ? ?超级(道具); ? ?这个。注销?=?这个。注销。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”?导入React?,{?Component?}?;? import?“./ ProductsList.css”?; class?ProductsList?扩展?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提取提供程序 从“react”?导入React?,{?Component?}?;? import?“./ Home.css”?; 从“react-router-dom”?导入?{?Redirect?}?; 从“../../services/PostData”?导入?{?PostData?}?; 从“../Title/Title”?导入标题?; 从“../ProductsList/ProductsList”?导入ProductsList?; class?Home?extends?Component?{ 构造函数(道具){ ? ?超级(道具); ? ?这个。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页面 为React安装PayPal Express Checkout插件。 $?npm?install?react-paypal-express-checkout?--save Paypal.js 从“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”?}?/>?; } const?onSuccess?=?payment?=>?{ ? ?这个。createOrder(付款); }; const?onCancel?=?data?=>?{ ? ?安慰。log(“付款已取消!”,数据); }; const?onError?=?err?=>?{ 安慰。log(“错误!”,错误); }; 让?env?=?“沙盒”?;?//改为直播的“制作” let?currency?=?“USD”?; 让?total?=?this。道具?.value; const?client?=?{ 沙箱:??“AQwoZAAHsmA5vBLj_mZffS3NWJjNJODewuV2WakPm-BQilgsawTtnbLvWHNC73idcfiaHBOjaeTDkAS8”, 生产:?“<插入生产客户端ID>” }; 回来( <?PaypalExpressBtn env?=?{env} client?=?{client} 货币=?{货币} 总计=?{总计} onError?=?{onError} onSuccess?=?{onSuccess} onCancel?=?{onCancel} /> ); } } 出口?默认?PayPal?; 对于生产,您可以将let evn值更改为“production”。使用我的沙盒令牌进行测试。 CheckOut.js 从“react”?导入React?,{?Component?}?;? import?“./ Checkout.css”?; 从“react-router-dom”?导入?{?Redirect?}?; 从“../../services/PostData”?导入?{?PostData?}?; 从“../Title/Title”?导入标题?; 从“../PayPal/PayPal”?导入PayPal?; class?Checkout?扩展?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 从“react”?导入React?,{?Component?}?;? import?“./ Orders.css”?; 从“react-router-dom”?导入?{?Redirect?}?; 从“../../services/PostData”?导入?{?PostData?}?; 从“../Title/Title”?导入标题?; 从“../OrdersList/OrdersList”?导入OrdersList?; class?Orders?extends?Component?{ 构造函数(道具){ ? ?超级(道具); ? ?这个。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”?; class?OrdersList?extends?Component?{ 构造函数(道具){ ? ?超级(道具); } 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?>?; } } export?default?OrdersList?; 使用PHP RESTful PayPal Express Checkout PHP RESTful +社交登录API在Github上下载此项目 index.php <?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(); ...... ...... ...... ...... ?> 产品 function?products?(){? $ 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?products?”?; ? ?$ 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”}}‘?; } } 订单 function?orders?(){? $ 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?按订单??。OID?DESC?;?”?; ? ?$ 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 function?getProduct?(){? $ 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?*?FROM?products?WHERE?pid?=?: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 function?createOrder?(){? $ 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内部函数 function?paypalCheck?($ 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内部函数 function?updateOrder?($ pid?,$ payerID?,$ paymentID?,$ token?,$ uid?)? { if(paymentCheck($ paymentID)<?1?&&?$ uid?>?0){ ? ?$ db?=?getDB(); ? ?$ stmt?=?$ db?- >?prepare(“?INSERT?INTO?orders(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?*?FROM?orders?WHERE?paymentID?=?:paymentID?”); ? ?$ stmt?- >?bindParam(“paymentID”,$ paymentID,PDO?::?PARAM_STR); ? ?$ stmt?- >?execute(); ? ?$ count?=?$ stmt?- >?rowcount(); ? ?$ db?=?null?; ? ?返回?$ count?; } 运行此项目React $?git?clone?https://github.com/srinivastamada/react-login-paypal.git?$?cd?react-login-paypal$?yarn?start (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |