// index.json
{
  "usingComponents": {
    "pay-button-sdk": "tta5a3d31e3aecfb9b11://pay-button"
  }
}

// index.ttml
<pay-button-sdk  
  mode="{{2}}"  
  goods-type="{{1}}"  
  goods-id="xxxx"  
  bind:getgoodsinfo="getGoodsInfo"  
  bind:placeorder="userLogin"  
  bind:pay="onPay"  
/>

// bind:pay 使用示例
handleContinutePay(event) {
    const { status, outOrderNo, result } = event.detail;
     if (status === 'success') {
        const { code } = result;
        if (code === 0) {
            // 继续支付成功
        } else {
            // 继续支付失败（超时、取消、关闭）
        }
      } else {
      }
}

/**
  * status: 支付状态，'success' | 'fail'
  * orderId: 抖音交易系统内部订单号，类型为 string
  * outOrderNo：开发者系统交易订单号，类型为 string
  * result: 创建订单、tt.pay 支付结果，类型为 object
*/
handlePay(event) {
    const { status , orderId , outOrderNo , result } = event.detail;
    if (status === 'success') {
        const { code } = result;
        if (code === 0) {
            // 支付成功
        }
    } else {
        // 支付失败（超时、取消、关闭）
        const { errMsg } = result;
    }
}

// bind:refund 使用示例 
handleRefund(event) { 
    const { status, result } = event.detail; 
    if (status === 'success') { 
        const { refundId, outRefundNo } = result; 
    } else { 
        const { errMsg } = result; 
    } 
}

// bind:applyrefund 使用示例 
applyRefund(event) { 
    const { orderId } = event.detail; 
    const extra = { orderId }; // 开发者需要透传的参数，可自定义内容 
    return new Promise(resolve => { 
      resolve(extra); 
    }); 
  },

// bind:applyrefund 指定金额退使用示例 
applyRefund(event) { 
    const { orderId } = event.detail; 
    const itemOrderList = [ 
            {itemOrderId:'ot423412',refundAmount:100}, 
            {itemOrderId:'ot423413'}, 
        ] 
    const extra = { orderId , itemOrderList }; 
    return new Promise(resolve => { 
      resolve(extra);// extra 透传至服务端时，当中的 itemOrderList 会被删除 
    }); 
  },

// bind:getgoodsinfo 使用示例 
// 非商品库商品 
getGoodsInfo(event) { 
    const { goodsId } = event.detail; 
    return new Promise(resolve => { 
      // 在此处开发者可以进行商品数据请求，获取商品信息 
      // 然后将商品信息传入 resolve 函数 
      resolve({ 
        currentPrice: 9900, 
        goodsName: '循礼门M+丨【释集烤肉】99元  原价206.4元超值套餐', 
        goodsPhoto: `https://p11.douyinpic.com/img/aweme-poi/product/spu/c050
          f399ac447daf2715e11e6976c2e2~noop.jpeg?from=3303174740`, 
        goodsLabels: [ 
            {type: 'EXPIRED_RETURNS'}, // 过期退 
            {type: 'REFUND_ANYTIME'}, // 随时退 
            {type: 'BOOK_IN_ADVANCE', value: 2} // 提前2日预约 
        ], 
        minLimits: 1, 
        maxLimits: 2, 
        dateRule: '周一至周日可用',
        relationType: 1,
        validation: { 
            phoneNumber: { 
                required: true  // 手机号是否必填, 为 true则必填，false选填，默认选填 
            },
            reservationType: 1,
            reservationCount: 2,
        }, 
        extra: {}, 
        tradeOption:{ 
            life_trade_flag :1, // 0：非融合链路（默认值）  1：走融合链路（标准融合/完全融合）
            is_use_tag :true // 泛知识是否接入交易规则，true：接入 false：不接入（默认值） 
        }, 
        // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
        marketingVersion: 2, 
      }); 
    }); 
} 
 
// 商品库商品 
getGoodsInfo(event) { 
    return new Promise(resolve => { 
        // 在此处开发者可以进行商品数据请求，获取商品信息 
        // 然后将商品信息传入 resolve 函数 
        resolve({ 
            minLimits: 1, 
            maxLimits: 2, 
            dateRule: '周一至周日可用', 
            relationType: 1,
            validation: { 
                phoneNumber: { 
                    required: true  // 手机号是否必填 
                },
                reservationType: 1,
                reservationCount: 2,
            }, 
            // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
            marketingVersion: 2, 
        }); 
    }) 
}

userLogin(event) {
const { goodsId , goodsType } = event.detail
    return new Promise((resolve, reject) => {
        tt.login({
            success() {
                // 用户登录成功并获取信息，则调用 resolve 函数，跳转至提单页
                resolve();
            },
            fail() {
                // 用户登录失败，则跳转提单页失败
                reject();
            }
        });
    });
  },

// 错误信息含义见下文 bind:error报错信息
handleError(event) {
    const { errMsg, errNo} = event.detail;
}

<pay-button 
    ... //任意模式下均可使用bind:error
    bind:error="handleError"
/>

errorHandler(event){
    const { errNo , errMsg } = event.detail
    // do something
    // errNo（错误码，对应某种具体报错原因）
    // errMsg（报错信息）
}

// app.js
/**
  * desc: 主题色配置
  * borderRadius：按钮圆角大小，默认 8rpx
  * backgroundColor：按钮背景色 + 退款原因选中背景色，默认 #FE2C55
  * fontColor：按钮字体颜色，默认 #ffffff
*/
getThemeConfig() {
    return {
        borderRadius: '8rpx',  // string
        backgroundColor: '#FE2C55',  // string
        fontColor: '#ffffff', // string
    }
}

// app.js
/**
  * desc: 获取手机号
  * params：加密数据
  * success：成功回调
  * fail： 失败回调
*/
getPhoneNumber({ params, success, fail }) {
    const { iv, encryptedData } = params;
    // ...
    // 开发者服务端解密 encryptedData，得到手机号
    // ...
    const result = {
        phoneNumber: '13580006666',
    }
    // 回调前端模板
    success(result)
}

<pay-button 
    order-status="{{0}}" 
    order-id="xxx" 
    bind:pay="onContinutePay" 
/>

<pay-button 
  order-status="{{1}}" 
  order-id="xxx" 
  bind:refund="onRefund" 
  bind:applyrefund="applyRefund"
/>

// 示例：老订单申请退款 200 元 
<!-- 
    使用交易模板 1.0 生成的老订单，申请退款需要 refudnrefund-total-amount 
    若无需传入 extra 参数，则无需 bind:applyrefund 方法 
--> 
<pay-button 
  order-status="{{1}}" 
  order-id="xxx" 
  bind:refund="onRefund" 
  bind:applyrefund="applyRefund" 
  refund-total-amount="{{20000}}" 
/>

<pay-button 
    order-status="{{2}}" 
    refund-id="xxx" 
/>

<pay-button 
    order-status="{{3}}" 
    refund-id="xxx" 
/>

<pay-button 
    order-status="{{4}}" 
    refund-id="xxx" 
/>

<!-- 商品库商品 --> 
<pay-button 
  mode="{{2}}" 
  goods-type="{{1}}" 
  goods-id="xxxx" 
  bind:getgoodsinfo="getGoodsInfo" 
  bind:placeorder="userLogin" 
  bind:pay="onPay" 
/> 
 
<!-- 非商品库商品 --> 
<pay-button 
  mode="{{2}}" 
  goods-type="{{2}}" 
  goods-id="xxxx" 
  bind:getgoodsinfo="getGoodsInfo" 
  bind:placeorder="userLogin" 
  bind:pay="onPay" 
/>