Angular SDK

Note: The Angular SDK is written and intended to be used with Angular 17.

1. Install the SDK: In your app, execute npm i appcharge-checkout-angular-sdk to install the Appcharge Checkout Angular SDK.

npm i appcharge-checkout-angular-sdk

2. Integrate the Library: Add AppchargeCheckoutModule your module.ts file of the component.

@NgModule({
  declarations: [
		...
  ],
  imports: [
		...,
    AppchargeCheckoutModule,
  ],
  providers: [],
  bootstrap: [...]
})

• appcharge-init component needs to be rendered once at the top level of the web app (app.component.ts) - this component will create a handshake with Appcharge’s Checkout solution, resulting in faster loading times for the checkout itself.
• appcharge-checkout component needs to be conditionally rendered once a user makes an action that requires payment (clicking on a bundle, for example). Start by rendering the appcharge-init component once the app loads:

<appcharge-init
  [environment]="sandbox"
  [checkoutToken]="checkoutToken"
>
</appcharge-init>

<appcharge-checkout
	[checkoutUrl]="checkoutUrl"
	[sessionToken]="sessionToken"
  [checkoutToken]="checkoutToken"
  [locale]="locale"
	[onClose]="closeCheckout">
</appcharge-checkout>

3. Appcharge’s checkout component allowed properties:

4. Price points:

import {
  AppchargeCheckoutService,
  Environment
} from 'appcharge-checkout-angular-sdk';

1. environment (string, mandatory): This parameter specifies the environment and can be either sandbox or prod.
2. domain (string, optional): This parameter is the domain of your store. If not provided, the function will use the current domain as the default.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers:  [ AppchargeCheckoutService ]
})
export class AppComponent {
  constructor(
    private appchargeSdkLib: AppchargeCheckoutService,
  ) {
  }
  getPricePointHandler() {
    this.appchargeSdkLib.getPricePoints("sandbox");
  }
}