feat(RNPSW): : add plan and invoice_limit props for pre-defined plan subscription (#181)

* feat(RNPSW): add plan prop

add plan prop to provide option for creating  subscription to predefined plan on paystack.

This is in response to [issue #162](#162)

* fix(RNPSW): add `invoice_limit` prop

add `invoice_limit` prop, this is the number of times to charge customer during subscription to plan

* fix(RNPSW): correct the planCodeString prop name

Author: opmat

README.md

@@ -121,6 +121,8 @@ function Pay(){
 | `billingEmail(required by paystack)` |                                                                                    Billers email                                                                                    |                                            default: `nill` |
 | `billingMobile`                      |                                                                                   Billers mobile                                                                                    |                                            default: `nill` |
 | `billingName`                        |                                                                                    Billers Name                                                                                     |                                            default: `nill` |
+| `plan`                         |    Specify plan code generated from the Paystack Dashboard or API to create a subscription to a predefined plan by the transaction. The plan code is a unique code given to every plan, it is used to identify a particular plan. Here's an example of usage: `plan: "PLANCODE"`. The `PLANCODE` comes in the format `PLN_xxxxxxxxxx`  *NOTE*: _This would invalidate/override the value provided in `amount`_    |                                            default: `nill` |
+| `invoice_limit`                         |    Specify the number of times to charge customer during subscription to plan (integer). Works together with the `plan` prop    |                                            default: `nill` |
 | `subaccount`                         |    Specify subaccount code generated from the Paystack Dashboard or API to enable Split Payment on the transaction. Here's an example of usage: `subaccount: "SUB_ACCOUNTCODE"`     |                                            default: `nill` |
 | `split_code`                        |                                                                                           Specify _split_code_ generated from the Paystack Dashboard under _Transaction Splits menu_ or API to enable Multi-Split Payment on the transaction. According to Paystack's documentation available [here](https://paystack.com/docs/payments/multi-split-payments/), Multi-split enables merchants to split the settlement for a transaction across their payout account, and one or more subaccounts. Here's an example of usage: `split_code: "SPL_xxxxxxx"`                                                                                              |                                            default: `nill` |
 | `split`                        |                                                                                           Specify _split_ object to enable Dynamic Multi-Split Payment on the transaction. According to Paystack's documentation available [here](https://paystack.com/docs/payments/multi-split-payments/#dynamic-splits), Sometimes, you can't determine a split configuration until later in the purchase flow. With dynamic splits, you can create splits on the fly. The Structure is defined [in the Dynamic Multi-Split Structure below](#dynamic-multi-split-payment-object-structure)                                                                                              |                                            default: `nill` |

development/paystack.tsx

@@ -19,6 +19,8 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
     channels = ['card'],
     refNumber,
     billingName,
+    plan,
+    invoice_limit,
     subaccount,
     split_code,
     split,
@@ -70,6 +72,11 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
   const dynamicSplitString = dynamicSplitObjectIsValid(split) ? `split: ` + JSON.stringify(split)  + `,` : ''; // should only send split for dynamic multi-account split with the correct split object as defined
   //Sometimes, you can't determine a split configuration until later in the purchase flow. With dynamic splits, you can create splits on the fly. This can be achieved by passing a split object
 
+  const planCodeString = plan ? `plan: '${plan}',` : ''; // should only send plan with the predefined plan_code as generated on paystack dashboard if present, else if blank, it will be ignored.
+  // Please note that when plan is provided, the amount prop will be ignored
+
+  const invoiceLimitString = invoice_limit? `invoice_limit: ${invoice_limit},` : ''; // should only send invoice limit as integer when plan subscription is specified
+
   const Paystackcontent = `   
       <!DOCTYPE html>
       <html lang="en">
@@ -95,6 +102,8 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
                 currency: '${currency}',
                 ${getChannels(channels)}
                 ${refNumberString}
+                ${planCodeString}
+                ${invoiceLimitString}
                 ${subAccountString}
                 ${splitCodeString}
                 ${dynamicSplitString}

development/types/index.ts

@@ -39,6 +39,8 @@ export interface PayStackProps {
   channels?: PaymentChannels[];
   refNumber?: string;
   billingName?: string;
+  plan?: string;
+  invoice_limit?: number;
   subaccount?: string;  
   split_code?: string;
   split?: DynamicMultiSplitProps;