@wealthOS/payments-ngx

Provides payment handling capability with a WealthOS backend.

Install

npm install --save @wealthOS/payments-ngx

Usage

This package allows developers to integrate a UI component to perform payment operation with a WealthOS tenant backend. Intention of this library is to wrap multiple payment methodologies such as Stripe, PayPal and Payoneer in to a single interface and flawlessly wire the payments to a WealthOS backend.

Note: Current implementation only support Stripe

// app.module.ts
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WOSPaymentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

// app.component.html
<lib-wos-payments *ngIf="config" [config]="config" [lang]="lang" (paymentStatus)="onPaymentStatus($event)"></lib-wos-payments>

// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  config = {
    investor_id: "20001", pot_id: "2311", amount: "2300", currency: "usd", purpose: 'cash',
    payment_type: "card", service_provider: 'stripe', stripe: {
      publishable_key: "xxxx", 
      client_secret: "xxxx"
    }
  };
  lang = 'sl';

  constructor() {

  }

  ngOnInit() {
  }

  onPaymentStatus(event: any) {
  }

  changeLanguage() {
    if (this.lang === 'en') {
      this.lang = 'sl';
    } else {
      this.lang = 'en';
    }
  }
}

WOSPaymentsComponent

This is the main component exposed from the library. Following are the inputs that supported by the widget,

config: PaymentConfig
lang: 'sl' | 'en'
paymentWidgetClassName?: string
waitingWidgetClassName?: string

In order to initialize it you need to have a configuation object.
Structure of the payment config,

export interface PaymentConfig {
    investor_id?: string;
    pot_id: string;
    service_provider: ServiceProvider | string;
    amount: string;
    currency: string;
    payment_type: PaymentMethod | string;
    stripe?: StripeConfig;
}

You should not manually create this object, it shuold be taken from <WealthOS tenant origin>/payments/v1/intent rest endpoint. Make sure you call this rest endpoint from your backend and forward the data recevied directly to the component as the configuration.

{
  investor_id: "20001", 
  pot_id: "2311", 
  amount: "2300", 
  currency: "usd", 
  payment_type: "card",
  service_provider: "stripe", 
  stripe: {
      // stripe configurations if needed
  }
}

Customizing look and feel

You can change the look and feel of payment widget by providing a class name to paymentWidgetClassName and waitingWidgetClassName inputs.

//css

::ng-deep.custom {
}
::ng-deep .custom .wos-form-footer > .wos-pay-btn {
    background: red !important;
}

::ng-deep .custom .wos-form-footer > .wos-pay-btn:hover {
    background: white !important;
}



//component

<lib-wos-payments *ngIf="config" [config]="config" paymentWidgetClassName="custom" [lang]="lang" (paymentStatus)="onPaymentStatus($event)"></lib-wos-payments>

Langauge support

The component currently support two languages, English and Sinhala. You can change the language using lang prop.

License

MIT ©