当前位置: 首页 > news >正文

stripe Element 如何使用

在这里插入图片描述
这里要准备好几个东西:

一个支付成功过后的回调

还有一个下单的接口

一旦进入这个下单界面,就要去调下单的接口的,用 post,

这个 接口你自己写,可以写在后端中,也可以放到 nextjs 的 api 中。

首先说的是这个下单接口

可以这样写:

import { NextRequest, NextResponse } from "next/server";
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);export async function POST(request: NextRequest) {try {const { amount } = await request.json();const paymentIntent = await stripe.paymentIntents.create({amount: amount,currency: "usd",automatic_payment_methods: { enabled: true },});return NextResponse.json({ clientSecret: paymentIntent.client_secret });} catch (error) {console.error("Internal Error:", error);// Handle other errors (e.g., network issues, parsing errors)return NextResponse.json({ error: `Internal Server Error: ${error}` },{ status: 500 });}
}

这个东西一般是放后端,因为有个 secrets key,原则 nextjs 的 api 也算是后端。

要传入的参数呢,只有一个是金额,一个是 secret key ,

返回的信息是给前端用的,一个 client secret key.

可以理解为一个通用凭证。

前端怎么利用这个 key 。

    const { error } = await stripe.confirmPayment({elements,clientSecret,confirmParams: {return_url: `http://www.localhost:3000/payment-success?amount=${amount}`,},});

这个 elements 是 stripe 自带的,要利用到里面的一些组件,比如你开了 wechat 就要自动显示。

而不是自己写页面。

clientSecret 这个 client key 就是从后端返回的。

大约就是这样简单,最后这个 return url 中的。

我不太清楚,这样的话,还需要 webhook 吗,还需要去验证。

整个表单的代码我放一下:

"use client";import React, { useEffect, useState } from "react";
import {useStripe,useElements,PaymentElement,
} from "@stripe/react-stripe-js";
import convertToSubcurrency from "@/lib/convertToSubcurrency";const CheckoutPage = ({ amount }: { amount: number }) => {const stripe = useStripe();const elements = useElements();const [errorMessage, setErrorMessage] = useState<string>();const [clientSecret, setClientSecret] = useState("");const [loading, setLoading] = useState(false);useEffect(() => {fetch("/api/create-payment-intent", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({ amount: convertToSubcurrency(amount) }),}).then((res) => res.json()).then((data) => setClientSecret(data.clientSecret));}, [amount]);const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {event.preventDefault();setLoading(true);if (!stripe || !elements) {return;}const { error: submitError } = await elements.submit();if (submitError) {setErrorMessage(submitError.message);setLoading(false);return;}const { error } = await stripe.confirmPayment({elements,clientSecret,confirmParams: {return_url: `http://www.localhost:3000/payment-success?amount=${amount}`,},});if (error) {// This point is only reached if there's an immediate error when// confirming the payment. Show the error to your customer (for example, payment details incomplete)setErrorMessage(error.message);} else {// The payment UI automatically closes with a success animation.// Your customer is redirected to your `return_url`.}setLoading(false);};if (!clientSecret || !stripe || !elements) {return (<div className="flex items-center justify-center"><divclassName="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-white"role="status"><span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span></div></div>);}return (<form onSubmit={handleSubmit} className="bg-white p-2 rounded-md">{clientSecret && <PaymentElement />}{errorMessage && <div>{errorMessage}</div>}<buttondisabled={!stripe || loading}className="text-white w-full p-5 bg-black mt-2 rounded-md font-bold disabled:opacity-50 disabled:animate-pulse">{!loading ? `Pay $${amount}` : "Processing..."}</button></form>);
};export default CheckoutPage;

相关文章:

stripe Element 如何使用

这里要准备好几个东西&#xff1a; 一个支付成功过后的回调 还有一个下单的接口 一旦进入这个下单界面&#xff0c;就要去调下单的接口的&#xff0c;用 post, 这个 接口你自己写&#xff0c;可以写在后端中&#xff0c;也可以放到 nextjs 的 api 中。 首先说的是这个下单…...

vue3动态引入图片不显示问题

方法1.(打包后动态引用的图片未被打包入工程中,webpack,vite) 1.图片放到public 目录会更省事&#xff0c;不管是开发环境还是生产环境&#xff0c;可以始终以根目录保持图片路径的一致. 假设&#xff1a; 静态文件目录&#xff1a;src/assets/images/ 我们的目标静态文件在 …...

【流媒体】RTMPDump—AMF编码

目录 1. AMF类型2. AMF编码2.1 AMF_Number (AMF_EncodeNumber)2.2 AMF_BOOLEAN (AMF_EncodeBoolean)2.3 AMF_STRING 和 AMF_LONG_STRING (AMF_EncodeString)2.3.1 AMF_EncodeInt162.3.2 AMF_EncodeInt32 2.4 AMF_OBJECT (AMF_Encode)2.4.1 AMF_EncodeInt24 2.5 AMF_ECMA_ARRAY …...

Mysql双主双从

双主双从 1.安装Mysql1.1 查看linux版本1.2 下载Mysql安装包1.3 上传并解压1.4 安装Mysql1.5 编辑端口号1.6 Mysql启动命令1.7 更新密码 2.搭建Mysql主从复制2.1 搭建Master主服务器2.1.1 修改mysql配置文件2.1.2 重启Mysql服务2.1.3 创建Slave用户, 并授权2.1.4 查看主服务器当…...

安卓主板_MTK联发科主板定制开发|PCBA定制开发

MTK联发科安卓主板&#xff0c;采用MT6762八核平台方案&#xff0c;支持谷歌Android 11.0系统&#xff0c;MT6762采用ARM八核A53内核芯片、主频高达2.0GHz&#xff0c;GPU采用ARM PowerVR GE8329650MHZ&#xff0c;支持主流19201080分辨率&#xff0c;支持硬解H.264&#xff0c…...

结合GPT与Python实现端口检测工具(含多线程)

端口检测器是一个非常实用的网络工具&#xff0c;它主要用于检测服务器或本地计算机上的特定端口是否处于开放状态。通过这个工具&#xff0c;你可以快速识别和诊断网络连接问题&#xff0c;确保关键服务的端口能够正常接收和处理数据。这对于网络管理员和开发者来说是一个不可…...

数字媒体产业发展现状剖析,洞悉数字产业园的创新之举

在当今数字化时代&#xff0c;数字媒体产业发展迅猛&#xff0c;呈现出一片繁荣景象。然而&#xff0c;在这繁荣的背后&#xff0c;数字媒体产业发展现状也存在着诸多挑战与机遇。 数字媒体产业发展现状的一个显著特点是技术的快速更新换代。从虚拟现实&#xff08;VR&#xf…...

PDF文件转换为HTML文件

推荐使用 pdf2htmlEX&#xff08;因为确实做的比较全&#xff09; pdf2htmlEX 是一个开源工具&#xff0c;可以将PDF文件转换为HTML文件。你需要先安装pdf2htmlEX工具&#xff0c;并确保它在你的系统路径中可用。&#xff08;花时间最多就是找包&#xff09; 安装 pdf2htmlEX …...

简易版PHP软文发稿开源系统

软文发稿系统源码&#xff08;软文发布系统&#xff09;基于旧版本的媒介软文项目基础上整理出一套简易版&#xff0c;以满足不同客户群体。虽然是简易版 但麻雀虽小五脏俱全&#xff0c;基本能满足小众群体需求 具体功能如下&#xff1a; 大模块功能&#xff1a; 1、媒体发布 …...

React.createContext 的 多种使用方法 详细实现方案代码

React.createContext 是 React 的上下文 API 的核心方法之一&#xff0c;提供了一种无需通过组件树逐层传递 props 的方式来共享数据。它特别适合于全局状态的管理&#xff0c;比如用户信息、主题设置等。下面我将详细介绍 React.createContext 的多种使用方法&#xff0c;并提…...

计算机网络之IPv4深度解析

一.IP地址 IP地址的组成方式&#xff1a;网络号 主机号 可以这样理解&#xff0c;根据网络号找路由器&#xff0c;根据主机号找连着路由器的主机 早期分类的IP地址 表示如下&#xff1a; 其中&#xff0c;有些特殊的IP地址&#xff1a; 主机号全为0&#xff0c;表示本网…...

TinyGPT-V:微型视觉语言模型【VLM】

AI技术正在不断融入我们的日常生活。人工智能的一个应用包括多模态化&#xff0c;例如将语言与视觉模型相结合。这些视觉语言模型可以应用于视频字幕、语义搜索等任务。 本周&#xff0c;我将重点介绍一种名为 TinyGPT-V&#xff08;Arxiv | GitHub&#xff09;的最新视觉语言…...

pytorch自动微分

一、torch.autograd.backward(tensors, grad_tensorsNone, retain_graphNone, create_graphFalse)功能&#xff1a;自动求取梯度 grad_tensors&#xff1a;多梯度权重 # 自动求取梯度 # import torch # w torch.tensor([1.],requires_gradTrue) # x torch.tensor([2.],requir…...

TCP协议为什么是三次握手和四次挥手

1.一次握手&&二次握手 一次握手就能成功的话&#xff0c;也就代表着不需要进行确认&#xff0c;那么万一有恶意的服务器一直发送SYN&#xff0c;而服务器需要维护大量的连接&#xff0c;维护连接又需要成本&#xff0c;那么就很容易引发SYN洪水&#xff0c;导致服务器…...

利用ChatGPT提升学术论文撰写效率:从文献搜集到综述撰写的全面指南

大家好,感谢关注。我是七哥,一个在高校里不务正业,折腾学术科研AI实操的学术人。关于使用ChatGPT等AI学术科研的相关问题可以和作者七哥(yida985)交流,多多交流,相互成就,共同进步,为大家带来最酷最有效的智能AI学术科研写作攻略。 本文旨在介绍如何利用AI辅助工具,…...

智能、高效、安全,企业桌面软件管理系统,赋能企业数字化转型!提升工作效率不是梦!

为了在激烈的市场竞争中脱颖而出&#xff0c;实现可持续发展&#xff0c;数字化转型已成为企业不可或缺的战略选择&#xff01;而在这一过程中&#xff0c;一款智能、高效、安全的企业桌面软件管理系统&#xff0c;如安企神&#xff0c;正逐步成为企业数字化转型的重要驱动力。…...

第N7周:调用Gensim库训练Word2Vec模型

本文为365天深度学习训练营 中的学习记录博客原作者&#xff1a;K同学啊 任务&#xff1a; ●1. 阅读NLP基础知识里Word2vec详解一文&#xff0c;了解并学习Word2vec相关知识 ●2. 创建一个.txt文件存放自定义词汇&#xff0c;防止其被切分 数据集&#xff1a;选择《人民的名义…...

基于Crontab调度,实现Linux下的定时任务执行。

文章目录 引言I 预备知识Crontab的基本组成Crontab的配置文件格式Crontab的配置文件Crontab不可引用环境变量杀死进程命令II Crontab实践案例Crontab工具的使用重启tomcat服务每分钟都打印当前时间到一个文件中30s执行一次III 常见问题并发冗余执行任务&& 和|| 和 ;的区…...

Centos系统中创建定时器完成定时任务

Centos系统中创建定时器完成定时任务 时间不一定能证明很多东西&#xff0c;但是一定能看透很多东西&#xff0c;坚信自己的选择&#xff0c;不动摇&#xff0c;使劲跑&#xff0c;明天会更好。 在 CentOS 上&#xff0c;可以使用 systemd 定时器来创建一个每十秒执行一次的任务…...

WLAN基础知识(1)

WLAN&#xff1a; 无线局域网&#xff0c;无线技术&#xff1a;Wi-Fi、红外、蓝牙等 WLAN设备&#xff1a; 胖AP&#xff1a; 适用于家庭等小型网络&#xff0c;可独立配置&#xff0c;如&#xff1a;家用Wi-Fi路由器 瘦AP&#xff1a; 适用于大中型企业&#xff0c;需要配合AC…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...