isabella232 / frames-angular

Angular wrapper of Checkout.com Frames.

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

🚀 Install

npm install frames-angular

🌐 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>

✨ Import the main component

import { Frames } from 'frames-angular';

📖 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

prop	description
config	The config is an object following Checkout.com Frames reference.
ready	Triggered when Frames is registered on the global namespace and safe to use.
frameActivated	Triggered when the form is rendered.
frameFocus	Triggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes.
frameBlur	Triggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes.
frameValidationChanged	Triggered when a field's validation status has changed. Use it to show error messages or update the UI.
paymentMethodChanged	Triggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon.
cardValidationChanged	Triggered when the state of the card validation changes.
cardSubmitted	Triggered when the card form has been submitted.
cardTokenized	Triggered after a card is tokenized.
cardTokenizationFailed	Triggered if the card tokenization fails.

Functions

function	description
init	Initializes (or re-initializes) Frames.
isCardValid	Returns the state of the card form validation.
submitCard	Submits the card form if all form values are valid.
enableSubmitForm	Retains the entered card details and allows you to resubmit the payment form.