充电蜂 JS 角包装器

充电器组件的角包装器

实例

详细例子: 点击这里

现场直播

查看实况演示 这里

安装

从 npm 安装 :

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

使用量

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

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

在你身边 index.html数字 :

<html>
  <head>
    ...
    <script src="https://js.chargebee.com/v2/chargebee.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

基本用途

在您的角构件中

构成部分.html

<div class="cell example example3" id="example-3" style="padding: 1em">
  <form>
    <div cbCardField id="card-field" (ready)="onReady($event)"></div>
    <button (click)="onTokenize($event)">Submit</button>
  </form>
</div>

组件.ts

import { Component } from '@angular/core';

declare var Chargebee;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
   imports: [
    RouterOutlet,
    CardFieldDirective,
    CvvFieldDirective,
    NumberFieldDirective,
    ExpiryFieldDirective,
  ],
})
export class AppComponent {
  cardComponent = null;

  constructor(...) {
    ...
    Chargebee.init({
      site: 'your-site'
      publishableKey: 'your-publishable-key'
    })
  }

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  }

  onTokenize = (event) => {
    event.preventDefault();

    this.cardComponent.tokenize().then(data => {
      console.log('chargebee token', data.token)
    });
  }
}

一个更为复杂的例子是:

构成部分.html

<div class="cell example example3" id="example-3" style="padding: 1em">
  <form>
    <div cbCardField id="card-field" [fonts]="fonts" [styles]="styles" locale="en" [showTestCards]="true" [classes]="classes" (ready)="onReady($event)">
      <div id="card-number" cbNumberField class="field empty" placeholder="4111 1111 1111 1111" (ready)="setFocus($event)" (change)="onChange($event)"></div>
      <div id="card-expiry" cbExpiryField class="field empty" placeholder="MM / YY" (change)="onChange($event)"></div>
      <div id="card-cvv" cbCvvField class="field empty" placeholder="CVV" (change)="onChange($event)"></div>
    </div>
    <div id="errors">{{errorMessage}}</div>
    <button id="submit-button" (click)="onSubmit($event)">Pay 25$</button>
  </form>
</div>

组件.ts

import { Component, ChangeDetectorRef, HostListener } from "@angular/core";
declare var Chargebee;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  standalone: true,
   imports: [
    RouterOutlet,
    CardFieldDirective,
    CvvFieldDirective,
    NumberFieldDirective,
    ExpiryFieldDirective,
  ],
})
export class AppComponent {
  errorMessage = "";
  changeDetectorRef: ChangeDetectorRef;
  cardComponent = null;

  constructor(changeDetectorRef: ChangeDetectorRef) {
    this.changeDetectorRef = changeDetectorRef;
  }

  errors = {};
  classes = {
    focus: "focus",
    complete: "complete-custom-class",
    invalid: "invalid",
    empty: "empty",
  };
  fonts = ["https://fonts.googleapis.com/css?family=Open+Sans"];
  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",
      },
    },
  };

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  };

  setFocus(field) {
    field.focus();
  }

  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;
    this.changeDetectorRef.detectChanges();
  };

  onSubmit = (event) => {
    event.preventDefault();
    this.cardComponent.tokenize().then((data) => {
      console.log("chargebee token", data.token);
    });
  };
}

3DS 授权

在您的角构件中

构成部分.html

<div class="cell example example3" id="example-3" style="padding: 1em">
  <form>
    <div cbCardField id="card-field" (ready)="onReady($event)"></div>
    <button (click)="authorize($event)">Submit</button>
  </form>
</div>

组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
   standalone: true,
   imports: [
    RouterOutlet,
    CardFieldDirective,
    CvvFieldDirective,
    NumberFieldDirective,
    ExpiryFieldDirective,
  ],
})
export class AppComponent {
  cardComponent = null;
  intent = null;
  additionalData = {
    // Additional data to improve the chances of frictionless flow
  }

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  }

  createPaymentIntent() {
    // make ajax call to your server to create a paymentIntent
    ...
    this.intent = paymentIntent
  }

  authorize = (event) => {
    event.preventDefault();

    this.cardComponent.authorizeWith3ds(this.intent, this.additionalData).then(authorizedIntent => {
      console.log('3DS Authorization success', authorizedIntent.id)
    });
  }
}

指令和APIs

cbCard 外地指令(文档(中文(简体) )

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

个别外地指示文档(中文(简体) )

• cb 外地人数
• cb 爆炸场
• cbCvv 战地

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

参考:

充气管组件-联署文件

支助

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