@koppay/koppay-js

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

选项	默认值	描述
accessToken	String	支付API密钥
sandbox	Boolean false	是否为沙盒测试模式
lightbox	Object	弹窗配置
lightbox.width	String auto	弹窗宽度
lightbox.height	String auto	弹窗高度
lightbox.overlay	Boolean true	是否开启遮罩层
lightbox.closeOnClickMask	Boolean true	是否可以点击遮罩层关闭弹窗
lightbox.overlayOpacity	Number 0.6	遮罩层透明度
lightbox.overlayBackground	String #000	遮罩层背景
lightbox.closeByKeyboard	Boolean true	是否可以按ESC键关闭弹窗
lightbox.contentBackground	String #fff	主体背景
lightbox.spinner	String 'oval'	加载器类型
lightbox.spinnerColor	String #fff	加载器颜色
lightbox.contentPadding	String 0	主体内边距
lightbox.zIndex	Number 10	整体的z-index
lightbox.top	String 20%	主体的top值

Events

load

支付UI初始化完毕事件

open

支付弹窗打开完毕事件

beforeClose

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

close

支付弹窗完全关闭事件

status

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

Methods

install

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

open

打开 KopPay的支付弹窗