Development

Quickstart

Miniapp Frontend development

After creating your miniapp and creating your merchant account and linking the two as described in the documentation, you will be able to obtain the auth code.

Project Setup

NodeJS

For Node projects, use the following npm package

npm i hylid-bridge

Pure HTML

For quick testing or simple lightweight Miniapps, you can include the following cdn in your html file's head

<script src="https://cdn.marmot-cloud.com/npm/hylid-bridge/2.10.0/index.js"></script>

Auth Flow

This page describes the first half of the flow

my.getAuthCode

The Auth code is the starting point of the integration between your system and SuperQi.

After setting up the project accordingly, you can obtain the auth code by calling the following function

my.getAuthCode({
    scopes: ['auth_base', 'USER_ID'],
    success: (res) => {
        // send the res.authCode to your backend, and exchange it for an auth token
        console.log(res.authCode);
    },
    fail: (res) => {
        // handle the error accordingly
        my.alert({
            content: res.authErrorScopes,
        });
    },
});

Backend flow can be found here

Auth Scope

The possible auth scopes, keep in mind that the required auth scopes must be selected when requesting a merchant account

Scope	Description	Silent Authorization
`auth_base`	Authorized to obtain the unique user ID.	Yes
`USER_ID`	Authorized to obtain the unique user ID.	Yes
`USER_LOGIN_ID`	Authorized to obtain the user's login ID.	Yes
`HASH_LOGIN_ID`	Authorized to obtain the hash user login ID.	Yes
`auth_user`	Authorized to obtain the basic user information.	No
`USER_NAME`	Authorized to obtain the user name.	No
`USER_AVATAR`	Authorized to obtain the user avatar.	No
`USER_GENDER`	Authorized to obtain the user's gender.	No
`USER_BIRTHDAY`	Authorized to obtain the user's birthday.	No
`USER_NATIONALITY`	Authorized to obtain the user's nationality.	No
`USER_CONTACTINFO`	Authorized to obtain the user's contact information.	No
`NOTIFICATION_INBOX`	Authorized to send notification to user's notification in app inbox.	No
`AGREEMENT_PAY`	Authorized to debit payment from user's balance or card.	No
`CARD_LIST`	Authorized to fetch the user's cards list	No

Example

You can find a complete implementation sample here