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.
npm install @paycargo/js-angularFirst, 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
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.
`