mainstack-payments 0.0.0

package/.env.sample

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=""

package/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+build
+coverage
+vite.config.ts
+/commitlint.config.cjs

package/.eslintrc.json

@@ -0,0 +1,95 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier/prettier",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
+  ],
+  "plugins": [
+    "react-hooks",
+    "@typescript-eslint",
+    "prettier",
+    "react",
+    "import",
+    "jsx-a11y"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": ["./tsconfig.json"]
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-var": 2,
+    "semi": 0,
+    "func-names": 0,
+    "default-param-last": 0,
+    "camelcase": 0,
+    "consistent-return": 0,
+    "no-console": 1,
+    "no-unused-expressions": 0,
+    "no-plusplus": 0,
+    "no-underscore-dangle": 0,
+    "no-nested-ternary": 0,
+    "object-shorthand": 0,
+    "class-methods-use-this": 0,
+    "import/extensions": 0,
+    "import/no-unresolved": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "jsx-a11y/no-autofocus": 0,
+    "max-classes-per-file": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 0,
+    "no-param-reassign": 0,
+    "no-prototype-builtins": 0,
+    "no-unsafe-optional-chaining": 0,
+    "radix": 0,
+    "react/prop-types": 0,
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": 0,
+    "react/no-children-prop": 0,
+    "react/jsx-key": 0,
+    "react/display-name": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/no-unescaped-entities": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-unsafe-assignment": 0,
+    "@typescript-eslint/restrict-template-expressions": 0,
+    "@typescript-eslint/no-unsafe-argument": 0,
+    "@typescript-eslint/no-unsafe-call": 0,
+    "@typescript-eslint/no-unsafe-member-access": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-floating-promises": 0,
+    "@typescript-eslint/no-unsafe-return": 0,
+    "prefer-const": 1,
+    "@typescript-eslint/no-misused-promises": 0,
+    "@typescript-eslint/no-unused-vars": 1,
+    "no-sparse-arrays": 0
+  }
+}

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+### Subject / Header
+
+State the subject or header of the PR e.g Setting Up Code Base
+
+### What changed?
+
+Here state the over view of what changed. Also inculde if a command is needed to be ran after pulling. This is an example
+
+- Setting up the code base for frontend dashboard
+- Added Pull Pequest template and other file template
+- New package are added, thus the need to run `yarn install`.
+
+### Whats Remaining
+
+Here state if anything is missing that should be in the PR but its not, this so that the person reviewing the code would know whats missing and can test better

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn ts-error $1
+yarn format $1
+yarn lint $1

package/.prettierignore

@@ -0,0 +1,7 @@
+/dist
+/build
+/coverage
+node_modules
+/public
+/commitlint.config.cjs
+

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "arrowParens": "always",
+  "useTabs": false,
+  "bracketSpacing": true,
+  "insertPragma": true,
+  "semi": true,
+  "tabWidth": 2
+}

package/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "vivaxy.vscode-conventional-commits",
+    "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker",
+    "vincaslt.highlight-matching-tag",
+    "esbenp.prettier-vscode",
+    "usernamehw.errorlens"
+  ]
+}

package/README.md

@@ -0,0 +1,113 @@
+<!-- @format -->
+
+# Mainstack Payments
+
+This is a documentation of how the Mainstack Payments library works, and how to use it in your project.
+
+## Installation
+
+To install the Mainstack Payments library, you need to run the following command in your terminal:
+
+```bash
+yarn add mainstack-payments
+```
+
+## Usage
+
+To use the Mainstack Payments library, you need to import the library into your project, and then pass a config object to `paymentConfig` prop.
+
+```jsx
+import { MainstackPayments } from "mainstack-payments";
+
+export default function Home() {
+  const config = {};
+  return (
+    <Box>
+      <MainstackPayment paymentConfig={config} />
+    </Box>
+  );
+}
+```
+
+The config object should contain the following properties:
+
+- `amount*`: The amount for the product to be paid
+- `accountId*`: The account ID of the user making the payment
+- `currency*`: The currency to be used for the payment
+- `reference*`: Uniquely generated identifier for this payment
+- `transactionFeesSlug*`: The slug of the transaction fees to be applied to the payment usually determined by the backend, e.g 'store-pro-plan'
+- `userAllowsWalletPayment*`: A boolean value that states if the merchant has allowed wallet payment
+- `userAllowsCardPayment*`: A boolean value that states if the merchant has allowed card payment
+- `metadata*`: An object that contains additional information about the payment. See more on this [here](#metadata)
+- `baseUrl*`: The base URL of the legacy API. This API is what is used primarily to make payments. It is used initialize, chrage and verify payment.
+- `authMSUrl*`: The base URL of the Mainstack Auth API. This API is used to get transaction fees based on the user's settings.
+- `paymentOptions`: An array of payment options that should be enabled for the user can select from. The options are 'paystack', 'startbutton', 'wallet', 'stripe'
+- `paystackRedirectUrl`: The URL to redirect to after a successful payment with Paystack or Startbutton. this is required if paystack or startbutton is enabled. More on this can be found [here](#paystackredirecturl)
+- `customizations`: This is an object that takes values for `theme_color` for the Pay button, `button_label` and `font_family` for the whole Payment page.
+
+#### metadata
+
+The `metadata` object should contain the following properties:
+
+- -`productName`: The name of the product being paid for
+- -`type`: The type of product being paid for
+- -`account_id`: The account ID of the user making the payment
+- -`user_id`: The user ID of the user making the payment
+- -`product_id`: The product ID of the product being paid for
+- -`mainstack_product_type`: What Category of Mainsatck Product is being paid for, accepted values are 'store', 'editor', 'bookings', 'mediakit', 'invoicing', 'hosted_courses'
+- `[key:string]` : Any other key-value pair that you want to add to the metadata object
+
+#### paystackRedirectUrl
+
+The `paystackRedirectUrl` is the URL to redirect to after a successful payment with Paystack or Startbutton. This page will be created by you and should contain the following code:
+
+```jsx
+import { useEffect } from "react";
+
+const PostMessagePage = () => {
+  useEffect(() => {
+    (() => {
+      window.parent.postMessage({ type: "Payment Completed" }, "*");
+    })();
+  }, []);
+
+  return <div></div>;
+};
+
+export default PostMessagePage;
+```
+
+The aim of this is to send a postMessage to the iframe that loads Startbutton or Paystack to let them know that payment is complete and they can close the iframe and verify the payment.
+
+## Extra Props
+
+Other Props that can be passed to the `MainstackPayments` component are:
+
+- `summaryTitle`: This takes a string or ReactNode and is used to replace the title of the payment summary section, the default is always the Product name.
+- `customForm`: This takes a ReactNode used to add a custom form to the payment page. This prop should also be used with `customFormValues`, which is an object with the initial values of the custom form, and `customFormValidation` which should contan an object with yup validation schema for the custom form. More on this can be found [here](#customform)
+- `onPaymentComplete`: This is a callback function that is called when the payment is completed.
+- `onGoBack`: This is a callback function that is called when the user clicks the back button on the payment page.
+- `onInitializePayment`: This function is called just as the payment is about to be initialized and is useful for triggering any actions before the payment is initialized, like triggering your `formik.validateForm()` to validate the errors on your custom form and handle them accordingly.
+
+#### customForm
+
+In order to update the formik values for your custom form, you can add a `ref` to the `MainstackPayments` component and call the `updateCustomFormValues` method on the ref with the new values in your onChange handler. The `updateCustomFormValues` method takes 2 arguments, the first is a string of the formik value you want to update and the second is the value you want to update it with.
+
+```jsx
+import { useRef } from "react";
+
+const ref = useRef(null);
+
+const handleChange = (e) => {
+  ref.current.updateCustomFormValues("name", e.target.value);
+};
+<MainstackPayments
+  ref={ref}
+  customForm={CustomForm}
+  customFormValues={{ name: "John Doe" }}
+  customFormValidation={customFormValidation}
+  onChange={handleChange}
+/>;
+```
+
+> Happy Hacking !!!

package/build/_redirects

@@ -0,0 +1 @@
+/* /index.html 200