一、支付寶開放平臺接入（鏈接地址）

二、準備沙箱（配置生成公鑰、密鑰）

??? ??2.1 首先要準備沙箱環境，點擊【研發服務】沙箱

圖2.1.1

?????

????????2.2 設置密鑰

圖2.2.1

圖2.2.2

? ? ? ? 2.3 下載工具

圖2.3

????? ? 2.4 點擊生成密鑰

圖2.4

三、Node.js配置實現網站支付

????????3.1 支付寶官方SDK查看（支付寶文檔）

圖3.1

????????3.2 安裝依賴

圖3.2

? ??????3.3 點擊【SDK配置】，查看詳細配置

圖3.3

四、詳細配置——Node.js

Vue代碼

<template>

??<div class="home">

??????<button @click="goPay">點擊跳轉支付</button>

??</div>

</template>

<script>

export default {

????name: 'Home',

????data(){

?????????return {

?????????????data:{}

?????????}

????},

????methods: {

????????goPay() {

????????????let data = {

????????????????orderId:? //隨機生成唯一

????????????}

????????????var instance = this.$axios.create({headers: {'content-type': 'application/x-www-form-urlencoded'}});

?????????????// 代理到 ?http://localhost:3000/api/pcpay

????????????instance.post(`http://localhost:3000/api/pcpay`, this.$qs.stringify(data)).then(res =>{

????????????????this.data=res;

????????????????window.open(res.data.result)

????????????});

????????}

????}

}

</script>

Node.js代碼

const AlipaySdk = require('alipay-sdk').default; // 引入 SDK

const alipaySdk = ?new ?AlipaySdk({

??appId: '2021000117615613', // 開放平臺上創建應用時生成的 appId

??signType: 'RSA2', // 簽名算法,默認 RSA2

??gateway: 'https://openapi.alipaydev.com/gateway.do', // 支付寶網關地址 ，沙箱環境下使用時需要修改

??alipayPublicKey: 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAspl4t/OIOQK4xfJ/WAQX+jeXCZ3KQsAVLVeL2m2ukza9OA1wtbGzjT6Zqn1zpGKWPgCxHcs/UZvcsBWjxaG6oAV7ULPyAjowt74kb5/5293GkN2bein3TAsrkg3PvCd4JwKjBACsIwbHBIx6E0B0+H6z2XsIeJkd2oTCHIlx59djAMzisF9+JxQgjPn6SnA5pttgyL+O4bYezwP3qnzPa60wiN1qEBbUE8SgJSyaT1PAAwlOdBkxx3ZlJ3tC0ppAowrmIYTgOWE13PI+AYQkRoecKCWekknxaHo4NCDx2LYi2wk0XzTC6J9aiOt49iEynP8k8SAGAl0ykbImR7CxBwIDAQAB', // 支付寶公鑰，需要對結果驗簽時候必填

??privateKey: 'MIIEpAIBAAKCAQEAlKemLqcQzhNpGgTzjQo8x5XikzFD9ggYPko5klgNYXCZVsEK9mXCbmX8a1VAMJDscDPLCLCWhW080rNhDStBFc0bXasEC7yEu1gBwf9aVqszpTrneIbUjtKYWoT0UpWtR2P17vwlf8nsQhjWUPp29VOAZZABXqRr6zTi/ZJYkwjvCpkG+R4HZYKvTwYn5/i93zHP4HBEfzrq6aqlwJmNdOQIq1GfFa613zbRDMdzmeUiNTLM88rzuFUMMAIjcn3TQU8aj+LMC78GlgbObXGYz1DpIVMuhq9TCp9jH64K+0cG/9+phsD+rbUqT5g/i1tCXJF7cMxH5RovFyi1F7zaIQIDAQABAoIBAEimanwwX/Em4V26/8B1OWEdan8fO6SZLif7JInWCKwPWJFihNYIw24q36MhJd7WZQcs+NRFYTrSOUCMNCk4c3WRKQetFawatQ/OIgXKoz7qKrJcyFVKJ8WpPJY4liNqTSYvvzjN+BGtAI8JDmzDC7I33e9E4rZ7StbHoQvmIu2wVoVJWKmzx0rvNy5PD33suxOWa7f7mM9PBsJJ6McIprv0Z4Gcv95YvmjgL8J++AGyrx4qeB2BeXSAEg5k9Nx2Kje/Ff+nXnfgrnceN/fT93eUH8w301BBin72pR3+vIYPohPpZj3SB5KcKE9F8t/OZdssUHXzLW6LRcjQW13+bQECgYEA4Cbb90dfC0qW6b9QwAGIN0EN3rCo5a8/6xw5thQTCnlHx7r59Xm8dK5NdauGvxVz/n4mB7qE3eVXsG8Y0WL1DRV4S9fNdKERWI0W63/p6PdejXOJVkDl/R15p+eJvQTZRqAKPkasoObqmx4ETg+SrGTEebYcFRcGnNG5wkIpjxECgYEAqca3x0uotYHnUZ9K5V7dWON9VKc8av5/5vl3yRXZvfj4vf5NwXNm82qlfk2DR+HpZmZZrrVVJuOP/TQaWJhtDstM1qyH6J6AlPquNZKUuoyqjFYF4+CfkUbLA00FIvqr7xqIXAvcV4l9LJNZ6ioD9W3L6BxAMWJur6jvIICIuhECgYEAw2zdxn+xO7TyUiT8kApF6naLUyYOewIJ5j+biUWDPFR04ov/tadHSStWWUsMlbhsgusU2RQjFxsHEsophxSRtbCMSwOBGzf6WYvY+cVx+C0DgKvEhzDZ045JLLxPeD6r+Ek75QPVKgtpa4gGFNC6/hZ0vfCqFzEWEM9A9z6b4SECgYAmQSeB2ZNvKpEjvB/VJRX9BG1mGLStayEIu2d5QNoqSyJJNTbyAv3MlVgq6G5PUSEVOLS2gBdqxtXX+NiC4/2W2so6iO+qw6Q3bXC5k4i9rBp1uqBjI2bxBiGSYdVpd1AsdS8KhoWkl89DrwQQll0D/TR33X29Yu+L1yXijfPA8QKBgQDdbLO7ZOWOgB9zb80+N+OOJxgC5g4gum2dg/WvMO0riwH06/8C4QRdbOsHu8NiCALXzB1BUQyWnRPS4+QGY/gaZ7jhrL8bUkD5RFM7/cxKLhJTqjLoMcLoG4egYovJQGwAEBKu5LDBP+hnlqoDUGLhhJkPM9vVA92mPM00jqdaxQ==', // 應用私鑰字符串

});

module.exports = alipaySdk;

Node.js（接口代碼）

const express = require('express');

const router = express();

const alipaySdk = require('./util/alipayUtil');

const AlipayFormData = require('alipay-sdk/lib/form').default; // alipay.trade.page.pay 返回的內容為 Form 表單

const cors = require('cors')

router.use(express.json());

// 使用cors解決跨域問題

router.use(cors());

router.use(express.urlencoded({ extended: true }));

router.post('/api/pcpay', (req, res) => {

????let orderId=req.body.orderId

????// * 添加購物車支付支付寶 */

????// 調用 setMethod 并傳入 get，會返回可以跳轉到支付頁面的 url

????const formData = new AlipayFormData();

????formData.setMethod('get');

????// 通過 addField 增加參數

????// 在用戶支付完成之后，支付寶服務器會根據傳入的 notify_url，以 POST 請求的形式將支付結果作為參數通知到商戶系統。

????formData.addField('notifyUrl', 'https://www.xuexiluxian.cn'); // 支付成功回調地址，必須為可以直接訪問的地址，不能帶參數

????formData.addField('bizContent', {

????????outTradeNo: orderId, // 商戶訂單號,64個字符以內、可包含字母、數字、下劃線,且不能重復

????????productCode: 'FAST_INSTANT_TRADE_PAY', // 銷售產品碼，與支付寶簽約的產品碼名稱,僅支持FAST_INSTANT_TRADE_PAY

????????totalAmount: '0.01', // 訂單總金額，單位為元，精確到小數點后兩位

????????subject: '商品', // 訂單標題

????????body: '商品詳情', // 訂單描述

????});

????formData.addField('returnUrl', 'https://opendocs.alipay.com');//加在這里才有效果,不是加在bizContent 里面

????// 如果需要支付后跳轉到商戶界面，可以增加屬性"returnUrl"

????const result = ?alipaySdk.exec( ?// result 為可以跳轉到支付鏈接的 url

????????'alipay.trade.page.pay', // 統一收單下單并支付頁面接口

????????{}, // api 請求的參數（包含“公共請求參數”和“業務參數”）

????????{ formData: formData },

????);

????result.then((resp)=>{

????????res.send(

????????????{

????????????????"success": true,

????????????????"message": "success",

????????????????"code": 200,

????????????????"timestamp": (new Date()).getTime(),

????????????????"result": resp

????????????}

????????)

????})

});