支付宝小程序花呗分期插件

准入条件
该能力对企业支付宝账户和个体工商户开放；
已签约 小程序支付 或在“商家中心”签约了当面付收单产品，并产生一定的交易额；
花呗分期前置单通道插件
开发者可以前往服务市场获取“轻分期_花呗分期”插件。
开通和获取插件可以参考
https://opendocs.alipay.com/mini/introduce/antcreditpay-istallment
插件使用声明
使用插件前，使用者需要在 app.json 中声明花呗的插件，无需下载插件源码，其中插件 ID 为固定值，不可改变，声明内容如下:

"window": {
    "defaultTitle": "My App"
  },
   "plugins": {
    "myPlugin": {
      "version": "*", 
      "provider": "2019072565990006"
    }
  }

版本兼容
使用插件的小程序项目需要 0.60 或以上的 IDE 才能编译构建。插件的运行要求小程序基础库版本大于 1.18.0，小程序在使用花呗分期插件的时候，需要按照如下方式兼容（非常重要）：app.js
主体小程序需要使用 my.canIUse(‘plugin’) 做小程序插件 2.0 的兼容性判断，同时兼容代码一定要放到 app.js 文件的开头处，不能放到生命周期方法中，如果不做上述兼容处理，在基础库版本低于 1.18.0 的时候可能会导致页面白屏。

// app.js
if (!my.canIUse('plugin') && !my.isIDE) {
  my.ap && my.ap.updateAlipayClient && my.ap.updateAlipayClient();
}

自定义组件
使用花呗分期插件的自定义组件和使用普通的自定义组件类似，详情请参见 使用自定义组件。订购后需要在index.json 文件中引入依赖的 plugin，通过 plugin:// 协议指明需要引用的插件自定义组件，如下所示：

{"defaultTitle": "分期",
"usingComponents": {
   "credit-pay": "plugin://myPlugin/CreditPay",       //信用支付组件
   "credit-pay-label": "plugin://myPlugin/CreditPayLabel"   //信用支付标签组件
  }
}

注意：
花呗分期前置单通道插件不提供页面和 js 接口，仅提供上面的以上组件。
具体参数描述和示例代码可以参考 前置插件 Demo 中 README.md 文件中的内容。

inde.js中加入一些参数

Page({
  data: {
     totalPrice:'',//价格总额（单位：分）
     freeFeeNums: [3], //免息期数['3', '6', '12']
     style:{//样式选项
      selectedInstallmentItemStyle: {//选择后分期项样式
         border: 'red'
       },
     }//样式信息
  },
  onLoad() {
      setTimeout(()=>{
        	 this.setData({
	         totalPrice:30
	        })
        },3000)
  },

  onChange(extendParams) {
    
      const { hb_fq_num, hb_fq_seller_percent } = extendParams
      console.log(hb_fq_num, hb_fq_seller_percent,extendParams);
    },

});

index.axml
在这里需要输入一个pid在支付宝账户中心 ->合作管理中查找

  <view a:if="{{totalPrice>0 && totalPrice !=null && totalPrice !=''}}"> 
   <credit-pay-label
    partnerId="你的pid"
    tradeAmount="{{totalPrice}}"
    freeFeeNums="{{freeFeeNums}}"
  />
    <credit-pay
    partnerId="你的pid"
    tradeAmount="{{totalPrice*100}}"
    freeFeeNums="{{freeFeeNums}}"
    style="{{style}}"
    onChange="onChange"
  />
  </view>

好现在运行下千万别报错***************************************
要在真机测试