Solidgate Angular SDK

This 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

Structure

SDK for Angular contains	Table of contents
projects/solidgate/ – source for the Angular library (SDK) dist – compiled build output angular.json – Angular CLI configuration package.json – project metadata and dependency definitions	Installation Usage Development server Build

Installation

Run the following command in your Angular project:

``
npm i @solidagate/angular-sdk
`




Usage

$3

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
[merchantData]="merchantData"
[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
[merchantData]="merchantData"
[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
[merchantData]="merchantData"
[formParams]="formParams"
(readyPaymentInstance)="sdkInstance = $event"
>

*ngIf="!!sdkInstance"
(click)="sdkInstance?.submit()"
>
Submit

`

If you need current validation state use iteraction event and cache it

$3

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
[resignRequest]="resignRequest"
[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
[resignRequest]="resignRequest"
[appearance]="appearance"
(mounted)="log($event)"
(interaction)="log($event)"
(readyResignInstance)="sdkInstance = $event"
>

*ngIf="!!sdkInstance"
(click)="sdkInstance?.submit()"
>
Submit

``