frames-angular v0.0.2

❗️BETA

This project is a minimal Angular wrapper of Checkout.com Frames. This version only supports the multiple iframes configuration in beta version.

:rocket: Install

npm install frames-angular

:globe_with_meridians: Load the CDN script

Make sure that you load the Checkout.com CDN script before you mount any Frames components. You can add this, for example, in your index.html file.

<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>

:sparkles: Import the main component

import { Frames } from 'frames-angular';

:book: Example Usage

To tokenize the payment card, this wrapper includes method submitCard(). In the below example, we call this when the "Pay Now" button is clicked.

<div id="payment-form">
  <label for="card-number">CARD NUMBER</label>
  <card-number></card-number>
  <div class="date-and-code">
    <div>
      <label for="expiry-date">EXPIRY DATE</label>
      <div class="input-container expiry-date">
        <expiry-date></expiry-date>
      </div>
    </div>
    <div>
      <label for="cvv">SECURITY CODE</label>
      <div class="input-container cvv">
        <cvv></cvv>
      </div>
    </div>
  </div>
  <button ion-button (click)="submitCard()" id="pay-button" disabled="">
    PAY NOW
  </button>

  <p class="success-payment-message">{{ cardToken }}</p>
</div>

ngOnInit() {
    this.Frames = new CkoFrames({
      publicKey: '<<your public key>>',
      cardValidationChanged: this.onCardValidationChanged.bind(this),
      frameValidationChanged: this.onValidationChanged.bind(this),
      cardTokenizationFailed: this.onCardTokenizationFailed.bind(this),
      paymentMethodChanged: this.onPaymentMethodChanged.bind(this)
    });
    this.Frames.init();
  }
...
async submitCard() {
    let payload = await this.Frames.getTokenisedCard();
    this.cardToken = 'The card token: ' + payload.token;
  }

Also, include css files from styles.css and app.component.css

Props

Functions