paypal html5 支付,PayPal H5支付组件
//- Title: H5 PayPal 支付 组件
.paypal.flex-cc
#loading
van-loading#loading(size='36' type='spinner' color='#666')
#paypal-container
.money
span £
span {{$route.query.totalAmount}}
#paypal-payment-button
import Cookies from 'js-cookie'
export default {
name: 'paypal',
components: {},
props: {},
data() {
return {}
},
created() {
// 创建PayPal支付
this.createPayPal()
},
methods: {
// 创建PayPal支付
createPayPal() {
// clientId 客户端ID & currency 支付货币种类
const { clientId, currency } = this.$route.query
// 创建script标签,引入PayPal SDK文件
let script = document.createElement('script')
script.type = 'text/javascript'
// clientId
script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&disable-funding=credit,card¤cy=${currency}`
// 添加元素到head
document.getElementsByTagName('head')[0].appendChild(script)
// 引入成功
script.onload = () => {
console.log('js资源已加载成功了')
// 创建支付按钮
this.createPayPalButton()
}
// 引入失败
script.onerror = () => {
console.log('js资源加载失败了,返回原生')
}
},
// 创建支付按钮
createPayPalButton() {
const BASE_API_URL = process.env.VUE_APP_BASE_API // 请求根路径
const Authorization = Cookies.get('Authorization')
const { payId } = this.$route.query
// 创建script标签
let script = document.createElement('script')
script.type = 'text/javascript'
script.text = `
paypal.Buttons({
style : {
layout: 'vertical',
color: 'black',
shape: 'rect',
label: 'checkout',
tagline: false
},
onInit: () => {
// 支付按钮加载完成 通知原生关闭loading
console.log('--------1.支付按钮加载完成 关闭loading--------')
// 自动点击 执行支付
console.log('--------2.自动点击 执行支付--------')
// 如果按钮获取到 就 自动执行点击 否则显示按钮
const paypalButton = window.frames[1].document.querySelector('.paypal-button')
if (paypalButton) paypalButton.click()
else {
document.querySelector('#paypal-container').style.display = 'block'
document.querySelector('#loading').style.display = 'none'
}
},
createOrder: function (data, actions) {
return fetch('${BASE_API_URL}api/payment/paypal/v2/create', {
method: 'post',
headers: {
'content-type': 'application/json',
'Authorization': '${Authorization}',
},
body: JSON.stringify({
payId: '${payId}',
})
}).then(function (res) {
return res.json();
}).then(function (data) {
console.log('--------3. 获取支付ID-------- payId: ', data.data)
if (!data.data) alert('retCode: ' + data.retCode + ' message: ' + data.message)
else {
document.querySelector('#paypal-container').style.display = 'none'
document.querySelector('#loading').style.display = 'block'
}
return data.data;
});
},
onApprove: function (data, actions) {
return fetch('${BASE_API_URL}api/payment/paypal/v2/capture', {
method: 'POST',
headers: {
'content-type': 'application/json',
'Authorization': '${Authorization}',
},
body: JSON.stringify({
orderID: data.orderID,
})
}).then(function (res) {
return res.json();
}).then(function (details) {
if (details.error === 'INSTRUMENT_DECLINED') {
return actions.restart();
}
console.log("--------4.创建订单Success--------")
console.log("--------5.打开Loading--------")
return fetch('${BASE_API_URL}api/payment/paypal/v2/order', {
method: 'post',
headers: {
'content-type': 'application/json',
'Authorization': '${Authorization}',
},
body: JSON.stringify({
orderID: data.orderID
})
}).then(function (res) {
return res.json();
}).then(function (ret) {
console.log(ret.retCode);
if (ret.retCode != 200) {
// 支付失败,跳转到支付失败页 todo
console.log('--------6.支付失败 返回原生--------')
return;
}
// 跳转到支付成功页 todo
console.log('--------6.支付成功 返回原生--------')
});
});
},
onCancel: function (data) {
// 跳回原生 todo
console.log('--------7.点击取消 返回原生--------')
}
}).render('#paypal-payment-button')
`
// 引入script
document.getElementsByTagName('head')[0].appendChild(script)
},
},
}
.paypal {
width 100%
height 100vh
flex-direction column
background #F5F5F5
}
#paypal-container {
width calc(100% - 40px)
display none
.money {
font-size 26px
font-weight 700
text-align center
margin-bottom 150px
span:last-child {
font-size 40px
}
}
}
paypal html5 支付,PayPal H5支付组件相关推荐
- php接入微信支付,扫码支付和H5支付(非微信浏览器),基于thinkPHP框架 WeChatDeveloper支付类包 踩坑指南
此文章入选<PHP领域内容榜>第4名 文章介绍 本文主要介绍通过thinkPHP5和第三方支付类包(WeChatDeveloper)实现快速接入微信扫码支付和微信H5手机网站支付(非微信浏 ...
- 小程序支付及H5支付前端代码小结
小程序支付和H5支付前端都不需要引入其他的js , 只需要后台将相关的参数 ( timeStamp: '', nonceStr: '', package: '', signType: 'MD5', p ...
- Spring Boot入门教程(四十二):微信支付集成-H5支付
分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 一:开发文档 场景介绍 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发 ...
- php h5微信支付和app微信支付区别,关于微信公众号支付 微信H5支付和微信APP支付的问题 (PHP)TP+VUE...
话不多说 直接上源码 在写支付之前一定要确定好微信要求配置的相关回调域名 安全支付域名还有杂七杂八的哪些地址都准备好了 要不然是没法实现的 微信公众平台 微信商户平台 还有开发者平台 什么的 这点比较 ...
- 微信支付,JSAPI支付,APP支付,H5支付,Native支付,小程序支付功能详情以及回调处理
一.支付相关文档地址 支付wiki:https://pay.weixin.qq.com/wiki/doc/apiv3/index.shtml 支付api: https://pay.weixin.qq. ...
- 微信支付,H5支付随笔
微信支付,H5支付 一,微信小程序 1,wx.login 获取code 2,code 传给后端 3,后端拿code可获取到openid 4,后端根据openid产生5个加密参数返给前端 5,前端wx. ...
- 微信支付—微信H5支付「PC端扫码支付」
前言 微信支付-微信H5外部浏览器支付 微信支付-微信H5内部浏览器支付 微信支付-PC端扫码支付「本文」 本篇是微信支付系列的第三篇,PC端扫码支付. 开发环境:Java + SpringBoot ...
- 微信支付—微信H5支付「微信内部浏览器」
前言 微信支付-微信H5外部浏览器支付 微信支付-微信H5内部浏览器支付「本文」 微信支付-PC端扫码支付「待写」 本篇是微信支付系列的第二篇.微信H5内部浏览器支付,关于微信H5外部浏览器唤起微信A ...
- 微信支付—微信H5支付「非微信内部浏览器-QQ/UC浏览器等」
前言 微信支付-微信H5外部浏览器支付「本文」 微信H5内部浏览器支付「待写」 PC端扫码支付「待写」 一直计划着写一写微信支付相关的文章,希望能加深一下自己的印象,拖了一天又一天- 最近终于空出时间 ...
- 微信h5支付 ajax,H5支付跳转问题
commodityId:21874 skuId:42094 type:1 num:1 oid:null _request:Current HttpServletRequest 2019-06-24 1 ...
最新文章
- poj1789(prim)
- 数据库mysql表怎么设置外键_如何设置数据库中的外键
- Atitti dbutil获取多个返回结果集的解决
- c语言 方程改main的值_c语言main函数里的参数argv和argc解析
- 4599 的 iPhone 11,拼多多如何从「真香」到「更香」
- StringUtils,FileUtils,PropertiesUtils,DataBaseUtils
- Centos7安装netcat运算sparkStreaming进行单词统计
- numpy—np.random.multivariate_normal
- 设计了一个JavaScript的源代码混淆器
- 随机森林模型及案例(Python)
- 那些好用的 GIF 录制工具
- 闪迪u盘量产工具万能版_加密保护,更高性能!闪迪酷奂CZ74 U盘新品果然够惊艳...
- 如何快速给Excel文件减肥或者减小文件体积
- Day25|组合板子|216. 组合总和 III| 17. 电话号码的字母组合
- C++ 域名转IP地址
- IEEE xplore论文免费下载
- 软件设计能力提升之设计匠艺
- 2019年终职场盘点:如何用5级管理法,经营好自己最重要的资产?
- xmind思维导图的mac版的安装破解
- 黑客入侵应急分析手工排查
热门文章
- Android TTS(TextToSpeech)实践
- oracle 卸载(手动,无universal installer)
- [ERP/鼎捷E10][销售分销]发出商品余额表取数逻辑及SQL
- 当浏览器版本过低时提示升级浏览器
- html验证码谷歌浏览器不显示,网页不显示验证码是怎么回事?
- 基于multisim14的函数信号发生器仿真
- Python 中 appium 环境搭建
- unity 导入STL格式模型(STL 文本ASCII码格式文件)
- PCL .stl格式转成.pcd格式点云文件
- Matlab 如何实现身份证号码快速识别