## 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>
```