建材网站建设 南宁,php做听歌网站,网站程序 wap pc 同步,免费建站 永久Vue3Ts#xff1a;实现paypal按钮 一、前端页面按钮实现第一步#xff1a;下载paypal.js依赖第二步#xff1a;引入要使用的vue页面#xff0c;并调用。 二、实现逻辑研究第一点#xff1a;了解下Buttons自带的style属性第二点#xff1a;了解下Buttons自带的处理方法第三… Vue3Ts实现paypal按钮 一、前端页面按钮实现第一步下载paypal.js依赖第二步引入要使用的vue页面并调用。 二、实现逻辑研究第一点了解下Buttons自带的style属性第二点了解下Buttons自带的处理方法第三点loadScript的参数这里主看PayPalScriptOptions 前言到了让我激动人心的时刻paypal支付按钮的前端处理唯一不足之处是没有后端处理有时间我研究下 先放代码如何实现再深研究一下逻辑。
一、前端页面按钮实现
第一步下载paypal.js依赖
npm install paypal/paypal-js第二步引入要使用的vue页面并调用。
template
div idpaypal-buttons/div
/template
script langts
import { loadScript } from paypal/paypal-js;
import { nextTick, defineComponent, onMounted } from vueexport default defineComponent({setup(){ onMounted( async(){await 页面加载数据方法()await nextTick((){constructButton()})})const constructButton async (){await loadScript({clientId: clientId,disableFunding:[credit,card] // 禁止出现的按钮}).then((paypal) {if (paypal?.Buttons) {paypal.Buttons({style: { // 按钮样式自定义height: 40, },createOrder: (data, actions) {//调起创建支付订单的接口checkedValueRef.value选中购买的idreturn fetch(urlcheckedValueRef.value,{method: get, headers:{Authorization : userStore.getToken()}}).then((res) res.json()).then((json) {if(!json.msg){if(checkedValueRef.value null){message.error(请勾选)} }return json.msg}).catch((err){console.log(err)})},onApprove: (data, actions) {// 获得订单id去付款接口return fetch(url?orderId data.orderID,{method: get, headers:{Authorization : userStore.getToken()}}).then((res) res.json()).then((json) {if(json.code 0){checkedValueRef.value null// 购买成功}else{// 购买失败}})},onCancel(data){console.log(取消);}}).render(#paypal-buttons).catch((error) {console.error(failed to render the PayPal Buttons, error);});}}).catch((error) {console.error(failed to load the PayPal JS SDK script, error);});} }
})
/script依赖地址
二、实现逻辑研究
其实上面这些就已经能满足操作了但是我们还需要了解三点细节
第一点了解下Buttons自带的style属性 style?: {color?: gold | blue | silver | white | black; // 按钮颜色// 该按钮的默认最大宽度为750px但您可以将按钮放大。//将style.disableMaxWidth设置为true。然后更改容器级别的最大宽度值。disableMaxWidth?: boolean;// 默认情况下按钮会根据其容器元素的大小进行调整。// 要自定义按钮高度请将style.height选项设置为25到55之间的值。// 您的按钮容器元素必须足够宽以容纳水平支付按钮。height?: number;label?: // 将style.label选项设置为以下值之一| paypal| checkout| buynow| pay| installment| subscribe| donate;// 设置style.layout选项以确定多个按钮可用时的按钮布局垂直|水平layout?: vertical | horizontal; shape?: rect | pill; // 按钮形状矩形/圆矩形tagline?: boolean;};可以参考网址 https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/
第二点了解下Buttons自带的处理方法
createOrder //当买家点击PayPal按钮时会调用此参数该按钮会启动PayPal Checkout窗口买家在PayPal.com网站上登录并批准交易。
createSubscription
onApprove // 从交易中获取资金并向买家显示消息让他们知道交易成功。
onCancel // 当买家取消付款时他们通常会返回到父页面。您可以使用onCancel功能显示取消页面或返回购物车。
onError
onInit/onClick
onShippingChange
onShippingAddressChange
onShippingOptionsChange这里我只介绍用到的方法 网址参考https://developer.paypal.com/docs/business/checkout/reference/style-guide/#customize-the-payment-buttons
第三点loadScript的参数这里主看PayPalScriptOptions
按钮个数展示主要是这里设置 options: PayPalScriptOptions,PromisePonyfill?: PromiseConstructorexport interface PayPalScriptOptionsextends PayPalScriptQueryParameters,PayPalScriptDataAttributes,ScriptAttributes {sdkBaseUrl?: string;
}interface PayPalScriptQueryParameters {buyerCountry?: string;clientId: string;commit?: boolean;components?: string[] | string;currency?: string;debug?: boolean | string;// loadScript() supports an array and will convert it// to the correct disable-funding and enable-funding string values// disableFunding被禁用的交易资金来源。您通过的任何资金来源都不会在结帐时显示为按钮。默认情况下资金来源资格是根据各种因素确定的。不要使用此查询参数禁用信用卡和借记卡的高级支付。disableFunding?: string[] | string; enableFunding?: string[] | string;integrationDate?: string;intent?: string;locale?: string;// loadScript() supports an array for merchantId, even though// merchant-id technically may not contain multiple values.// For an array with a length of 1 it automatically sets// merchantId to * and moves the actual values to dataMerchantIdmerchantId?: string[] | string;vault?: boolean | string;
}
参考网址https://developer.paypal.com/sdk/js/configuration/#link-queryparameters
