FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

angular-sdk/projects/solidgate/angular-sdk at master · solidgate-tech/angular-sdk · GitHub

/ angular-sdk Public

Breadcrumbs

  1. angular-sdk
  2. projects
  3. solidgate

angular-sdk

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

Breadcrumbs

  1. angular-sdk
  2. projects
  3. solidgate

angular-sdk

README.md

Solidgate Angular SDK

This repository is an Angular wrapper for the Solidgate Client Software Development Kit (SDK).

Check our

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 install --save @solidgate/angular-sdk

Usage

Payment form

Module Setup

Add SolidPaymentModule to your feature (or app module):

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 { }

Basic Usage

To render a payment form component:

import { Component } from '@angular/core';
import { InitConfig, SdkMessage, MessageType, ClientSdkInstance } from '@solidgate/angular-sdk';

@Component({
  selector: 'app-payment',
  template: `
    <ngx-solid-payment
      [merchantData]="merchantData"
      (mounted)="onMounted($event)"
      (success)="onSuccess($event)"
      (fail)="onFail($event)"
      (error)="onError($event)"
    ></ngx-solid-payment>
  `
})
export class PaymentComponent {
  // For merchantData structure and generation, see:
  // https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/
  merchantData: InitConfig['merchantData'] = {
    merchant: 'YOUR_MERCHANT_ID',
    signature: 'YOUR_SIGNATURE',
    paymentIntent: 'YOUR_PAYMENT_INTENT'
  };

  // For complete list of callbacks and their usage, see:
  // https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/
  onMounted(event: SdkMessage[MessageType.Mounted]): void {}
  onSuccess(event: SdkMessage[MessageType.Success]): void {}
  onFail(event: SdkMessage[MessageType.Fail]): void {}
  onError(event: SdkMessage[MessageType.Error]): void {}
}

For detailed information about merchantData structure, available callbacks, configuration options, and mobile responsiveness, refer to the Payment guide.

Custom Container for Payment Buttons

To render Google Pay, Apple Pay, or PayPal buttons in custom containers:

<ngx-solid-payment
  [merchantData]="merchantData"
  [googlePayContainer]="googlePayContainer"
  [applePayContainer]="applePayContainer"
  [paypalContainer]="paypalContainer"
></ngx-solid-payment>

<div #googlePayContainer></div>
<div #applePayContainer></div>
<div #paypalContainer></div>

To render Pix, Pix QR, Bizum, Blik, or MB WAY buttons in custom containers:

<ngx-solid-payment
  [merchantData]="merchantData"
  [pixContainer]="pixContainer"
  [pixQrContainer]="pixQrContainer"
  [bizumContainer]="bizumContainer"
  [blikContainer]="blikContainer"
  [mbwayContainer]="mbwayContainer"
></ngx-solid-payment>

<div #pixContainer></div>
<div #pixQrContainer></div>
<div #bizumContainer></div>
<div #blikContainer></div>
<div #mbwayContainer></div>

Custom Submit Flow

To use your own submit button, disable the form button through formParams:

formParams: InitConfig['formParams'] = {
  allowSubmit: false
}

Then subscribe to the SDK instance and use the submit method:

<ngx-solid-payment
  [merchantData]="merchantData"
  [formParams]="formParams"
  (readyPaymentInstance)="sdkInstance = $event"
  (interaction)="isFormValid = $event.isValid"
></ngx-solid-payment>

<button 
  *ngIf="sdkInstance" 
  (click)="sdkInstance?.submit()"
  [disabled]="!isFormValid"
>
  Submit Payment
</button>

For complete information about available callbacks, configuration options, and mobile responsiveness, refer to the Payment guide.

Resign form

Module Setup

Add SolidResignModule to your feature (or app module):

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 { }

Basic Usage

To render a resign payment form component:

import { Component } from '@angular/core';
import { ResignRequest, SdkMessage, MessageType } from '@solidgate/angular-sdk';

@Component({
  selector: 'app-resign',
  template: `
    <ngx-solid-resign
      [resignRequest]="resignRequest"
      (mounted)="onMounted($event)"
    ></ngx-solid-resign>
  `
})
export class ResignComponent {
  // For resignRequest structure and generation, see:
  // https://docs.solidgate.com/payments/integrate/payment-form/resign-payment-form/
  resignRequest: ResignRequest = {
    merchant: 'YOUR_MERCHANT_ID',
    signature: 'YOUR_SIGNATURE',
    resignIntent: 'YOUR_RESIGN_INTENT'
  };

  onMounted(event: SdkMessage[MessageType.Mounted]): void {}
}

For detailed information about resignRequest structure, configuration options, and available callbacks, refer to the Resign payment form documentation.

Custom Submit Flow

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:

import { ResignFormConfig } from '@solidgate/angular-sdk'

resignFormConfig: ResignFormConfig = {
  appearance: {
    allowSubmit: false
  }
}
<ngx-solid-resign
  [resignRequest]="resignRequest"
  [appearance]="resignFormConfig.appearance"
  (interaction)="isFormValid = $event.isValid"
  (readyResignInstance)="sdkInstance = $event"
></ngx-solid-resign>

<button 
  *ngIf="sdkInstance" 
  (click)="sdkInstance?.submit()"
  [disabled]="!isFormValid"
>
  Submit
</button>

Development

To set up the development server:

  1. Navigate to the project root directory:

    cd angular-sdk

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run serve:example

  4. Open your browser and navigate to http://localhost:4200/.

Build

To build the SDK:

  1. Navigate to the project root directory:

    cd angular-sdk

  2. Run the build command:

    npm run build:sdk

  3. The build artifacts will be stored in the dist/ directory.

Looking for help? Contact us
Want to contribute? Submit a pull request

Back | FazBrowse Home | New Git URL