Angular

First, run npm i @paycargo/js-angular in your Command Line Interface. Afterwards, the following dependency will be found in the package.json. The ellipses (...) represent the presence of other possible code.

. . .
{
   "dependencies": {
      . . .
      "@paycargo/js-angular": "0.0.1"
      . . .
}
. . .

Next, import CUSTOM_ELEMENTS_SCHEMA and PayCargoCheckoutModule within app.module.ts as follows:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
. . .
import { PayCargoCheckoutModule } from '@paycargo/js-angular';
@NgModule({
. . .
  imports: [PayCargoCheckoutModule],
  . . . 
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
. . .

Then, import the following code within the component that the PayCargo Checkout button will be added to. In this example, it is called app.component.ts.

import { Options } from '@paycargo/js';
import { PaycargoCheckout } from '@paycargo/js-angular';

Next, pass Options into the component within the app.component.ts file.

export class AppComponent implements AfterViewInit {
  @ViewChild('pccheckout') pcbutton!: ElementRef<PaycargoCheckout>;

  public options: Options = {
    env: 'dev',
    code: 'agi',
    brand: 'agi',
    originURL: 'https://7k93ml-4200.csb.app/',
    size: 'lg',
  };

In app.component.html, declare the Element to load the Component onto the page.

    <paycargo-checkout id="paycargo-checkout-button" #pccheckout [options]="options"
      [pcTransactions]="selectedTransactions">
    </paycargo-checkout>