Due to work needs, we need to connect with foreign PayPal payment, and UNIAPP is used for the front-end framework. As we all know, the ecological environment of UNIAPP in China is ok, but when we go abroad, we know everything about it.

Uniapp Connects to Paypal for payment

First, the author went to uniapp’s plug-in market to search whether there are native Paypal plug-ins. The results show that there are still corresponding plug-ins as shown in the following figure. Here, not all of them are cut outlink The plugin market support is not very friendly and has its flaws. However, UniApp also supports the development of native plug-ins, but the development of plug-ins requires client-related skills, small white level is limited. Fortunately, officials offer the following methodsThe Web-View component we’re using here uses the Web version of Paypal to pay. Before using Web-view, let’s take a look at the two types of web-view in Uniapp: local resources and network resources. As the name implies, network resources are embedded third party web pages (this explanation is a little easy), so I need to make APP Paypal payment and make a web version seems a bit cumbersome. Fortunately, the introduction of local resources is officially supported.

Add the following two lines of code to the HTML file of the webView resource we created to integrate the smart Payment button of Paypal into your website.

< script SRC = "https://www.paypal.com/sdk/js?client-id=sb" > < / script > / / client - id is you apply for id in Paypal <script>paypal.Buttons().render('body'); </script>Copy the code

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, // Order number // custom_id: "CUst-highfashions ", amount: {value: Orderinfo.total_amount // Order amount}}],}); } }).render('body'); }Copy the code

Reference documentation

Paypal Development Document

Uniapp development document