Vue3+Ts:实现paypal按钮

Vue3+Ts:实现paypal按钮

    • 一、前端页面按钮实现
        • 第一步:下载paypal.js依赖
        • 第二步:引入要使用的vue页面,并调用。
    • 二、实现逻辑研究
        • 第一点:了解下Buttons自带的style属性
        • 第二点:了解下Buttons自带的处理方法
        • 第三点:loadScript的参数(这里主看PayPalScriptOptions)

前言:到了让我激动人心的时刻,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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646923.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos7配置Google身份认证登录

1.手机app下载谷歌身份验证器 2.配置本地yum源 yum -y install git automake libtool pam-devel bzip2 wget vim ntpdate 3.校对时间 timedatectl set-timezone Asia/Shanghai ntpdate cn.pool.ntp.org 4.下载工具包 wget http://repository.timesys.com/buildsources/l/…

IP组播地址

目录 1.硬件组播 2.因特网范围内的组播 IP组播地址让源设备能够将分组发送给一组设备。属于多播组的设备将被分配一个组播组IP地址 组播地址范围为224.0.0.0~239.255.255.255(D类地址)&#xff0c;一个D类地址表示一个组播组。只能用作分组的目标地址。源地址总是为单播地址…

丝路昆仑文物展:启用网关,文物预防性保护设备数据无缝对接平台

一、多功能网关数据无缝流转 近日&#xff0c;“丝路昆仑——新疆文物精品展”在天津博物馆开展。展览分为三部分&#xff1a;“丝路前奏”、“丝路华响”和“丝路梵音”&#xff0c;前两部分是以张骞凿通西域前后的中原西域两地文化交流&#xff0c;第三部分则讲述了佛教沿西…

人工智能数学验证工具LEAN4【入门介绍5】推理世界-如何使用和证明推理性的命题

视频链接&#xff1a; 人工智能数学验证工具LEAN4【入门介绍5】推理世界-如何使用和证明推理性的命题_哔哩哔哩_bilibili import Game.Levels.Implication.L10one_ne_zero World "Implication" Level 11 Title "2 2 ≠ 5" LemmaTab "Peano" …

Maven排除依赖 exclusions

排除依赖 exclusions 间接依赖是可以通过传递性依赖机制引入到当前项目中&#xff0c;而有时候第三方组件B的C依赖由于版本(1.0)过低存在安全漏洞。我们期望能够将该间接依赖直接剔除出去&#xff0c;不通过传递依赖的形式引入到项目中。这时即可通过exclusions元素实现&#x…

【并发】什么是 Future?

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 关键特性和操作包括&#xff1a; 提交任务&#xff1a; 查询完成状态&#xff1a; 等待结果&#xff1a; 取消任务&#xff1a…

golang整合rabbitmq,创建交换机并绑定队列

1,如果要开发消息队列,需要创建交换机和队列,通常有2中方式创建,1种是在面板直接创建 2,第二种就是在代码中创建,这里 展示的是go语言代码中创建rabbitmq package mainimport ("fmt""log""github.com/streadway/amqp" )func main() {// 连接R…

年销180万辆的特斯拉,护城河却在崩塌

文&#xff5c;刘俊宏 2023年率先开启汽车价格战的马斯克&#xff0c;伤敌一百自损八千&#xff1f; 在1月25日的特斯拉2023Q4财报电话会上&#xff0c;特斯拉CEO马斯克对中国公司的竞争力如此感叹道&#xff0c;“要是没有贸易壁垒&#xff0c;他们将摧毁&#xff08;destroy…

2024年华为OD机试真题-执行时长-Python-OD统一考试(C卷)

题目描述&#xff1a; 为了充分发挥GPU算力&#xff0c;需要尽可能多的将任务交给GPU执行&#xff0c;现在有一个任务数组&#xff0c;数组元素表示在这1秒内新增的任务个数且每秒都有新增任务&#xff0c;假设GPU最多一次执行n个任务&#xff0c;一次执行耗时1秒&#xff0c;在…

Jsch版本升级引发的血案

背景 我们项目需要通过SFTP对接大量上下游获取数据&#xff0c;但是由于某一个上游需要更换AWS Transfer Family作为他们的SFTP服务&#xff0c;他们的SFTP服务使用更高版本的OpenSSH服务&#xff0c;原有的一些密钥算法已经不再支持&#xff0c;我们目前使用的Jcraft公司发布…

jsx中使用插槽

1. jsx语法中使用插槽 以elementplus ElPopconfirm 为例 <el-popconfirm title"Are you sure to delete this?"><template #reference><el-button>Delete</el-button></template></el-popconfirm>使用 slots: {default: (dat…

SpringBlade微服务开发平台

采用前后端分离的模式&#xff0c;前端开源两个框架&#xff1a;Sword (基于 React、Ant Design)、Saber (基于 Vue、Element-UI)后端采用SpringCloud全家桶&#xff0c;并同时对其基础组件做了高度的封装&#xff0c;单独开源出一个框架&#xff1a;BladeToolBladeTool已推送至…

linux创建临时大文件

以下几种方法在Linux系统上创建一个1GB大小的大文件&#xff1a; 1、使用dd命令 dd if/dev/zero of/path/to/your/file bs1M count1024这个命令会从/dev/zero设备读取数据&#xff08;即空数据&#xff09;&#xff0c;并将其写入指定的文件中。bs参数指定了每次写入的块大小…

Git--创建仓库(1)

git init Git 使用 git init 命令来初始化一个 Git 仓库&#xff0c;Git 的很多命令都需要在 Git 的仓库中运行&#xff0c;所以 git init 是使用 Git 的第一个命令。 在执行完成 git init 命令后&#xff0c;Git 仓库会生成一个 .git 目录&#xff0c;该目录包含了资源的所有…

通俗易懂理解SegNet语义分割模型

重要说明&#xff1a;本文从网上资料整理而来&#xff0c;仅记录博主学习相关知识点的过程&#xff0c;侵删。 一、参考资料 深度学习之图像分割—— SegNet基本思想和网络结构以及论文补充 一文带你读懂 SegNet&#xff08;语义分割&#xff09; 二、相关介绍 1. 上采样(…

CPP中的异常处理机制,抛出异常时几种方法性能的比较,以及异常处理和继承配合调用多态的一个小项目(顺便贴一个关于win上clion占用内存过高的解决方法)

目录 写在前面 为什么需要异常处理机制&#xff1f; 异常处理机制的方法 异常接口的声明 异常类型的生命周期以及不同类型异常的测试案例 异常处理与继承 异常处理的基本思想 致谢 写在前面 拖更了几天&#xff0c;但是其实博主一直都在学习的&#xff0c;只是没有之前…

vue3中使用markdown编辑器

首先安装 npm i md-editor-v3 Setup 模板 <template><MdEditor v-model"text" /> </template><script setup> import { ref } from vue; import { MdEditor } from md-editor-v3; import md-editor-v3/lib/style.css;const text ref(Hell…

R语言-检验正态性

1.为什么要检验正态性 首先需要明确正态性与正态分布是有区别的&#xff0c;正态分布&#xff08;标准分布&#xff09;是统计数据的分布方式&#xff0c;是个钟形曲线&#xff0c;已平均值为对称轴&#xff0c;数据在对称轴两侧对称分布。正态性是检验实际数据与标准正态分布…

消息中间件之八股面试回答篇:一、问题概览+MQ的应用场景+RabbitMQ如何保证消息不丢失(生产者确认机制、持久化、消费者确认机制)+回答模板

问题概览 目前主流的消息队列技术&#xff08;MQ技术&#xff09;分为RabbitMQ和Kafka&#xff0c;其中深蓝色为只要是MQ&#xff0c;一般都会问到的问题。浅蓝色是针对RabbitMQ的特性的问题。蓝紫色为针对Kafka的特性的问题。 MQ的应用场景 MQ主要提供的功能为&#xff1a;异…

Linux shell编程学习笔记42:hdparm命令

ChatGPT 和文心一言哪个更好用&#xff1f; 从智能回复、语言准确性、知识库丰富度等方面比较&#xff0c;两大AI助手哪个更胜一筹&#xff1f;快来和我们分享一下你的看法吧~ 0 前言 获取硬盘序列号是信息资产管理和信息安全检测中经常要收集的信息&#xff0c;对于Linux来说…