使用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
數據庫設計
要構建PayPal結賬訂購系統，您必須創建以下表格。社交登錄用戶表已出現在上一篇文章中。
產品
產品表包含所有產品詳細信息。您可以根據需要擴展此表。
CREATE TABLE 產品（
pid int AUTO_INCREMENT PRIMARY KEY，
產品varchar（300），
product_image varchar（200），
價格浮動，
貨幣varchar（10）
）;
訂單
訂單表包含PayPal付款ID的所有用戶訂單詳細信息。
CREATE TABLE 命令（
oid int AUTO_INCREMENT PRIMARY KEY，
pid_fk int，
uid_fk int，
payerID varchar（500），
paymentID varchar（500），
token varchar（500），
created int（11）
）;
Home.js
讓我們繼續這篇文章。這裏存在用戶會話存儲數據，用setState存儲數據。使用用戶ID和令牌，您可以訪問其他信息，如產品和訂單詳細信息。
從‘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 props constuctor 調用的。onClick按鈕this.props.checkOut指向父函數，您將在下一步中找到它。
從“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提取提供程序
導入Title和ProductList組件。函數getProducts（）根據登錄用戶ID和令牌從產品API獲取數據。
從“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頁面
您必須安裝PayPal結賬組件才能連接PayPal API。
為React安裝PayPal Express Checkout插件。
$ npm install react-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” } /> ;
}
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
Checkout頁面，用於顯示有關所選產品的更多詳細信息。導入PayPal組件並設置屬性值，如產品值，pid和userData。
從“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
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 ;
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
這個項目是使用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（）;
......
......
......
......
？>
產品
獲取產品表的產品詳細信息。如果你想要你可以擴展添加分頁。
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”}}‘ ;
}
}
訂單
基於帖子輸入uid的用戶訂單詳細信息。
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
根據產品ID獲取單個產品詳細信息。
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
創建成功付款的訂單。這將調用內部CURL動作函數paypalCheck。
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內部函數
使用CURL方法驗證PayPal轉換以便更好地了解使用PHP和MySQL檢查PayPal Express Checkout。
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
使用React JS和PHP RESTful進行PayPal Express Checkout