Vue3+Ts:实现paypal按钮

发布时间:2024年01月22日


前言:到了让我激动人心的时刻,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选中购买的id
	                  return 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?: PromiseConstructor

export interface PayPalScriptOptions
    extends 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 dataMerchantId
    merchantId?: string[] | string;
    vault?: boolean | string;
}

参考网址:https://developer.paypal.com/sdk/js/configuration/#link-queryparameters

文章来源:https://blog.csdn.net/weixin_45594156/article/details/135750826
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。