@wealthOS/payments-react

Provides payment handling capability with a WealthOS backend.

Install

npm install --save @wealthOS/payments-react

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

import React, { Component } from 'react'

import { WOSPayments } from '@wealthOS/payments-react'
import '@wealthOS/payments-react/dist/index.css'

class Example extends Component {

  cb = () => {

  }

  render() {
    const config: PaymentConfig = {
      investor_id: "20001", 
      pot_id: "2311", 
      amount: "2300", 
      currency: "usd",
      payment_type: PaymentMethod.STRIPE, 
      stripe: {
        publishable_key: "xxxx", 
        client_secret: "xxxx"
      },
      client_token: "xxxx"
    };
    return <WOSPayments config={config} paymentCB={this.cb}></WOSPayments>
  }
}

WOSPayments

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

export interface WOSPaymentsProps {
    config: PaymentConfig;
    paymentCB: (status: any) => void;
    testMode?: boolean;
    lang?: "sl" | "en";
    paymentWidgetClassName?: string;
    paymentWidgetStyle?: React.CSSProperties;
    waitingWidgetClassName?: string;
    waitingWidgetStyle?: React.CSSProperties;
}

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;
    amount: string;
    currency: string;
    payment_type: PaymentMethod | string;
    client_token: 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: "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 props.

//css

.custom {
}
.custom .wos-form-footer > .wos-pay-btn {
  background: red;
}


//js

<WOSPayments paymentWidgetClassName="custom" config={config} paymentCB={cb}></WOSPayments>

Langauge support

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

License

MIT ©