前情提要

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

paypal开发者api文档源地址

总结

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

  申请一个PayPal商家账号。

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

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

官方配置地址

  • 配置。

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

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

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

  注意: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) => {});
}; <PayPalButtons
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) {})
} <PayPalButtons
style={{
layout: "horizontal",
shape: "rect",
}}
createOrder={createOrder}
onApprove={onApprove}
/>

  onApprove官方地址

3.onCancel

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

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

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

  onCancel官方地址

4.onError

  当执行出错时的回调

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

<PayPalButtons
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的值重渲!!!这不就正是我要找的吗!用起来

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

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

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

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

PayPal支付-Reaact框架的更多相关文章

  1. Paypal支付小记

    Paypal支付小记 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...

  2. 网页集成paypal支付

    在网站中集成paypal支付有两种方式: 1.通过paypal账户的按钮创建工具 进入paypal 商户账号,选择创建按钮工具,有包括添加到购物车.购买.租用三类按钮. 之后会生成一段代码,直接将代码 ...

  3. Android下集成Paypal支付

    近期项目需要研究paypal支付,官网上的指导写的过于复杂,可能是老外的思维和中国人不一样吧.难得是发现下面这篇文章: http://www.androidhive.info/2015/02/andr ...

  4. 集成paypal支付

    https://developer.paypal.com cocoapods 管理 引入 pod 'PayPal-iOS-SDK' 1.在appdelegate #import <PayPalM ...

  5. ecstore使用paypal支付显示不支持此支付

    问题描述: ecstore使用paypal支付,下单结算时显示不支持此支付. 问题和代码分析: 1.首先必须要保证默认货币是paypal支持的货币,paypal目前支付 ["supportC ...

  6. Paypal 支付功能的 C# .NET / JS 实现

    说明 最近用到了 Paypal 支付功能,英语一般般的我也不得不硬着头皮踩一踩这样的坑.经过近乎半个月的作,终于实现了简单的支付功能,那么首先就说说使用 Paypal 必定要知道的几点(当前日期 20 ...

  7. 最详细的 paypal 支付接口开发--Java版

    做全球性的支付,选用paypal!为什么选择paypal? 因为paypal是目前全球最大的在线支付工具,就像国内的支付宝一样,是一个基于买卖双方的第三方平台.买家只需知道你的paypal账号,即可在 ...

  8. Paypal支付

    <!--Paypal支付数据开始--> <input type="hidden" name="charset" value="utf ...

  9. java实现网站paypal支付功能并且异步修改订单的状态

    java实现网站paypal支付功能并且异步修改订单的状态:步骤如下 第一步:去paypal的官网https://www.paypal.com注册一个个人账号,在创建沙箱测试账号时需要用到 第二步:p ...

随机推荐

  1. Python的 垃圾回收机制

    垃圾回收 1. 小整数对象池 整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池, 避免为整数频繁申请和销毁内存空间. Python 对小整数的定义是 [-5, 257) 这些整 ...

  2. SQL:利用多表更新优化子查询

    原SQL: update bi_data.order_list_wxset is_start='1',proc_time=now()where 1=1and is_end='0' and 交易时间&l ...

  3. centos7使用Dockerfile运行mysql库并初始化数据

    Dockerfile文件(文件名一定要这个) FROM mysql:5.7 WORKDIR /docker-entrypoint-initdb.d ENV LANG=C.UTF-8 ADD test. ...

  4. centos使用docker安装redis ,并设置外网访问

    拉取镜像 docker pull redis:4.0 在主机/data/redis/conf目录下新建redis.conf文件vim /data/redis/conf/redis.conf # Red ...

  5. JAVA携带参数(带有请求参数,请求头参数)直接发送POST请求

    <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...

  6. 【剑指Offer】调整数组顺序使奇数位于偶数前面 解题报告(Python)

    [牛客网]调整数组顺序使奇数位于偶数前面 解题报告 标签(空格分隔): 牛客网 题目地址:https://www.nowcoder.com/questionTerminal/beb5aa231adc4 ...

  7. 【LeetCode】60. Permutation Sequence 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  8. 1198 - Karate Competition

    1198 - Karate Competition    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  9. 据库自增ID用完

    Mysql里int类型是4个字节,如果有符号位的话就是[-2^31,2^31-1],无符号位的话最大值就是2^32-1,也就是4294967295. 自增ID达到上限用完了之后,分为两种情况: 如果设 ...

  10. IMPROVING ADVERSARIAL ROBUSTNESS REQUIRES REVISITING MISCLASSIFIED EXAMPLES

    目录 概 主要内容 符号 MART Wang Y, Zou D, Yi J, et al. Improving Adversarial Robustness Requires Revisiting M ...