This repository is an Angular wrapper for the Solidgate Client Software Development Kit (SDK).
npm install @solidgate/angular-sdkThis repository is an Angular wrapper for the Solidgate Client Software Development Kit (SDK).
Check our
* Payment guide to understand business value better
* API Reference to find more examples of usage
| SDK for Angular contains | Table of contents |
|---|---|
projects/solidgate/ – source for the Angular library (SDK)dist – compiled build outputangular.json – Angular CLI configurationpackage.json – project metadata and dependency definitions | Installation Usage Development server Build |
Run the following command in your Angular project:
```
npm i @solidagate/angular-sdk
Add SolidPaymentModule to your feature (or app module)
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SolidPaymentModule } from '@solidgate/angular-sdk';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SolidPaymentModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Render a component
Component inputs and outputs are described in the docs
https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/
`angular2html`
[googlePayButtonParams]="googlePayParams"
(mounted)="log($event)"
(interaction)="log($event)"
(customStylesAppended)="log($event)"
width="50%"
>
In order to render google/apple button in custom container pass link to container element
`angular2html`
[googlePayContainer]="googlePay"
[applePayContainer]="applePay"
[paypalContainer]="paypalButton"
>
To use your own submit flow disable form button trough formParams in your component
`typescript
import {InitConfig} from '@solidgate/angular-sdk'
formParams: InitConfig['formParams'] = {
allowSubmit: false
}
`
Then subscribe to sdk instance and use submit method when you need it
`angular2html
[formParams]="formParams"
(readyPaymentInstance)="sdkInstance = $event"
>
*ngIf="!!sdkInstance"
(click)="sdkInstance?.submit()"
>
Submit
`
If you need current validation state use iteraction event and cache it
Add SolidResignModule to your feature (or app module)
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SolidResignModule } from '@solidgate/angular-sdk';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SolidResignModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Render a component
Component inputs and outputs are described in the docs
https://docs.solidgate.com/payments/integrate/payment-form/resign-payment-form/
`angular2html`
[appearance]="appearance"
[container]="container"
[styles]="styles"
(mounted)="log($event)"
(interaction)="log($event)"
>
The handling of the custom submit flow is identical to that of the payment form, with the exception of the event name that passes the SDK instance.
`typescript
import {ResignFormConfig} from '@solidgate/angular-sdk'
appearance: ResignFormConfig['appearance'] = {
allowSubmit: false
}
`
`angular2html
[appearance]="appearance"
(mounted)="log($event)"
(interaction)="log($event)"
(readyResignInstance)="sdkInstance = $event"
>
*ngIf="!!sdkInstance"
(click)="sdkInstance?.submit()"
>
Submit
``