Purple Style Labs - Core PaymentProviders Plugin

Project Scope

The project will fulfill the following requirments

• View payment providers for Tenant
• Apply Tenant's config to payment providers
• Integrate various payment providers
• Give appropriate hooks to apply styling for Tenant

Contributing

Please read CONTRIBUTING to get started

Usage

npm i payment-providers
yarn add payment-providers

Please checkout the demo file to get started.

Available Providers PaymentProvider

• Razorpay: rzp
• PayPal: ppl
• CC Avenue: cca

These codes are used to identify payment providers in the PaymentProviders array

<paymentProviders> Component

Top level configuration for our paymentProviders system. It accepts config:PaymentProvidersConfig as a prop.

This is the only component you will need to import and use as a site developer.

<paymentProviders
  :config="config"
  @success="successHandler"
  @error="errorHandler"
  @dismiss="dismissHandler"
/>

Config :PaymentProvidersConfig

config: {
  siteName: String,
  paymentProviders: ['rzp', 'ppl'],
  payerData: Object,
  orderData: Object,
  tenantData: Object,
  razorpayConfig: RazorpayConfig,
  paypalConfig: PaypalConfig
}

paymentProviders Required : Ordered array of Payment providers. Set this to add/remove/order payment options

razorpayConfig Required if rzp in paymentProviders : Configuration options for RazorPay

paypalConfig Required if ppl in paymentProviders : Configuration options for PayPal

PaymentProviders Events

success error dismiss

Razorpay Configuration :RazorpayConfig

Details for Razorpay integration. Check Razorpay Docs for more details

 razorpayConfig: {
  key: 'YOUR_KEY_ID',
  name: 'Acme Corp',
  description: 'Test Transaction',
  image: 'https://example.com/your_logo',
  theme: {
    color: '#3399cc',
  },
},

key Required : Key ID generated from the Dashboard

name : Name of company as set in Razorpay Dashboard

prefill : Prefeill client details. Can be Empty

theme : Theme color of site

image : Site logo. Must be an absolute path.

amount Not Required Auto-set by backend : The transaction amount, expressed in the currency subunit, such as paise (in case of INR). For example, for an actual amount of ₹299.35, the value of this field should be 29935.

PayPal Configuration :PaypalConfig

Details for PayPal integration. Check Paypal Docs for more details

 paypalConfig: {
   key: String
 },

key Required : Key ID generated from the Dashboard

Sub-Component Definitions

Only for internal use. Not exporeted outside component scope.

<razorpay> Component

<razorpay :config="config.razorpayConfig" />

<paypal> Component

<paypal :config="config.paypalConfig" />