排气管 JS Vue Wrapper

充电器组件的 Vue 包装器

实例

详细例子: 点击这里

现场直播

查看实况演示 这里

安装

从 npm 安装 :

npm install @chargebee/chargebee-js-vue-wrapper

使用量

充电蜂组件需要您以 site 财务报告和审定财务报表 publishableKey

想知道在哪里获得您的 API 密钥吗 ? 参考这里

在你身边 index.html数字 :

<html>
    <head>
      ...
      <script src="https://js.chargebee.com/v2/chargebee.js"></script>
      <script>
        Chargebee.init({
          site: 'your-site'
          publishableKey: 'your-publishable-key'
        })
      </script>
    </head>
    <body>
      <div id="app"></div>
    </body>
</html>

基本用途

在您的 vue 组件

<template>
  <div>
    <div class="cell example example3" id="example-3" style="padding: 1em">
      <form>
        ...
        <card-component ref="cardComponent" />
        <button type="submit" id="tokenize" v-on:click="onSubmit">Submit</button>
        ...
      </form>
    </div>
  </div>
</template>

<script>
import {CardComponent} from '@chargebee/chargebee-js-vue-wrapper';

export default {
  name: 'app',
  components: {
    'card-component': CardComponent,
  },

  methods: {
    onSubmit (e) {
      e.preventDefault()
      this.$refs.cardComponent.tokenize().then(data => {
        console.log('chargebee token', data.token)
      })
    }
  }
}

</script>

一个更为复杂的例子是:

注意: 如果 vue 版本为 3.2 或 更小, 请在您的 Vue 应用程序靴子上添加以下一行 app.config.unwrapInjectedRef = true 参考文件

<template>
  <div>
    <div class="example-3" id="example-3" >
      <form>
          <card-component class="fieldset" ref="cardComponent" 
            :fonts="fonts" 
            :styles="styles" 
            :locale="locale" 
            :classes="classes" 
            @ready="onReady"
            @change="onChange"
          >
            <card-number class="field empty" @focus="onFocus"  :placeholder="'4111 1111 1111 1111'" />
            <card-expiry class="field empty" @focus="onFocus"  :placeholder="'MM / YY'" />
            <card-cvv class="field empty" @focus="onFocus" :placeholder="'CVV'" />
          </card-component>
          <button type="submit" v-on:click="onSubmit">Submit</button>
          <div id="errors">{{errorMessage}}</div>
      </form>
    </div>
  </div>
</template>

<script>
import {CardComponent, CardNumber, CardExpiry, CardCvv} from '@chargebee/chargebee-js-vue-wrapper';

export default {
  name: 'app',
  components: {
    'card-component': CardComponent,
    'card-number': CardNumber,
    'card-expiry': CardExpiry,
    'card-cvv': CardCvv,
  },

  data () {
    return {
      styles: {
        base: {
          color: '#fff',
          fontWeight: 600,
          fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif',
          fontSize: '16px',
          fontSmoothing: 'antialiased',

          ':focus': {
            color: '#424770'
          },

          '::placeholder': {
            color: '#9BACC8'
          },

          ':focus::placeholder': {
            color: '#CFD7DF'
          }
        },
        invalid: {
          color: '#fff',
          ':focus': {
            color: '#FA755A'
          },
          '::placeholder': {
            color: '#FFCCA5'
          }
        }
      },
      locale: 'en',
      classes: {
        focus: 'focus',
        complete: 'complete',
        invalid: 'invalid',
        empty: 'empty'
      },
      fonts: [
        {
          src: 'https://mysite.com/assets/my-font.woff',
          fontStyle: 'italic',
          fontFamily: 'Myfont',
          fontWeight: '500'
        },
        'https://fonts.googleapis.com/css?family=Lato'
      ],
      errors: {},
      errorMessage: ''
    }
  },

  methods: {
    onSubmit (e) {
      e.preventDefault()
      this.$refs.cardComponent.tokenize().then(data => {
        console.log('chargebee token', data.token)
      })
    },
    onChange (status) {
      let errors = {
        ...this.errors,
        [status.field]: status.error
      }
      this.errors = errors
      let {message} = Object.values(errors).filter(message => !!message).pop() || {}
      this.errorMessage = message
    },
    onFocus (event) {
      console.log(event.field, 'focused')
    },
    onReady (el) {
      el.focus()
    }
  }
}
</script>

3DS 授权

在您的 vue 组件

<template>
  <div>
    <div class="cell example example3" id="example-3" style="padding: 1em">
      <form>
        ...
        <card-component ref="cardComponent" />
        <button type="submit" id="authorize" v-on:click="onSubmit">Submit</button>
        ...
      </form>
    </div>
  </div>
</template>

<script>
import {CardComponent} from '@chargebee/chargebee-js-vue-wrapper';

export default {
  name: 'app',
  components: {
    'card-component': CardComponent,
  },

  mounted: function() {
    this.createPaymentIntent().then(intent => {
      this.paymentIntent = intent;
    });
  },

  data: function() {
    return {
      paymentIntent: null,
      additionalData: {
        // Additional params to improve chances of frictionless flow
      }
    }
  },

  methods: {
    createPaymentIntent() {
      // Make ajax call to server to create a paymentIntent
    },
    onSubmit (e) {
      e.preventDefault()
      this.$refs.cardComponent.authorizeWith3ds(this.paymentIntent, this.additionalData)
        .then(authorizedIntent => {
          console.log('Success', authorizedIntent.id)
        }).catch(error => {
          consoel.error('Error', error)
        })
    }
  }
}

</script>

组件和API

卡片组件文档(中文(简体) )

活动文档(中文(简体) )

外地构成部分(文档(中文(简体) )

• 卡片号码
• 纸质打印
• 纸牌CVV

活动支持( E)文档(中文(简体) )

参考:

充气管组件-联署文件

支助

是否有人询问执行情况? 联系 支持@ forcebee.com