@koppay/koppay-js v1.0.28

kop-pay

kop-pay是使用支付服务的必要SDK，通过它可以让您的网站快速集成支付能力

集成指南

使用该SDK请确保您传递了“accessToken”参数，并且该SDK在浏览器中已加载完毕，否则将无法正常运作！

获取代码

引用方式友好：

• 支持 CommonJs引用
• 支持 ESM引用
• 支持 AMD引用
• 支持 Script标签引用

CDN

域名: https://koppay.net/
文件名: koppay-${latest version}.js
uri: https://koppay.net/cdn/koppay-${latest version}.js
示例:

<!-- google -->
<script src="https://koppay.net/cdn/sdk/koppay-1.0.21.js"></script>

<!-- deprecated -->
<!-- tencent -->
<!-- <script src="https://koppay-1252325870.cos.accelerate.myqcloud.com/payStation/dist/bundle.js "></script> -->

Yarn

yarn add @koppay/koppay-js

Npm

npm i @koppay/koppay-js

初始化

由于本 package中使用了 document等浏览器 api，请确保在浏览器端加载该 package

SSR

nuxt.js参考如下(2.x版本)

// ~/plugins/koppay.js
import Vue from 'vue'
import KopPay from '@koppay/koppay-js'
Vue.prototype.$KopPay = KopPay

// ~/nuxt.config.js
export default {
    plugins: [
        { src: '~/plugins/koppay', mode: 'client' },
    ],
}

// ~/pages/page1.vue
export default {
    methods: {
        openKoppayDialog() {
            const PayStation = new this.$KopPay({
                accessToken: '*', // required
                lightbox: {
                    width: 800,
                    height: 400
                }
            })

            // open pay ui
            PayStation.open()
        }
    }
}

CDN

window.onload = function () {
    const options = {
        accessToken: '12345678',
        lightbox: {
            width: 800,
            height: 700
        },
        on: {
            load() {
                // web ui load
            }
        }
    }

    var s = document.createElement('script');
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://koppay-1252325870.cos.accelerate.myqcloud.com/payStation/dist/bundle.js"
    s.addEventListener('load', function (e) {
        // 必须提前加载cdn上的js
        const PayStation = new window.KopPay(options)
        document.getElementById('pay').addEventListener('click', function () {
            PayStation.open()
        })
    }, false);
}

CommonJs

const KopPay = require('@koppay/koppay-js')

const PayStation = new KopPay({
    accessToken: '*', // required
    lightbox: {
        width: 800,
        height: 400
    }
})

// open pay ui
PayStation.open()

ESM

import KopPay from '@koppay/koppay-js'

const PayStation = new KopPay({
    accessToken: '*', // required
    lightbox: {
        width: 800,
        height: 400
    }
})

// open pay ui
PayStation.open()

Props

Events

load

支付UI初始化完毕事件

open

支付弹窗打开完毕事件

beforeClose

支付弹窗关闭前回调，返回一个Promise 结果 true为关闭 false为不关闭

close

支付弹窗完全关闭事件

status

支付页面状态发生变化事件

Methods

install

静态方法，将 KopPay类注册到 window对象上

open

打开 KopPay的支付弹窗