??????React JS???PHP RESTful??????PayPal Express Checkout

Posted 2021-01-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了??????React JS???PHP RESTful??????PayPal Express Checkout相关的知识，希望对你有一定的参考价值。

??????????????? rop new XML efault pdo ????????? -- ??????

???????????????????????????????????????????????????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 >

???;

}

?????? ?????? ?????? ;

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 >

???;

}?????????;

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 >

< 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 >

???;

}

??????????????????; ???

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 ;

}

?????? {