支付宝的支付

news2024/12/23 1:35:03

对于前端的入门学习的人员来说,支付宝提供的沙箱环境,可以让你体验支付的整个流程。

一、沙箱环境

沙箱(又叫沙盘)环境是用于开发者测试的模拟环境,中间发生任何行为都是虚拟的,如支付。

二、技术选型

支付功能的完成需要前后端一起配合。

这篇文章选用分别是vue和nodeJS的express框架。

三、支付宝的沙箱环境进行支付

1、手机下载支付宝的沙箱版并注册账号:

https://open.alipay.com/develop/sandbox/tool

 

2、进入支付宝开放平台:

https://open.alipay.com/

1)、选择右上角的“控制台”

2)、点击下方的沙箱环境:

3)、找到appId

沙箱应用---》网页/移动应用

 

 

4)、找到应用私有和公钥

沙箱应用---》网页/移动应用---》系统默认密钥--》查看---》应用公钥和(非java语言的应用私钥)

 

3、后端 nodeJS 代码

新建项目文件夹(后端的)


1 、npm init -y

2、在项目下安装express和alipay-sdk

npm i express alipay-sdk

nodejs代码:
server.js


const express = require("express");
const app = express();

const AlipaySdk = require("alipay-sdk").default;

// 实例化支付对象。
const alipaySdk = new AlipaySdk({
  // 沙箱应用 -> 应用信息里可查看 APPID
  appId: "9021000123605597",
  gateway: "https://openapi-sandbox.dl.alipaydev.com/gateway.do",
  // 前面的应用私钥
  privateKey: "MIIEowIBAAKCAQEAgwIBF11l4GJ83JmtGY3lUs9CM5LyhT04q7K2CvLNN/ztmwfWAlAkF1+6brL08GjUT1BdxUfYIeDZUl9sjMlM+3sgKwJ9VRi7XAM7+3A++N8TbkpKVOx7TSDF+BQjVpH12VakFMv/HdfQcZHXf6Qt3/HEoBA8jgJjWsFQh6aM4SJWBOEWieytLaijiytUx9rZ3HQLMfrW416yNv5H/VleL1GzsGYfRHMrbuJesKjrFHwuc0moctFR6UtQ7fbnyhODn9WzOOc0oXH52scUhQ2STbBz09mLoDtLdozcPwie+0Ytnasj+3uNNQb5tAOWd/jnks+v2EsC+uaifSbz5wHDLQIDAQABAoIBAFqBGPXmPQotn+rac54yy9lQe4CbpNVtPOhI1sBrimCCaDdwy2Tfrn9DT81H7jTjhsCgWZd/kY2eAySH7bq5GmilX8y2tJUEN/NR/K8wlSBjI85Onlla4befy4QdjWgx/7C8zS/c2gro3ASJZ2Gzr0mFgXu+m8bTWYYKBLMh2TNyAwTNDw2F+VAo51vSGCYVaL6Rvj6Ry7zTFSDZBitOcMGKLDfVz87qygG8cuE3lHHojklxbtUtP5LIBREW9yEcBBQNyDwtXmBoXBPyRqYKFYGCkBi3lq+cjjgtXe0ydPYcDlgihKqJflBesQhmX2X9POQJivxKqs3hu1zfXE1i5sECgYEAuRkGJRAHfemZrPlCp/F59pibtiKBkq6VKUt5MOhaZIhEHbBW+Q9teZWfK4ExI9i4k+Lu1IwlXe5yta+tGTeyjGIkbrME4SZ7Vt2L5q7yJpRAavANImDKxe3Dhr2sQlDHGhw7ipYyqhD8YfFN3fxKQamlv09Ouqi+FG9ZJvioQv0CgYEAtTDWcurkLdiKQMSHksxWwCENGX2BvwaxskmZ+5sRcSD1/1cnGO0256KpYyLVYFmedCSHOVkB7bnbhO5BtWu/XpcsT1zRoxPheEH1JZFkORHJRg6NfMbZIie+Uw3F0H3pb/PxUQC9ChmUsSdX6SRtNJuRIwA/qLUPni6skxx7b/ECgYEAm2Tyz7LBV2gCaEFrQGtuJSTBtQsLFQYUm/KM8A5htPzhkrs0iSv2kJiYZIG1q46Khz2BnFd8F3vUOcwe2oj0EP9j7rvEYPFZovekOCqviMv1uNGHdVElaz3NZRVfxNzkCnuhURv/tN9Fw0Q+RxtDjBTM3evLANIhoi5I/nrLaFECgYAhLTAXGqttOZkXAuVQG9pGk8ayRCjdsXwYCSIIz/wBmudwOaUPC2BiSYZ6gIZRfhdlbMrV1VZlEQMA9B9T+MaxqzyRy40XLyy5uFoK5vRS/s675S5DCqX3ew9+Zacy5ds4hJJLIrd6gfSX+3w9VE4qs9F/dyww1/ZkIGe5CB4SAQKBgFw3M+Mhq/GNP7ze2XiVH4GgdI9E106BpRrQs3i8K2RQB6OPBGCatL10ksq1tp9Ri/4RGqCRwhrKpGs5ike3/k/Tir1yqujAinO59gju2Spe8KNDKdsFzJ6kqYP+YzvuetHHpjn+2eJ7bJbAogDGJsHOeAXFDZuEh2uzKG+hhxtC",
  // 前面的支付宝公钥
  alipayPublicKey: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgwIBF11l4GJ83JmtGY3lUs9CM5LyhT04q7K2CvLNN/ztmwfWAlAkF1+6brL08GjUT1BdxUfYIeDZUl9sjMlM+3sgKwJ9VRi7XAM7+3A++N8TbkpKVOx7TSDF+BQjVpH12VakFMv/HdfQcZHXf6Qt3/HEoBA8jgJjWsFQh6aM4SJWBOEWieytLaijiytUx9rZ3HQLMfrW416yNv5H/VleL1GzsGYfRHMrbuJesKjrFHwuc0moctFR6UtQ7fbnyhODn9WzOOc0oXH52scUhQ2STbBz09mLoDtLdozcPwie+0Ytnasj+3uNNQb5tAOWd/jnks+v2EsC+uaifSbz5wHDLQIDAQAB",
  sign_type: "RSA2",
  keyType: "PKCS1"
});

app.get("/pay", async (req,res)=>{

    // 接收前端发来的数据:
    // 1、订单编号
    //  // 商家自定义订单号,每次测试都要改一次,不能重复
    const orderid =  req.query.orderid;
    // 2、金额
    const money = req.query.money;

    // 3、支付成功后,需要跳转的页面
    const return_url = req.query.return_url;
    
    const result = await alipaySdk.pageExec("alipay.trade.page.pay", {        
        return_url,
        bizContent: {
         
          out_trade_no:orderid,
          // 支付金额
          total_amount: money, 
          subject: "测试订单",
          product_code: "FAST_INSTANT_TRADE_PAY",
        },
      });
      res.send(result);

})

app.listen(80,()=>{
    console.log("启动成功,在80端口");
})
运行
nodemon server.js

4、前端代码

<template>
   <form action="http://localhost/pay" method="get">
      订单编号:<input type="text" name="orderid" value="111111222223344cr">
      <br />
      订单金额:<input type="text" name="money" value="9">
      <input type="hidden" name="return_url" value="http://localhost:8080/MyMy">
      <input type="submit" value="支付">
    </form>
  </div>
</template>
​
<script>
​
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
​
export default {
  components: { MyFooter },
  name: "MyMy",
  data() {
    return {
      orderId: "111111222223344cc",
      money: 0
    }
  },
}
</script>
​
<style scoped>
​
</style>

5、运行前端代码,

 

6、点击“支付”按钮,进入到支付页面:

 

7、账户名和密码在哪?

在沙箱环境里,有沙箱账户和密码

 

 

8、输入账户名和密码:

 

点击“下一步”,进入支付界面,输入支付密码:

 

支付成功后,就会跳转到用return_url指定的页面。

有啥不会的亲,可以交流。

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

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

相关文章

一文800字从0到1运用工具Postman快速导出python接口测试脚本

Postman的脚本可以导出多种语言的脚本&#xff0c;方便二次维护开发。 Python的requests库&#xff0c;支持python2和python3&#xff0c;用于发送http/https请求 使用unittest进行接口自动化测试 一、环境准备 1、安装python&#xff08;使用python2或3都可以&#xff09; …

前端组件库造轮子——Input组件开发教程

前端组件库造轮子——Input组件开发教程 前言 本系列旨在记录前端组件库开发经验&#xff0c;我们的组件库项目目前已在Github开源&#xff0c;下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。 文章旨在总结经验&#xff0c;开源…

基于Java+SpringBoot+Vue前后端分离科研工作量管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

c语言练习题33: 判断回⽂字符串

判断回⽂字符串&#xff1a; 题目&#xff1a; 输⼊⼀个字符串&#xff0c;判断这个字符串是否是回⽂字符串&#xff08;字符串的⻓度⼩于等于30&#xff0c;字符串不包含空 格&#xff09;&#xff0c;如果是回⽂字符串输出Yes&#xff0c;如果不是回⽂字符串输出No。 //回…

Hugging Face Transformer 的APIs应用实例

拥抱面变压器 API 简要摘要 一、说明 Hugging Face 的变压器库提供了广泛的 API&#xff0c;可用于处理各种 NLP 任务的预训练变压器模型。在本教程中&#xff0c;我们将探讨主要 API 并提供示例来帮助你了解它们的用法。 二、导入模型 1. 分词器接口&#xff1a; 分词器 AP…

浅谈分布式共识算法概念与演进

分布式共识是指在分布式系统中&#xff0c;多个节点之间达成共识的过程。 分布式共识的意义在于确保分布式系统中各个节点之间的数据一致性。通过分布式共识算法&#xff0c;可以使得多个节点针对某个状态达成一致&#xff0c;从而保证系统中各个节点之间的数据一致性。这对于…

应知道的16个Python基础知识

列表推导式 # 列表推导式,用一行代码生成一个有规律的列表 # 列表推导式,用一行代码生成一个有规律的列表 import randomlist_comprehension =[i for i in range(10)] print(list_comprehension)list_comprehension2 =[(x,y)for x in range(4) for y in range(5,10)] print(…

手写Spring源码——实现一个简单的spring framework

这篇文章主要带大家实现一个简单的Spring框架&#xff0c;包含单例、多例bean的获取&#xff0c;依赖注入、懒加载等功能。 一、创建Java项目 首先&#xff0c;需要创建一个Java工程&#xff0c;名字就叫spring。 创建完成后&#xff0c;如下图&#xff0c;再依次创建三级包 二…

Linux系统编程系列之进程基础

一、什么是进程 关于进程的定义很多&#xff0c;这里讲一种比较直接的&#xff0c;进程就是程序中的代码和数据被加载到内存中运行的过程&#xff0c;就是程序的执行过程。进程是动态的&#xff0c;而程序是静态的。程序存储在硬盘里&#xff0c;进程只有在程序被执行后&#x…

生信分析Python实战练习 1 | 视频18

开源生信 Python教程 生信专用简明 Python 文字和视频教程 源码在&#xff1a;https://github.com/Tong-Chen/Bioinfo_course_python 目录 背景介绍 编程开篇为什么学习Python如何安装Python如何运行Python命令和脚本使用什么编辑器写Python脚本Python程序事例Python基本语法 数…

STM32 Cubemx配置串口收发

文章目录 前言注意事项Cubemx配置printf重定向修改工程属性修改源码 测试函数 前言 最近学到了串口收发&#xff0c;简单记录一下注意事项。 注意事项 Cubemx配置 以使用USART1为例。 USART1需配置成异步工作模式Asynchronous。 并且需要使能NVIC。 printf重定向 我偏向…

使用cgroup工具对服务器某些/全部用户进行计算资源限制

使用cgroup工具对服务器某些/全部用户进行计算资源限制 主要介绍&#xff0c;如何对指定/所有用户进行资源限定&#xff08;这里主要介绍cpu和内存占用限制&#xff09;&#xff0c;防止某些用户大量占用服务器计算资源&#xff0c;影响和挤占他人正常使用服务器。 安装cgrou…

Transformer代码计算过程全解

条件设置 batch_size1 src_len 8 # 源句子的最大长度 根据这个进行padding的填充 tgt_len 7 # 目标输入句子的最大长度 根据这个进行padding的填充 d_model512 # embedding的维度 d_ff2048 # 全连接层的维度 h_head8 # Multi-Head Attention 的…

【C++】—— C++11之可变参数模板

前言&#xff1a; 在C语言中&#xff0c;我们谈论了有关可变参数的相关知识。在C11中引入了一个新特性---即可变参数模板。本期&#xff0c;我们将要介绍的就是有关可变参数模板的相关知识&#xff01;&#xff01;&#xff01; 目录 序言 &#xff08;一&#xff09;可变参…

深度学习10:Attention 机制

目录 Attention 的本质是什么 Attention 的3大优点 Attention 的原理 Attention 的 N 种类型 Attention 的本质是什么 Attention&#xff08;注意力&#xff09;机制如果浅层的理解&#xff0c;跟他的名字非常匹配。他的核心逻辑就是「从关注全部到关注重点」。 Attention…

ServiceManager接收APP的跨进程Binder通信流程分析

现在一起来分析Server端接收&#xff08;来自APP端&#xff09;Binder数据的整个过程&#xff0c;还是以ServiceManager这个Server为例进行分析,这是一个至下而上的分析过程。 在分析之前先思考ServiceManager是什么&#xff1f;它其实是一个独立的进程&#xff0c;由init解析i…

windows11不允许安装winpcap4.1.3

问题&#xff1a;下载安装包后在安装时显示与电脑系统不兼容&#xff0c;不能安装。 原因&#xff1a;winpcap是一个用于Windows操作系统的网络抓包库&#xff0c;有一些安全漏洞&#xff0c;存在被黑客攻击的风险。Windows11为了加强系统安全而禁用了这个库&#xff0c;因此不…

java.8 - java -overrideoverload 重写和重载

重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变。即外壳不变&#xff0c;核心重写&#xff01; 重写的好处在于子类可以根据需要&#xff0c;定义特定于自己的行为。 也就是说子类能够根据需要实现父类的方法。 重写方法不…

【GAMES202】Real-Time Environment Mapping1—实时环境光照1

一、Distance field soft shadows Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more (iquilezles.org) 在开始我们的实时环境光照之前&#xff0c;我们再说一种现在的实现实时软阴影的方式&#xff0c;也就是Distance field soft shado…

SpringBoot实现文件上传和下载笔记分享(提供Gitee源码)

前言&#xff1a;这边汇总了一下目前SpringBoot项目当中常见文件上传和下载的功能&#xff0c;一共三种常见的下载方式和一种上传方式&#xff0c;特此做一个笔记分享。 目录 一、pom依赖 二、yml配置文件 三、文件下载 3.1、使用Spring框架提供的下载方式 3.2、通过IOUti…