paypal html5 支付,uniapp 对接 paypal支付 （h5，app端）

由于工作需要,需要对接国外的PayPal支付，前端框架用的又是UNIAPP,众所周知UNIAPP国内的生态环境还可以，但是到了国外嘛  嘿嘿  懂得都懂。

uniapp app对接Paypal支付

作者先去uniapp的插件市场搜索了一下有没有Paypal原生插件,结果如下图还是有对应的插件,这里就不全部截出来了感兴趣的可以自己去看看

插件市场支持度不是很友好,而且还存在缺陷。但是uniapp也支持自己开发原生插件,但是开发插件需要客户端相关的技能,小白水平有限。还好官方提供了下面几种方法

我们这里用的web-view组件里使用Paypal的web版支付。

在使用web-view之前我们先了解一下在uniapp里web-view是分本地资源和网络资源两种。

网络资源顾名思义就是内嵌第三方的网页(这个解释有点浅显了)那我要弄APP的Paypal支付还要弄一个网页版好像有点繁琐。好在官方支持引入本地资源。

在我们创建好的webview资源的html文件里添加下面两句代码是可以在你的网站里面集成Paypal的智能支付按钮。  //client-id 是你在Paypal申请的id

paypal.Buttons().render('body');复制代码

var script = document.createElement("script");

if (type == 0) {

script.src = url;

} else {

script.src = getQueryVariable('origin') + url;

}

document.body.appendChild(script);

script.onload = script.onreadystatechange = function() {

paypal.Buttons({

createOrder: function(data, actions) {

// This function sets up the details of the transaction, including the amount and line item details.

return actions.order.create({

intent: "CAPTURE", //

application_context: {

user_action: "CONTINUE",

brand_name: "nicefood",

locale: "en-US",

landing_page: "BILLING",

// shipping_preference: "SET_PROVIDED_ADDRESS"

},

purchase_units: [{

reference_id: "PUHF",

// soft_descriptor: "HighFashions",

invoice_id: orderInfo.master_order_sn, // 订单号

// custom_id: "CUST-HighFashions",

amount: {

value: orderInfo.total_amount //订单金额

}

}],

});

}

}).render('body');

}复制代码