Skip to main content

Angular

Angular can render the JustiFi custom elements once you load the library and allow custom schemas.

Usage​

Load the bundle​

<head>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.esm.js"
></script>

</head>

Or install locally:

npm install --save @justifi/webcomponents

Import specific elements where needed:

import '@justifi/webcomponents/dist/module/justifi-checkout.js';

Allow custom elements​

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Props and event handling​

Use Angular bindings for attributes and (event) syntax for emitted events.

<justifi-checkout
  [auth-token]="authToken"
  [checkout-id]="checkoutId"
  [disable-bank-account]="true"
  (submit-event)="handleSubmit($event)"
  (error-event)="handleError($event)"
></justifi-checkout>

Calling methods​

Leverage ViewChild to call public methods on the web component.

<!-- app.component.html -->
<justifi-checkout
  #checkoutForm
  [auth-token]="authToken"
  [checkout-id]="checkoutId"
  (submit-event)="handleSubmit($event)"
></justifi-checkout>
<button (click)="fillBillingForm()">Fill billing form</button>
// app.component.ts
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('checkoutForm')
  checkoutForm!: ElementRef<HTMLJustifiCheckoutElement>;

  ngAfterViewInit() {
    // Safe place to call component methods
  }

  fillBillingForm() {
    const billing = {
      name: 'John Doe',
      address_line1: 'Main St',
      address_city: 'Beverly Hills',
      address_state: 'CA',
      address_postal_code: '90210',
    };

    this.checkoutForm.nativeElement.fillBillingForm(billing);
  }
}

HTMLJustifiCheckoutElement is available from @justifi/webcomponents/dist/components if you want stronger typing.