PayPal支付-Reaact框架
admin
撰写于 2022年 01月 22 日

前情提要

之前用React框架做过一个网站的开发,客户是国外的公司,所以为迎合受众,支付模块添加了我国不常用但国外常用的Paypal。最近在整理文档,就把当时写的这篇经验总结再整合以下发布。

paypal开发者api文档源地址

总结

  • 简单做一个开发准备总结:

  申请一个PayPal商家账号。

  使用账号登录paypal,找到`sandbox`,可以看到默认的app和创建。

  可以创建一个用于本项目的app,获取`client_id`。至此,基本就可以开始着手开发了。

官方配置地址

  • 依赖。

    项目使用的是React框架开发,在项目中安装了`react-paypal-js`sdk

    react-paypal-js npm源地址

    react-paypal-js 使用文档

  • 配置。

  由于装了react-paypal-js,以下总结全是基于此依赖的配置及使用。

  在我们的支付账单页面,从依赖中引入PayPalScriptProvider,以标签的形式使用。标签的options属性,就是我们进行配置的位置。实例为:

import { PayPalScriptProvider } from "@paypal/react-paypal-js"
export default function PayPalPaymentElement() {
return (
"client_id": "开发准备中在sandbox拿到的client_id或者后端传过来的"
"currency": "收取的货币,如果不设置默认为USD"
}}>
/**这里为PayPalButtons载入的位置,PayPalButtons只能在此环境中执行*/

)
}

  注意:options属性,client_id是必须的。项目上线前将此换为真实商家账户client_id。

    如果货币不是美元,必须为其添加`currency`并指定币种。

官方javascript-sdk配置地址

  • PayPalButtons

    paypal.Buttons,实现点击打开paypal支付页面,以及集成支付。

    官方paypal.Buttons地址

    paypal-react-js提供了PayPalButtons快速集成。

    PayPalButtons地址

    关于PayPalButtons的样式等可参考官方地址根据需求修改。说一下几个常用属性。

    1.createOrder

    创建paypal支付订单时的方法,常用于支付集成。包括地址、总价等订单详情。

const createOrder = (data: any, actions: any) => {

return actions.order.create({
purchasee_units: [{
amount: {
value: 12,//总价金额
currency_code: "USD",//货币
breakdown: {
item_total: {...},//商品总价
shipping: {...},//运费
discount: {...},//折扣
},
shipping: {
name: {
full_name: "John Doe",//只支持full_name
},
type: "SHIPPING",//邮寄方式,可选值还有"PICKUP_IN_PERSON"
address: {...}//地址
}
}
}],
application_context: {
brand_name: "Sale",//品牌名
shipping_prefrence: "SET_PROVIDED_ADDRESS",//地址栏显示
},
payer: {...},//消费者信息
}).then((orderID: any) => {});
}; style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
/>

  `action.order.create({})`有四个options分别为`intent`、`payer`、`purchase_units`、`application_context`, createOrder官方文档地址

  注1:purchase_unit对象定义1 、purchase_unit对象定义2

  注2:application_context对象定义,实际开发中,这个对象的`brand_name`以及`shipping_perfrence`都是使用频率较高的。

  当有这样一个需求:配送地址由用户在网站上选择,paypal上仅展示地址不可更改,这时`shipping_perfence`是最好的实现方式(至少在我做的这个项目时是如此),要完成这个需求,我们仅需要进行以下集成:

application_context: {
shipping_prefrence: "SET_PROVIDED_ADDRESS"//由网站提供,用户可查看但无法更改
//"NO_SHIPPING": 一般用于售卖的数字等无实物产品,支付页面不显示地址栏
//"GET_FROM_FILE": 来源于用户在当前支付页面地址栏选中的地址
}

  注3:payer对象定义

2.onApprove

  当订单确认之后的回调

const onApprove = (data: any, actions: any) => {
return actions.order.capture().then(funtions (details: any) {})
} style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onApprove={onApprove}
/>

  onApprove官方地址

3.onCancel

  当关闭paypal支付页面,取消支付时的回调

const onCancel = (data: any) => {}

style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onCancel={onCancel}
/>

  onCancel官方地址

4.onError

  当执行出错时的回调

const onError = (err: any) => {}

style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onError={onError}
/>

  onError官方地址

5.其他...

关于使用PayPalButtons踩过的坑(或者说因缺乏经验而走的弯路),在这里单独列出来

问题描述:

  在支付页面,点击以西paypal支付按钮,再取消支付。

  在页面不刷新、路由不跳转的前提下更改商品数量(或者邮寄方式/地址,目的为与上次点击的支付详情区别开)。

  点击paypal支付按钮,此时paypal支付金额/地址与上一次点击的没有区别,也就是说订单详情没有更新。

检索问题&解决:

  一开始发现这个问题,第一反应是组件没有从新渲染,或者数据没有动态更新。顺着这个思路开始测试,结果发现组件及数据都有更新。啊这...

  会不会是PayPal的问题?发现有`onInit/onClick`方法,借助这个方法测试一下每次点击的时候打印传入的数据。结果居然每次点击的时候传入的数据都没有更新!!!我不理解啊组件和数据都更新了,为什么传入的数据没更新????

  会不会PayPalButtons没有重渲?在官方文档找了半天只找到一个render方法,但是我用sdk根本不用自己手写这个方法啊喂!!!

  尝试换一个文档在react-paypal-js里看看,可恶,居然一进来就看到一个`forceReRender`

  文档源地址 看看描述:用于重新重新渲染组件。当更改这个prop时,会销毁当前按钮并且以当前props的值重渲!!!这不就正是我要找的吗!用起来

style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
forceReRender={[
totalprice,
shippingAddress,
shippingPrice,
...
]}
/>

  再执行一次刚刚发现问题的步骤,问题解决!!

  果然,用什么东西就应该先看什么文档。

  总结来说,这个问题出现的原因是:支付页面不是分步执行,即没有一步一更新,这导致数据更新时,PayPalButtons未重渲。不清楚使用原生方法编写有没有这个问题,毕竟官方好像只有render方法(或者有别的只是我没找到),之后可以实践或者关注社区看看...

PayPal支付-Reaact框架的

PayPal支付-Reaact框架

前情提要

之前用React框架做过一个网站的开发,客户是国外的公司,所以为迎合受众,支付模块添加了我国不常用但国外常用的Paypal。最近在整理文档,就把当时写的这篇经验总结再整合以下发布。

paypal开发者api文档源地址

总结

  • 简单做一个开发准备总结:

  申请一个PayPal商家账号。

  使用账号登录paypal,找到`sandbox`,可以看到默认的app和创建。

  可以创建一个用于本项目的app,获取`client_id`。至此,基本就可以开始着手开发了。

官方配置地址

  • 依赖。

    项目使用的是React框架开发,在项目中安装了`react-paypal-js`sdk

    react-paypal-js npm源地址

    react-paypal-js 使用文档

  • 配置。

  由于装了react-paypal-js,以下总结全是基于此依赖的配置及使用。

  在我们的支付账单页面,从依赖中引入PayPalScriptProvider,以标签的形式使用。标签的options属性,就是我们进行配置的位置。实例为:

import { PayPalScriptProvider } from "@paypal/react-paypal-js"
export default function PayPalPaymentElement() {
return (
"client_id": "开发准备中在sandbox拿到的client_id或者后端传过来的"
"currency": "收取的货币,如果不设置默认为USD"
}}>
/**这里为PayPalButtons载入的位置,PayPalButtons只能在此环境中执行*/

)
}

  注意:options属性,client_id是必须的。项目上线前将此换为真实商家账户client_id。

    如果货币不是美元,必须为其添加`currency`并指定币种。

官方javascript-sdk配置地址

  • PayPalButtons

    paypal.Buttons,实现点击打开paypal支付页面,以及集成支付。

    官方paypal.Buttons地址

    paypal-react-js提供了PayPalButtons快速集成。

    PayPalButtons地址

    关于PayPalButtons的样式等可参考官方地址根据需求修改。说一下几个常用属性。

    1.createOrder

    创建paypal支付订单时的方法,常用于支付集成。包括地址、总价等订单详情。

const createOrder = (data: any, actions: any) => {

return actions.order.create({
purchasee_units: [{
amount: {
value: 12,//总价金额
currency_code: "USD",//货币
breakdown: {
item_total: {...},//商品总价
shipping: {...},//运费
discount: {...},//折扣
},
shipping: {
name: {
full_name: "John Doe",//只支持full_name
},
type: "SHIPPING",//邮寄方式,可选值还有"PICKUP_IN_PERSON"
address: {...}//地址
}
}
}],
application_context: {
brand_name: "Sale",//品牌名
shipping_prefrence: "SET_PROVIDED_ADDRESS",//地址栏显示
},
payer: {...},//消费者信息
}).then((orderID: any) => {});
}; style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
/>

  `action.order.create({})`有四个options分别为`intent`、`payer`、`purchase_units`、`application_context`, createOrder官方文档地址

  注1:purchase_unit对象定义1 、purchase_unit对象定义2

  注2:application_context对象定义,实际开发中,这个对象的`brand_name`以及`shipping_perfrence`都是使用频率较高的。

  当有这样一个需求:配送地址由用户在网站上选择,paypal上仅展示地址不可更改,这时`shipping_perfence`是最好的实现方式(至少在我做的这个项目时是如此),要完成这个需求,我们仅需要进行以下集成:

application_context: {
shipping_prefrence: "SET_PROVIDED_ADDRESS"//由网站提供,用户可查看但无法更改
//"NO_SHIPPING": 一般用于售卖的数字等无实物产品,支付页面不显示地址栏
//"GET_FROM_FILE": 来源于用户在当前支付页面地址栏选中的地址
}

  注3:payer对象定义

2.onApprove

  当订单确认之后的回调

const onApprove = (data: any, actions: any) => {
return actions.order.capture().then(funtions (details: any) {})
} style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onApprove={onApprove}
/>

  onApprove官方地址

3.onCancel

  当关闭paypal支付页面,取消支付时的回调

const onCancel = (data: any) => {}

style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onCancel={onCancel}
/>

  onCancel官方地址

4.onError

  当执行出错时的回调

const onError = (err: any) => {}

style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onError={onError}
/>

  onError官方地址

5.其他...

关于使用PayPalButtons踩过的坑(或者说因缺乏经验而走的弯路),在这里单独列出来

问题描述:

  在支付页面,点击以西paypal支付按钮,再取消支付。

  在页面不刷新、路由不跳转的前提下更改商品数量(或者邮寄方式/地址,目的为与上次点击的支付详情区别开)。

  点击paypal支付按钮,此时paypal支付金额/地址与上一次点击的没有区别,也就是说订单详情没有更新。

检索问题&解决:

  一开始发现这个问题,第一反应是组件没有从新渲染,或者数据没有动态更新。顺着这个思路开始测试,结果发现组件及数据都有更新。啊这...

  会不会是PayPal的问题?发现有`onInit/onClick`方法,借助这个方法测试一下每次点击的时候打印传入的数据。结果居然每次点击的时候传入的数据都没有更新!!!我不理解啊组件和数据都更新了,为什么传入的数据没更新????

  会不会PayPalButtons没有重渲?在官方文档找了半天只找到一个render方法,但是我用sdk根本不用自己手写这个方法啊喂!!!

  尝试换一个文档在react-paypal-js里看看,可恶,居然一进来就看到一个`forceReRender`

  文档源地址 看看描述:用于重新重新渲染组件。当更改这个prop时,会销毁当前按钮并且以当前props的值重渲!!!这不就正是我要找的吗!用起来

style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
forceReRender={[
totalprice,
shippingAddress,
shippingPrice,
...
]}
/>

  再执行一次刚刚发现问题的步骤,问题解决!!

  果然,用什么东西就应该先看什么文档。

  总结来说,这个问题出现的原因是:支付页面不是分步执行,即没有一步一更新,这导致数据更新时,PayPalButtons未重渲。不清楚使用原生方法编写有没有这个问题,毕竟官方好像只有render方法(或者有别的只是我没找到),之后可以实践或者关注社区看看...

PayPal支付-Reaact框架的

赞 (0)

猜您想看

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论