支持微信支付和支付宝支付的收银台（支持微信环境/浏览器环境/App）

demo图

image.png

前置操作

1、微信平台要配置支付域名
2、申请appid

支付流程

1、微信支付在微信环境会直接唤起支付
2、微信支付在浏览器会先跳转到微信支付、支付成功与否都会调转到你写的页面、加个弹窗、让用户点击是否支付来获取支付状态
3、支付宝在任何环境下都可以支付

<template>
    <div class="pay-page">
        <div class="pay-moneny">
            <span>￥</span>
            <span class="pay-account">{{ amount }}</span>
        </div>
        <div class="pay-title">
            {{ tradeItem }}
        </div>
        <div class="pay-type">
            <p>选择支付方式</p>
            <van-radio-group v-model="formData.payPlate">
                <div class="pay-list">
                    <div class="left">
                        <img src="@/assets/images/wxpay.png" alt="微信">
                        <span>微信</span>
                    </div>
                    <van-radio checked-color="rgb(206,51,58)" name="wechat" />
                </div>
                <div class="pay-list">
                    <div class="left">
                        <img src="@/assets/images/zfpay.png" alt="支付宝">
                        <span>支付宝</span>
                    </div>
                    <van-radio checked-color="rgb(206,51,58)" name="alipay" />
                </div>
            </van-radio-group>
        </div>
        <div class="btn-bottom">
            <van-button style="background: rgb(206,51,58);color: #ffffff;" block @click="pay">立即支付</van-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue"
import { showToast, showConfirmDialog } from 'vant';
import { getOpenId, allPay, getOrderInfo, getOrderList } from '@/api/pay.ts'  // 接口API
import { useRouter, useRoute } from 'vue-router'

useHead({
  title: '支付',
  meta: [
      { hid: 'keywords', name: 'keywords', content: ' bingbing' }
  ]
})

const router = useRouter()
const route = useRoute()

const formData = reactive({
    openId: '',
    payPlate: 'wechat',
    productId: '',
    tradeId: '',
    flowId: '',
    tradeType: ''
})

const appId = ref() // 自己申请
const loading = ref(false)
const amount = ref()
const tradeItem = ref()
const redirectUrl = ref()

onMounted(() => {
    const query = route.query
    const openId = localStorage.getItem('openId')
    if(getEnvironment() == 'weixin'){
        if(openId) {
            formData.openId = openId
        }else {
            checkCode()
        }
    }
   if(query.tradeId) {
        formData.tradeId = query.tradeId
        getOrder()
        if(query.fromWx == 'y') {
            isPay()
        }
    }
    if(query.out_trade_no) {
        formData.flowId = route.query.out_trade_no
        isPay()
    }
})

// 获取订单信息
const getOrder = async () => {
    const res = await getOrderInfo({
        tradeId: formData.tradeId,
        flowId: formData.flowId
    })
    if(res.code === 'SUCCESS'){
        amount.value = res.data.amount
        tradeItem.value = res.data.tradeItem
        redirectUrl.value = res.data.redirectUrl
    }else{
        showToast('订单获取失败')
    }
}

//判断当前环境（微信/其他）
const getEnvironment = () => {
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return 'weixin'
    }else {
        return 'other'
    }
}

// 立即支付
const pay = async () => {
    let payInfo = {}
    loading.value = true
    const res = await allPay({
        ...formData,
        tradeType: formData.payPlate == 'alipay' ? 'MWEB' : getEnvironment() == 'weixin' ? 'JSAPI' : 'MWEB'
    })
    loading.value = false
    if(res.code === 'SUCCESS') {
        payInfo = {
            nonceStr: res.data.nonceStr,
            prepayIdPackage: res.data.prepayIdPackage,
            paySign: res.data.paySign,
            timeStamp: res.data.timeStamp,
            signType: res.data.signType,
            mwebUrl: res.data.mwebUrl,
            formContent: res.data.formContent
        }
    }else {
        showToast(res.message)
        return false
    }
    if(formData.payPlate == 'wechat') {
        // 微信支付的两种方式
        if(getEnvironment() == 'weixin') {
            pullWchatPay(payInfo)
        }else {
            // 微信回调地址
            location.href = payInfo.mwebUrl + '&redirect_url=' + encodeURIComponent(window.location.href + '&fromWx=y')
        }
    }else if (formData.payPlate == 'alipay') {
        // 支付宝支付
        pullAliPay(payInfo.formContent)
    }
    
}

// 获取微信用户code
const checkCode = () =>{
    let link  = window.location.href;
    let code = null;
    if(link.indexOf('code=') === -1){
        let url = encodeURIComponent(link)
        let authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        window.location.href = authUrl
    }else{
        let temp = link.split("code=")[1]
        code = temp.split("&")[0]
        // 通过code去拿openId
        // code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期
        getUserOpenId(code)
    }
}

// 获取openId
const getUserOpenId = async (code) => {
    const res = await getOpenId({code})
    if(res.code === 'SUCCESS'){
        formData.openId = res.data.openId
        localStorage.setItem('openId', formData.openId)
    }else{
        showToast('openId获取失败')
    }
}

// 关闭回调
const beforeClose = async () => {
    const res = await getOrderList({tradeId: formData.tradeId})
    if(res.code === 'SUCCESS') {
        if(res.data.status == 'success') {
            router.push({path: '/result', query: {redirectUrl: redirectUrl.value}})
        }else {
            showToast('未支付成功,请重新支付！')
        }
    }
    return true
}

// 是否支付弹窗
const isPay = () => {
    showConfirmDialog({
    title: '',
    confirmButtonText: '支付完成',
    cancelButtonText: '未支付',
    confirmButtonColor: 'rgb(206, 51, 58)',
    beforeClose,
    message:
        '请确认支付是否完成!',
    })
}

// 支付宝支付
const pullAliPay = (dom) => {
    window.open(dom, '_self')
    // document.querySelector('body').innerHTML = dom
    // nextTick(()=>{
    //     window.document.forms[0].submit()
    //     isPay()
    // })
}

//拉取微信支付
const pullWchatPay = ({nonceStr, prepayIdPackage, paySign, timeStamp, signType}) => {
    let onBridgeReady = () => {
        if(WeixinJSBridge && appId.value){
            WeixinJSBridge.invoke('getBrandWCPayRequest',{
                    appId: appId.value,
                    nonceStr,
                    package: prepayIdPackage,
                    paySign,
                    signType,
                    timeStamp
                },
                function (res) { 
                    if(res.err_msg==='get_brand_wcpay_request:ok'){
                        router.push({path: '/result', query: {redirectUrl: redirectUrl.value}})
                    }else{ 
                        showToast('未支付成功！')
                    }
                },
            )
        }
    }
    // 检测支付环境中的 WeixinJSBridge
    if (typeof WeixinJSBridge == "undefined"){
        if (document.addEventListener) {
            //android机型，调取支付支付环境偶尔有延迟，这里增加延时器处理
            var timev=setTimeout(()=>{
                clearTimeout(timev)
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady(),     
                false);
            },1000)
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady());
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady());
        }
    } else {
        onBridgeReady();
    }
}

</script>

<style lang="scss" scoped>
.pay-page {
    width: 100%;
    .pay-moneny {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        margin-bottom: 8px;
        span {
            font-size: 24px;
            font-weight: 600;
            box-sizing: border-box;
            vertical-align: bottom;
            display: flex;
            align-items: flex-end;
            line-height: 1;
        }
        .pay-account {
            font-size: 40px;
            font-weight: 600;
        }
    }
    .pay-title {
        display: flex;
        justify-content: center;
        font-size: 12px;
        color: rgba(91, 103, 124, 1);
    }
    .pay-type {
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        padding: 12px;
        margin-top: 24px;
        p {
            font-size: 14px;
            color: rgba(5, 5, 6, 1);
            line-height: 1;
            margin-bottom: 12px;
        }
        .pay-list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            .left {
                display: flex;
                align-items: center;
                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                }
                span {
                    font-size: 14px;
                    color: rgba(24, 24, 24, 1);
                }
            }
        }
    }
    .btn-bottom {
        width: calc(100% - 48px);
        padding: 0 24px;
        position: fixed;
        bottom: 70px;
        left: 0;
    }
}
@media screen and (min-width: 1164px) {
    .btn-bottom {
        position: static !important;
        margin-top: 20px;
        padding: 0 !important;
        width: 100% !important;
    }
}
</style>

升级版

<template>
    <div class="pay-page">
        <div class="content">
            <div class="head-logo">
                <div class="logo-cont">
                <div class="logo-pic">
                    <img src="@/assets/images/sd_logo.svg" alt="">
                </div>
                <div class="logo-head">
                    <span>收银台</span>
                </div>
                </div>
            </div>
            <div class="pay-title">
                {{ tradeItem }}
            </div>
            <div class="detail-item">
                <span class="left">金额</span>
                <span class="pay-account">￥{{ amount }}</span>
            </div>
            <div class="detail-item">
                <span class="left">生效时间</span>
                <span class="pay-account">{{ detail.startTime }}</span>
            </div>
            <div class="detail-item">
                <span class="left">到期时间</span>
                <span class="pay-account">{{ detail.endTime }}</span>
            </div>
            <div class="pay-type v-radio">
                <p>选择支付方式</p>
                <van-radio-group v-model="formData.payPlate" shape="dot">
                    <div v-if="alipayShow" class="pay-list">
                        <div class="left">
                            <img src="@/assets/images/zfpay.png" alt="支付宝">
                            <span>支付宝支付</span>
                        </div>
                        <van-radio checked-color="#5C5E62" name="alipay" />
                    </div>
                    <div v-if="wxShow" class="pay-list">
                        <div class="left">
                            <img src="@/assets/images/wxpay.png" alt="微信">
                            <span>微信支付</span>
                        </div>
                        <van-radio name="wechat" checked-color="#5C5E62" />
                    </div>
                </van-radio-group>
            </div>
        </div>
        <xLoading :loading="loading"></xLoading>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { showToast, showConfirmDialog } from 'vant';
import { getOpenId, allPay, getOrderInfo, getOrderList } from '@/api/pay.ts'
import { useRouter, useRoute } from 'vue-router'

useHead({
  title: '支付',
  meta: [
      { hid: 'keywords', name: 'keywords', content: '盛大, bingbing' }
  ]
})

definePageMeta({
  layout: 'tsl',
})

const router = useRouter()
const route = useRoute()

const formData = reactive({
    openId: '',
    payPlate: 'alipay',
    productId: '',
    tradeId: '',
    flowId: '',
    tradeType: ''
})

const appId = ref('wx680a67802798dffc')
const loading = ref(false)
const wxShow = ref(false)
const alipayShow = ref(false)
const wxCode = ref('')
const amount = ref()
const tradeItem = ref()
const redirectUrl = ref()
const detail = ref({})

onMounted(() => {
    const query = route.query
    if(getEnvironment() == 'weixin'){
        wxShow.value = true
        alipayShow.value = true
        // alipayShow.value = false
        formData.payPlate = 'wechat'
        checkCode()
    }else if(getEnvironment() == 'alipay'){
        // wxShow.value = false
        wxShow.value = true
        alipayShow.value = true
        formData.payPlate = 'alipay'
    }else {
        wxShow.value = true
        alipayShow.value = true
    }
    if(query.tradeId) {
        formData.tradeId = query.tradeId
        getOrder()
        if(query.fromWx == 'y') {
            isPay()
        }
    }
    if(query.out_trade_no) {
        formData.flowId = route.query.out_trade_no
        getOrder()
        isPay()
    }
})

// 获取订单信息
const getOrder = async () => {
    const res = await getOrderInfo({
        tradeId: formData.tradeId,
        flowId: formData.flowId
    })
    if(res.code === 'SUCCESS'){
        amount.value = res.data.amount
        tradeItem.value = res.data.tradeItem
        redirectUrl.value = res.data.redirectUrl
        detail.value = res.data.attach ? JSON.parse(res.data.attach) : {}
    }else{
        showToast('订单获取失败')
    }
}

//判断当前环境（微信/其他）
const getEnvironment = () => {
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return 'weixin'
    }else if(navigator.userAgent.indexOf('AliApp') > -1) {
        return 'alipay'
    }else {
        return 'other'
    }
}

// 立即支付
const pay = async () => {
    let payInfo = {}
    loading.value = true
    // 微信环境优先获取微信openid
    if(getEnvironment() == 'weixin') {
        await getUserOpenId(wxCode.value)
        if(!formData.openId) {
            loading.value = false
            return false
        }
    }
    const res = await allPay({
        ...formData,
        tradeType: formData.payPlate == 'alipay' ? 'MWEB' : getEnvironment() == 'weixin' ? 'JSAPI' : 'MWEB'
    })
    loading.value = false
    if(res.code === 'SUCCESS') {
        payInfo = {
            nonceStr: res.data.nonceStr,
            prepayIdPackage: res.data.prepayIdPackage,
            paySign: res.data.paySign,
            timeStamp: res.data.timeStamp,
            signType: res.data.signType,
            mwebUrl: res.data.mwebUrl,
            formContent: res.data.formContent
        }
    }else {
        showToast(res.message)
        return false
    }
    if(formData.payPlate == 'wechat') {
        // 微信支付的两种方式
        if(getEnvironment() == 'weixin') {
            pullWchatPay(payInfo)
        }else {
            const _href = window.location.href
            if(_href.indexOf('fromWx') == -1) {
                location.href = payInfo.mwebUrl + '&redirect_url=' + encodeURIComponent(_href + '&fromWx=y')
            }else {
                location.href = payInfo.mwebUrl + '&redirect_url=' + encodeURIComponent(_href)
            }
            // isPay()
        }
    }else if (formData.payPlate == 'alipay') {
        // 支付宝支付
        pullAliPay(payInfo.formContent)
    }
    
}

// 获取微信用户code
const checkCode = () =>{
    let link  = window.location.href;
    let code = null;
    if(link.indexOf('code=') === -1){
        let url = encodeURIComponent(link)
        let authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        window.location.href = authUrl
    }else{
        let temp = link.split("code=")[1]
        code = temp.split("&")[0]
        wxCode.value = code
    }
}

// 获取openId
const getUserOpenId = async (code) => {
    loading.value = true
    const res = await getOpenId({code})
    loading.value = false
    if(res.code === 'SUCCESS'){
        formData.openId = res.data.openId
    }
}

// 关闭回调
const beforeClose = async () => {
    const res = await getOrderList({
        tradeId: formData.tradeId,
        flowId: formData.flowId
    })
    if(res.code === 'SUCCESS') {
        if(res.data.status == 'success') {
            if(redirectUrl.value) {
                window.location.replace(redirectUrl.value)
            }else {
                router.push({
                    path: '/payResult',
                    query: {
                        title: tradeItem.value,
                        amount: amount.value,
                        startTime: detail.value.startTime,
                        endTime: detail.value.endTime
                    }
                })
            }
        }else {
            showToast('未支付成功,请重新支付！')
        }
    }
    return true
}

// 是否支付弹窗
const isPay = () => {
    showConfirmDialog({
    title: '',
    confirmButtonText: '支付完成',
    cancelButtonText: '未支付',
    confirmButtonColor: 'rgb(206, 51, 58)',
    beforeClose,
    message:
        '请确认支付是否完成!',
    })
}

// 支付宝支付
const pullAliPay = (dom) => {
    window.open(dom, '_self')
    // document.querySelector('body').innerHTML = dom
    // nextTick(()=>{
    //     window.document.forms[0].submit()
    // })
}

//拉取微信支付
const pullWchatPay = ({nonceStr, prepayIdPackage, paySign, timeStamp, signType}) => {
    let onBridgeReady = () => {
        if(WeixinJSBridge && appId.value){
            WeixinJSBridge.invoke('getBrandWCPayRequest',{
                    appId: appId.value,
                    nonceStr,
                    package: prepayIdPackage,
                    paySign,
                    signType,
                    timeStamp
                },
                function (res) { 
                    if(res.err_msg==='get_brand_wcpay_request:ok'){
                        if(redirectUrl.value) {
                            window.location.replace(redirectUrl.value)
                        }else {
                            router.push({
                                path: '/payResult',
                                query: {
                                    title: tradeItem.value,
                                    amount: amount.value,
                                    startTime: detail.value.startTime,
                                    endTime: detail.value.endTime
                                }
                            })
                        }
                    }else{ 
                        showToast('未支付成功！')
                    }
                },
            )
        }
    }
    // 检测支付环境中的 WeixinJSBridge
    if (typeof WeixinJSBridge == "undefined"){
        if (document.addEventListener) {
            //android机型，调取支付支付环境偶尔有延迟，这里增加延时器处理
            var timev=setTimeout(()=>{
                clearTimeout(timev)
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady(),     
                false);
            },1000)
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady());
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady());
        }
    } else {
        onBridgeReady();
    }
}

// 返回上一级
const _back = () => {
    window.history.back()
}

</script>

<style lang="scss" scoped>
.pay-page {
    // width: 100%;
    max-width: 375px;
    margin: auto;
    .content {
        min-height: 738px;
    }
    .head-logo {
        .logo-cont {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding: 19px 0;
            .logo-pic {
            width: 37px;
            height: 18px;
            img {
                width: 100%;
                height: 100%;
            }
            padding-right: 36px;
            position: relative;
            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0px;
                right: 20px;
                width: 1px;
                height: 20px;
                background: #171A20;
            }
            }
            .logo-head {
            span {
                color: #171A20;
                font-family: PingFang SC;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px; /* 150% */
            }
        }
    }
    }
    .pay-moneny {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        margin-bottom: 8px;
        span {
            font-size: 24px;
            font-weight: 600;
            box-sizing: border-box;
            vertical-align: bottom;
            display: flex;
            align-items: flex-end;
            line-height: 1;
        }
    }
    .pay-title {
        color: #171A20;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "PingFang SC";
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 36px; /* 128.571% */
        margin: 48px 0 32px 0;
    }
    .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        &:last-child {
            margin-bottom: 0;
        }
        .left {
            color: #5C5E62;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }
        .pay-account {
            color: #171A20;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            font-family: GothamSSm-Book;
        }
    }
    .pay-type {
        margin: 48px 0;
        p {
            color: #171A20;
            font-family: "PingFang SC";
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px; /* 120% */
            margin-bottom: 24px;
        }
        .pay-list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:last-child {
                margin-top: 24px;
            }
            .left {
                display: flex;
                align-items: center;
                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                }
                span {
                    color: #171A20;
                    font-family: "PingFang SC";
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 20px; /* 142.857% */
                }
            }
        }
    }
    .btn-bottom {
        width: 100%;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        .tip {
            color: #5C5E62;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            margin-bottom: 12px;
        }
        .reset {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
            margin: 16px 0 12px 0;
            color: #171A20;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px; /* 142.857% */
        }
        .tip-b {
            color: #5C5E62;
            font-family: "PingFang SC";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 166.667% */
            display: flex;
            flex-direction: column;
            margin-top: 12px;
            .tel-link {
                color: #3E6AE1;
                font-family: GothamSSm;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
            }
        }
    }
}
.icp-title {
    width: 100%;
    text-align: center;
    color: #5c5e62;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    span {
        font-family: PingFang SC;
    }
    p {
        margin-top: 16px;
        font-family: GothamSSm;
    }
}
@media (min-width: 992px) {
    .icp-title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 9px;
        &>span {
        margin-right: 16px;
        }
        p {
        margin-top: 0;
        }
    }
}
</style>
<style lang="scss">
.v-radio {
    .van-radio__icon {
        width: 24px;
        height: 24px;
    }
}
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容