uniapp Stripe 支付

引入 Stripe  

npm install @stripe/stripe-js

import { loadStripe } from '@stripe/stripe-js';

Stripe 提供两种不同类型组件

Payment Element 和  Card Element:如果你使用的是 Payment Element,它是一个更高级别的组件,能够自动处理多种支付方式(如信用卡、Apple Pay 等),并且不需要你手动指定 payment_method 对象。而 Card Element 则是专门用于收集信用卡信息的低级别组件

 这里用的是 Payment Element Stripe 自动处理支付方式的选择,并且不要手动构造 payment_method 对象

import { loadStripe } from '@stripe/stripe-js';export default {data() {return {stripe: null,elements: null,paymentElement: null,clientSecret: ''  // 调用后端创建订单接口返回的参数};},async mounted() {uni.showLoading({title: 'loading...'});this.stripe = await loadStripe(''); // 替换为你的 Publishable Keythis.setupElements()},methods: {setupElements(){if (!this.stripe || !this.clientSecret) return;this.elements = this.stripe.elements({clientSecret: this.clientSecret,})this.paymentElement= this.elements.create('payment');this.paymentElement.mount('#payment-element');uni.hideLoading()},async handleSubmit() {if (!this.stripe || !this.paymentElement || !this.clientSecret) {//  自己封装的提示方法this.$Common.showToast('Payment setup is incomplete');return;}uni.showLoading({title: 'loading...'});const {error,paymentIntent} = await this.stripe.confirmPayment({elements: this.elements,confirmParams: {// 用户完成支付后的重定向 URLreturn_url: 'http://123:8080/#/pages/pay/orderComplete',},});if (error) {console.error('Error:', error.message);this.$Common.showToast(error.message);uni.hideLoading()} else {if (paymentIntent.status === 'succeeded') {uni.hideLoading()this.$Common.showToast('Payment succeeded!');// 这里可以根据业务逻辑跳转到成功页面或执行其他操作}}},}
};

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

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

相关文章

Visual Studio 2022安装教程

1、下载网址 Visual Studio 2022 IDE安装网址借助 Visual Studio 设计,具有自动完成、构建、调试、测试功能的代码将与 Git 管理和云部署融为一体。https://visualstudio.microsoft.com/zh-hans/vs/ 点击图片所示 双击运行 2、安装 点击C桌面开发(右边…

php 根据sdk重命名华为云obs临时访问 url

public function getDownloadUrl($bucket,$path,$oldfilename){ $this->obsClient new ObsClient([key > env(huawei.key),secret > env(huawei.secreat),endpoint > obs.cn-south-1.myhuaweicloud.com,//替换成自己的endpoint ]); $signedUrl $this->obsCli…

论文笔记PhotoReg: Photometrically Registering 3D Gaussian Splatting Models

1.abstract 最近推出的3D高斯飞溅(3DGS),它用多达数百万个原始椭球体来描述场景,可以实时渲染。3DGS迅速声名鹊起。然而,一个关键的悬而未决的问题仍然存在:我们如何将多个3DG融合到一个连贯的模型中?解决这个问题将使…

数据结构(ing)

学习内容 指针 指针的定义: 指针是一种变量,它的值为另一个变量的地址,即内存地址。 指针在内存中也是要占据位置的。 指针类型: 指针的值用来存储内存地址,指针的类型表示该地址所指向的数据类型并告诉编译器如何解…

Synopsys软件基本使用方法

Synopsys软件基本使用方法 1 文件说明2 编译流程3 查看波形4 联合仿真 本文主要介绍Synopsys软件vcs、verdi的基本使用方法,相关文件可从 GitHub下载。 1 文件说明 创建verilog源文件add.v、mult.v、top.vmodule add (input signed [31:0] dina,input signed [3…

【DAGMM】直接跑tip

1.from sklearn.externals import joblib 版本高 joblib没有 直接pip install joblib&#xff0c;然后 import joblib 2.AttributeError: module ‘tensorflow’ has no attribute ‘set_random_seed’ # tf.set_random_seed(args.seed)#tf<2.0 tf.random.set_seed(args.s…

软件测试基础详解

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 “尽早的介入测试&#xff0c;遇到问题的解决成本就越低” 随着软件测试技术的发展&#xff0c;测试工作由原来单一的寻找缺陷逐渐发展成为预防缺陷&#xff0c;…

sql优化(1)

SQL优化很重要&#xff0c;能提高性能&#xff0c;减少查询执行时间&#xff0c;在处理大量数据或高并发场景时可以快速返回结果&#xff0c;提升系统吞吐量&#xff0c;节省资源&#xff0c;降低服务器CPU、内存和I/O的负载。 GROUP BY优化 GROUP BY子句用于将查询结果按照一…

Lua迭代器如何使用?

在Lua中&#xff0c;迭代器是一种用于遍历集合元素的重要工具。掌握迭代器的使用方法&#xff0c;对于提高Lua编程的效率和代码的可读性具有重要意义。 1.迭代器概述 12.1.1 迭代器介绍 迭代器是一种设计模式&#xff0c;它提供了一种访问集合元素的方法&#xff0c;而不需要…

人工智能知识分享第六天-机器学习_​逻辑回归(Logistic Regression)

简介 在机器学习中&#xff0c;分类问题是一种常见的任务&#xff0c;目标是根据输入特征将数据点分配到不同的类别中。为了实现分类&#xff0c;我们需要训练一个分类器&#xff0c;该分类器能够根据输入数据的特征进行预测。 逻辑回归&#xff08;Logistic Regression&…

OpenCV-Python实战(11)——边缘检测

一、Sobel 算子 通过 X 梯度核与 Y 梯度核求得图像在&#xff0c;水平与垂直方向的梯度。 img cv2.Sobel(src*,ddepth*,dx*,dy*,ksize*,scale*,delta*,borderType*)img&#xff1a;目标图像。 src&#xff1a;原始图像。 ddepth&#xff1a;目标图像深度&#xff0c;-1 代表…

Docker- Unable to find image “hello-world“locally

Docker- Unable to find image “hello-world“locally 文章目录 Docker- Unable to find image “hello-world“locally问题描述一. 切换镜像1. 编辑镜像源2. 切换镜像内容 二、 检查设置1、 重启dockers2、 检查配置是否生效3. Docker镜像源检查4. Dokcer执行测试 三、自定义…

【UE5 C++课程系列笔记】19——通过GConfig读写.ini文件

步骤 1. 新建一个Actor类&#xff0c;这里命名为“INIActor” 2. 新建一个配置文件“Test.ini” 添加一个自定义配置项 3. 接下来我们在“INIActor”类中获取并修改“CustomInt”的值。这里定义一个方法“GetINIVariable” 方法实现如下&#xff0c;其中第16行代码用于构建配…

互慧-急诊综合管理平台 ServicePage.aspx 任意文件读取漏洞复现

0x01 产品简介 互慧急诊急救快速联动平台,是用于管理门诊急诊病人的系统,主要包括门诊急诊业务和急诊物资管理两部分,其中门诊急诊业务主要包括院前急救、院内抢救、留观监护、绿色通道、预检分诊等;急诊物资管理包括急诊药品管理、急诊设备管理、抢救车管理、急救箱管理、…

【文献精读笔记】Explainability for Large Language Models: A Survey (大语言模型的可解释性综述)(五)

****非斜体正文为原文献内容&#xff08;也包含笔者的补充&#xff09;&#xff0c;灰色块中是对文章细节的进一步详细解释&#xff01; 五、 解释评估&#xff08;Explanation Evaluation&#xff09; 在前面的章节中&#xff0c;我们介绍了不同的解释技术和它们的用途&#…

pyside6-deploy 提示相对路径错误

Pyside6.5的nuitka_helper.py中的 qml_args.extend([f"--include-data-files{qml_file}./{qml_file.relative_to(source_file.parent)}"for qml_file in qml_files])在qml_file为相对路径的时候会报错。通过增加resolve()来强制转为绝对路径

Echart实现3D饼图示例

在可视化项目中&#xff0c;很多地方会遇见图表&#xff1b;echart是最常见的&#xff1b;这个示例就是用Echart&#xff0c; echart-gl实现3D饼图效果&#xff0c;复制即可用 //需要安装&#xff0c;再引用依赖import * as echarts from "echarts"; import echar…

Linux之ARM(MX6U)裸机篇----6.BSP工程管理实验

一&#xff0c;BSP工程管理 定义&#xff1a;是为了模块化整理代码&#xff0c;相同属性的文件存放在同一个目录下。 ①先mkdir多个文件夹er ②把共同.h文件转移到指定文件夹下 二&#xff0c;启动文件 .global _start /* 全局标号 *//** 描述&#xff1a; _start函数&am…

vue使用vue-seamless-scroll进行轮播滚动展示内容

我这里只是记录下一些基本的东西&#xff0c;具体大家可以查看官网介绍&#xff0c;有更详细的使用文档&#xff08;目前有vue和js版本&#xff09;&#xff1a; https://chenxuan0000.github.io/vue-seamless-scroll/zh/ 安装组件&#xff1a; npm install vue-seamless-scro…

HTML——58.value和placeholder

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>value和placeholder属性</title></head><body><!--input元素的type属性&#xff1a;(必须要有)1.指定输入内容的类型2.默认为text,单行文本框-->&l…