Vue3+Ts：实现paypal按钮

前言：到了让我激动人心的时刻，paypal支付按钮的前端处理（唯一不足之处是，没有后端处理，有时间我研究下）

先放代码如何实现，再深研究一下逻辑。

一、前端页面按钮实现

第一步：下载paypal.js依赖

npm install @paypal/paypal-js

第二步：引入要使用的vue页面，并调用。

<template>
<div id="paypal-buttons"></div>
</template>
<script lang="ts">
import { loadScript } from "@paypal/paypal-js";
import { nextTick, defineComponent, onMounted } from 'vue'export 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("url"+checkedValueRef.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