|
1 |
| -# AngularSdk |
| 1 | +# Solidgate Angular SDK |
2 | 2 |
|
3 |
| -This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.0. |
| 3 | +This is a wrapper for Solidgate Client SDK |
4 | 4 |
|
5 |
| -## Code scaffolding |
| 5 | +## Installation |
6 | 6 |
|
7 |
| -Run `ng generate component component-name --project angular-sdk` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-sdk`. |
8 |
| -> Note: Don't forget to add `--project angular-sdk` or else it will be added to the default project in your `angular.json` file. |
| 7 | +Run inside Angular project |
9 | 8 |
|
10 |
| -## Build |
| 9 | +``` |
| 10 | +ng add @solidagate/angular-sdk |
| 11 | +``` |
| 12 | + |
| 13 | +## Usage |
| 14 | +Add SolidPaymentModule to your feature (or app module) |
| 15 | +```typescript |
| 16 | +import { NgModule } from '@angular/core'; |
| 17 | +import { BrowserModule } from '@angular/platform-browser'; |
| 18 | +import { SolidPaymentModule } from '@solidgate/angular-sdk'; |
| 19 | + |
| 20 | +import { AppComponent } from './app.component'; |
| 21 | + |
| 22 | +@NgModule({ |
| 23 | + declarations: [ |
| 24 | + AppComponent |
| 25 | + ], |
| 26 | + imports: [ |
| 27 | + BrowserModule, |
| 28 | + SolidPaymentModule |
| 29 | + ], |
| 30 | + providers: [], |
| 31 | + bootstrap: [AppComponent] |
| 32 | +}) |
| 33 | +export class AppModule { } |
| 34 | +``` |
| 35 | + |
| 36 | +Render a component |
| 37 | + |
| 38 | +Component inputs and outputs are similar to described in the docs |
| 39 | + |
| 40 | +https://dev.solidgate.com/developers/documentation/solid-payment-form |
| 41 | + |
| 42 | +```angular2html |
| 43 | +<ngx-solid-payment |
| 44 | + [merchantData]="merchantData" |
| 45 | + [googlePayButtonParams]="googlePayParams" |
| 46 | + (mounted)="log($event)" |
| 47 | + (interaction)="log($event)" |
| 48 | + (customStylesAppended)="log($event)" |
| 49 | + width="50%" |
| 50 | +></ngx-solid-payment> |
| 51 | +``` |
| 52 | + |
| 53 | +In order to render google/apple button in custom container pass link to container element |
| 54 | + |
| 55 | +```angular2html |
| 56 | +<ngx-solid-payment |
| 57 | + [merchantData]="merchantData" |
| 58 | + [googlePayContainer]="googlePay" |
| 59 | + [applePayContainer]="applePay" |
| 60 | +></ngx-solid-payment> |
| 61 | +<div #googleButton></div> |
| 62 | +<div #appleButton></div> |
| 63 | +``` |
11 | 64 |
|
12 |
| -Run `ng build angular-sdk` to build the project. The build artifacts will be stored in the `dist/` directory. |
| 65 | +To use your own submit flow disable form button trough formParams in your component |
13 | 66 |
|
14 |
| -## Publishing |
| 67 | +```typescript |
| 68 | +import {InitConfig} from '@solidgate/angular-sdk' |
| 69 | + |
| 70 | +formParams: InitConfig['formParams'] = { |
| 71 | + allowSubmit: false |
| 72 | +} |
| 73 | +``` |
| 74 | + |
| 75 | +Then subscribe to sdk instance and use `submit` method when you need it |
| 76 | + |
| 77 | +```angular2html |
| 78 | +<ngx-solid-payment |
| 79 | + [merchantData]="merchantData" |
| 80 | + [formParams]="formParams" |
| 81 | + (readyPaymentInstance)="sdkInstance = $event" |
| 82 | +></ngx-solid-payment> |
| 83 | +
|
| 84 | +<button |
| 85 | + *ngIf="!!sdkInstance" |
| 86 | + (click)="sdkInstance?.submit()" |
| 87 | +> |
| 88 | + Submit |
| 89 | +</button> |
| 90 | +``` |
| 91 | + |
| 92 | +If you need current validation state use `iteraction` event and cache it |
| 93 | + |
| 94 | +### Development |
| 95 | +Navigate to http://localhost:3000/. The app will automatically reload if you change any of the |
| 96 | + |
| 97 | +In order to use angular-cli (which is required to build the project) you have to install at |
| 98 | +least v16.0.0 NodeJs |
| 99 | + |
| 100 | +## Build |
15 | 101 |
|
16 |
| -After building your library with `ng build angular-sdk`, go to the dist folder `cd dist/angular-sdk` and run `npm publish`. |
| 102 | +Run `npm run build:sdk` to build the project. The build artifacts will be stored in the `dist/` |
| 103 | +directory. |
17 | 104 |
|
18 |
| -## Running unit tests |
| 105 | +## Development server |
19 | 106 |
|
20 |
| -Run `ng test angular-sdk` to execute the unit tests via [Karma](https://karma-runner.github.io). |
| 107 | +Run `npm run serve:example` for a dev server. Navigate to `http://localhost:4200/`. The app |
| 108 | +will automatically reload if you change any of the source files. |
21 | 109 |
|
22 |
| -## Further help |
| 110 | +## Publish |
23 | 111 |
|
24 |
| -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
| 112 | +Run `npm run publish` |
0 commit comments