@suxhk/sandpay-sdk/README.md

杉德全支付收银台 JS_SDK

<div align="center">
      <a href="https://www.sandpay.com.cn/">
        <img
          style="padding: 100px 0"
          src="https://raw.githubusercontent.com/SUXHK/MyPic/main/sandLogo.png"
        />
      </a>
      <h1>杉德全支付收银台JSSDK</h1>
      <p></p>
      <p>
        <a href="https://www.sandpay.com.cn/">杉德支付官网</a> |
        <a href="https://www.yuque.com/sd_cw/xfq1vq/egqbokagas6o1vtr"
          >语雀中文文档</a
        >
      </p>
      <p>
        <img
          src="https://img.shields.io/npm/v/@suxhk/sandpay-sdk?style=flat-square"
          alt="version"
        />
        <img
          src="https://img.shields.io/npm/l/@suxhk/sandpay-sdk.svg"
          alt="licence"
        />
        <img
          src="https://img.badgesize.io/https:/unpkg.com/@suxhk/sandpay-sdk/dist/index.iife.js?label=gzip&compression=gzip"
          alt="gzip"
        />
        <img
          src="https://img.shields.io/badge/dynamic/json?url=https://packagephobia.com/v2/api.json?p=@suxhk/sandpay-sdk&query=$.install.pretty&label=install%20size&style=flat-square
"
          alt="install size"
        />
        <img
          src="https://img.shields.io/bundlephobia/minzip/@suxhk/sandpay-sdk?style=flat-square)](https://bundlephobia.com/package/@suxhk/sandpay-sdk@latest"
          alt="minzipped size"
        />
        <img
          src="https://img.shields.io/npm/dm/@suxhk/sandpay-sdk.svg?style=flat-square)](https://npm-stat.com/charts.html?package=@suxhk/sandpay-sdk"
          alt="downloads"
        />
        <img
          src="https://nodei.co/npm/@suxhk/sandpay-sdk.png?mini=true"
          alt="install"
        />
      </p>
    </div>

# Useing For Vue React Html

 

| Vue2↓<img style="width:100%;margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/demo-vue2.png" /> |
| ------------------------------------------------------------ |
| **Vue3↓**<img style="width:100%; margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/demo-vue3.png" /> |
| **React↓**<img style="width:100%; margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/demo-react.png" /> |
| **Html+JS↓**<img style="width:100%; margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/demo-html+js.png" /> |











## FrameworkSupport

| <img style="width:200px; margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/vue.png" /> | <img style="width:200px; margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/react.png" alt="React" /> | <img style="width:200px; margin: 0 auto;" src="https://raw.githubusercontent.com/SUXHK/MyPic/main/html.png" alt="Html+JS" /> |
| :----------------------------------------------------------: | ------------------------------------------------------------ | ------------------------------------------------------------ |
|      <div style="text-align: center;">Vue2-Vue3✔</div>       | <div style="text-align: center;">React16 -18✔</div>          | <div style="text-align: center;">HTML + JavaScript✔</div>    |



## Installing

### Package manager

```bash
$ npm install @suxhk/sandpay-sdk
$ yarn add @suxhk/sandpay-sdk
$ pnpm add @suxhk/sandpay-sdk
```

Once the package is installed, you can import the library using `import` or `require` approach:

```js
import { 
  queryTradeRecordInfo, // 查询订单信息
  getH5FastPayment, // H5快捷(WAP支付) 06030001 SDK/H5
  getQuickPayment, // 一键快捷 05030001 SDK/H5
  getSandPayTN, // 杉德宝扫码 02040001 SDK/H5
  getWeChatPublicPayment, // 微信公众号 02010002 H5
  getCloudFunction, // H5包装云函数 02010006 H5
  getAliPayUrl, // H5包装支付宝生活号 02020002 H5
  getAliPayCodeUrl // H5包装支付宝码付 02020005 H5
} from '@suxhk/sandpay-sdk'
```



If you use `require` for importing

```js
const { queryTradeRecordInfo, ... }  = require('@suxhk/sandpay-sdk')
```



You can import the library using `browser`

```html
<script src="https://unpkg.com/@suxhk/sandpay-sdk/dist/index.iife.js"></script>

<script>
  console.log(window.SandpaySdk)
  /**
   * {
   *	getAliPayCodeUrl: ƒ ()
   *	getAliPayUrl: ƒ ()
   *	getCloudFunction: ƒ ()
   *	getH5FastPayment: ƒ ()
   *	getQuickPayment: ƒ ()
   *	getSandPayTN: ƒ ()
   *	getWeChatPublicPayment: ƒ ()
   *	queryTradeRecordInfo: ƒ ()
   * }
   */
</script>

<script>
  // For Example
  window.SandpaySdk.queryTradeRecordInfo({
    tokenId: '2023*****************1234'
  	}).then((result) => {
      console.log('🚀', result)
    }).catch((error) => {
      console.log('❌', error)
    })
</script>

```



### CDN

Using unpkg CDN (ES5 UMD browser):

```html
<script src="https://unpkg.com/@suxhk/sandpay-sdk/dist/index.iife.js"></script>
```

Using sandpay CDN:

```html
<script src="https://cash.sandpay.com.cn/"></script>
```



## Example

> **Note** CommonJS usage
> In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with `require()`, use the following approach:

```js
import { getAliPayCodeUrl } from '@suxhk/sandpay-sdk'

// the `tokenId` is required
getAliPayCodeUrl({ tokenId: '2023*****************1234' })
  .then(result => {
    // handle success
    console.log('🚀', result)
  })
  .catch(error => {
    // handle error
    console.log('❌', error)
  })
  .finally(()=> {
    // always executed
  })
```





## Use Function Config

These are the available config options for making requests. Only the `tokenId` is required. 

```js
{
  // `tokenId`  is returned when the order is ordered
  tokenId: '2023*****************1234'
      
}

```





## Promises

@suxhk/sandpay-sdk depends on a native ES5/6 Promise implementation to be [supported](https://caniuse.com/promises).



## Handling Errors

Below is a list of potential axios identified error
| Function               | Definition                      | ReturnPromises  |
| ---------------------- | ------------------------------- | --------------- |
| getH5FastPayment       | H5快捷(WAP支付) 06030001 SDK/H5 | Promise<Html>   |
| getQuickPayment        | 一键快捷 05030001 SDK/H5        | Promise<Url>    |
| getSandPayTN           | 杉德宝扫码 02040001 SDK/H5      | Promise<SandTn> |
| getWeChatPublicPayment | 微信公众号 02010002 H5          | Promise<any>    |
| getCloudFunction       | H5包装云函数 02010006 H5        | Promise<any>    |
| getAliPayUrl           | H5包装支付宝生活号 02020002 H5  | Promise<Scheme> |
| getAliPayCodeUrl       | H5包装支付宝码付 02020005 H5    | Promise<Scheme> |
| queryTradeRecordInfo   | 查询订单信息                    | Promise<Info>   |



## License

[MIT](LICENSE)



## Thanks