mainstack-payments 1.0.58 → 1.0.60

package/README.md

@@ -1,18 +1,21 @@
+<!-- @format -->
+
 <!--@@joggrdoc@@-->
 <!-- @joggr:version(v2):end -->
 <!-- @joggr:warning:start -->
-<!-- 
-  _   _   _    __        __     _      ____    _   _   ___   _   _    ____     _   _   _ 
+<!--
+  _   _   _    __        __     _      ____    _   _   ___   _   _    ____     _   _   _
  | | | | | |   \ \      / /    / \    |  _ \  | \ | | |_ _| | \ | |  / ___|   | | | | | |
  | | | | | |    \ \ /\ / /    / _ \   | |_) | |  \| |  | |  |  \| | | |  _    | | | | | |
  |_| |_| |_|     \ V  V /    / ___ \  |  _ <  | |\  |  | |  | |\  | | |_| |   |_| |_| |_|
  (_) (_) (_)      \_/\_/    /_/   \_\ |_| \_\ |_| \_| |___| |_| \_|  \____|   (_) (_) (_)
-                                                              
-This document is managed by Joggr. Editing this document could break Joggr's core features, i.e. our 
-ability to auto-maintain this document. Please use the Joggr editor to edit this document 
+
+This document is managed by Joggr. Editing this document could break Joggr's core features, i.e. our
+ability to auto-maintain this document. Please use the Joggr editor to edit this document
 (link at bottom of the page).
 -->
 <!-- @joggr:warning:end -->
+
 ## Installation
 
 To install the Mainstack Payments library, you need to run the following command in your terminal:
@@ -61,121 +64,121 @@ function MyApp({ Component, pageProps }: AppProps) {
 
 The config object should contain the following properties:
 
-* `amount*`: The amount for the product to be paid
+- `amount*`: The amount for the product to be paid
 
-* `accountId*`: The account ID of the user making the payment
+- `accountId*`: The account ID of the user making the payment
 
-* `currency*`: The currency to be used for the payment
+- `currency*`: The currency to be used for the payment
 
-* `transactionFeesSlug*`: The slug of the transaction fees to be applied to the payment usually determined by the backend, e.g 'store-pro-plan'
+- `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
+- `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
+- `userAllowsCardPayment*`: A boolean value that states if the merchant has allowed card payment
 
-* `userAllowsCryptoPayment*`: A boolean value that states if the merchant has allowed crypto wallet payments.
+- `userAllowsCryptoPayment*`: A boolean value that states if the merchant has allowed crypto wallet payments.
 
-* `metadata*`: An object that contains additional information about the payment. See more on this [here](#metadata)
+- `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 initialise, charge and verify payment.
+- `baseUrl*`: The base URL of the legacy API. This API is what is used primarily to make payments. It is used initialise, charge and verify payment.
 
-* `hasDiscountCode`: A optional boolean to show the discount code input. Default is false.
+- `hasDiscountCode`: A optional boolean to show the discount code input. Default is false.
 
-* `mainstackProductId`: A User's ID for a particular product, e.g store\_id, bookings\_id etc.
+- `mainstackProductId`: A User's ID for a particular product, e.g store_id, bookings_id etc.
 
-* `STRIPE_SECRET_KEY*`: Stripe secret key for stripe payments, usually stored in an env.
+- `STRIPE_SECRET_KEY*`: Stripe secret key for stripe payments, usually stored in an env.
 
-* `STRIPE_SECRET_KEY_GBP*`: Stripe secret key for stripe payments in GBP, usually stored in an env.
+- `STRIPE_SECRET_KEY_GBP*`: Stripe secret key for stripe payments in GBP, usually stored in an env.
 
-* `STRIPE_SECRET_KEY_CAD*`: Stripe secret key for stripe payments in CAD, usually stored in an env.
+- `STRIPE_SECRET_KEY_CAD*`: Stripe secret key for stripe payments in CAD, usually stored in an env.
 
-* `merchantBearsTax` : This is a boolean to indicate if the merchant bears tax charges or not.
+- `merchantBearsTax` : This is a boolean to indicate if the merchant bears tax charges or not.
 
-* `applyTrancheFee`: Boolean that is passed to the transaction fees endpoint and dictates if a tranch fee should be applied for transaction fees.This is specifically for Pay In Tranches payments. Default is false.
+- `applyTrancheFee`: Boolean that is passed to the transaction fees endpoint and dictates if a tranch fee should be applied for transaction fees.This is specifically for Pay In Tranches payments. Default is false.
 
-* `shouldApplyTax`: A boolean that determines if tax fees should be calculated and collected. Default is false.
+- `shouldApplyTax`: A boolean that determines if tax fees should be calculated and collected. Default is false.
 
-* `ip`: This is for the user's ip address to determine their tax fee. Only needed if you want to collect tax fees.
+- `ip`: This is for the user's ip address to determine their tax fee. Only needed if you want to collect tax fees.
 
-* `paymentOptions`: An array of payment options that should be enabled for the user can select from. The options are 'paystack', 'startbutton', 'wallet', 'stripe', 'crypto'
+- `paymentOptions`: An array of payment options that should be enabled for the user can select from. The options are 'paystack', 'startbutton', 'wallet', 'stripe', 'crypto'
 
-* `paymentRedirectUrl`: The URL to redirect to after a successful payment with Paystack, Startbutton or Stripe UK payments (which may require 3DS). More on this can be found [here](#paystackredirecturl)
+- `paymentRedirectUrl`: The URL to redirect to after a successful payment with Paystack, Startbutton or Stripe UK payments (which may require 3DS). More on this can be found [here](#paystackredirecturl)
 
-* `cryptoRedirectUrl`: The URL to redirect to after a successful crypto wallet payment. This is different to `paymentRedirectUrl` as you are fully in control of this page and should ideally be the receipt page. The following url query parameters will be added to the url from the payment library: `reference` : payment reference generated by mainstack, `payment_intent` : generated by stripe. This is required if `userAllowsCryptoPayment` is true.
+- `cryptoRedirectUrl`: The URL to redirect to after a successful crypto wallet payment. This is different to `paymentRedirectUrl` as you are fully in control of this page and should ideally be the receipt page. The following url query parameters will be added to the url from the payment library: `reference` : payment reference generated by mainstack, `payment_intent` : generated by stripe. This is required if `userAllowsCryptoPayment` is true.
 
-* `customizations`: This is an object that takes values that adjust layout, styling or display of elements on the library. See full description [here](https://app.joggr.io/app/documents/b5b2ff2f-550d-4057-bed3-441870eaaf5d/edit#customizations).
+- `customizations`: This is an object that takes values that adjust layout, styling or display of elements on the library. See full description [here](https://app.joggr.io/app/documents/b5b2ff2f-550d-4057-bed3-441870eaaf5d/edit#customizations).
 
-* `paymentModel`: string that specifies if the payment model is 'ips' or 'default'
+- `paymentModel`: string that specifies if the payment model is 'ips' or 'default'
 
-* `isFreeTrial`: Boolean to specify if a subscription payment is a free trial.
+- `isFreeTrial`: Boolean to specify if a subscription payment is a free trial.
 
-* `merchantCountry`: A string that returns the country of the merchant.
+- `merchantCountry`: A string that returns the country of the merchant.
 
-* `isPowerUser`: A Boolean to specify if a merchant is a power user.
+- `isPowerUser`: A Boolean to specify if a merchant is a power user.
 
-* `itemsList`: This is an Array of objects used when multiple products are being purchased at once. e.g: event tickets or cart products. See object values [here](https://app.joggr.io/app/documents/b5b2ff2f-550d-4057-bed3-441870eaaf5d/edit#items-list)
+- `itemsList`: This is an Array of objects used when multiple products are being purchased at once. e.g: event tickets or cart products. See object values [here](https://app.joggr.io/app/documents/b5b2ff2f-550d-4057-bed3-441870eaaf5d/edit#items-list)
 
-* `payment_plan_id` : The Payment plan ID for IPS related payments.
+- `payment_plan_id` : The Payment plan ID for IPS related payments.
 
 #### metadata
 
 The `metadata` object should contain the following properties:
 
-* `productName`: The name of the product being paid for.
+- `productName`: The name of the product being paid for.
 
-* `productImage`: The image url of the product.
+- `productImage`: The image url of the product.
 
-* `type`: The type of product being paid for.
+- `type`: The type of product being paid for.
 
-* `account_id`: The account ID of the user making the payment
+- `account_id`: The account ID of the user making the payment
 
-* `user_id`: The user 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
+- `product_id`: The product ID of the product being paid for
 
-* `mainstack_product_type`: What Category of Mainstack Product is being paid for, accepted values are 'store', 'editor', 'bookings', 'mediakit', 'invoicing', 'hosted\_courses'
+- `mainstack_product_type`: What Category of Mainstack Product is being paid for, accepted values are 'store', 'editor', 'bookings', 'mediakit', 'invoicing', 'hosted_courses'
 
-* `quantity`: The quantity of a product being purchased.
+- `quantity`: The quantity of a product being purchased.
 
-* `[key:string]` : Any other key-value pair that you want to add to the metadata object
+- `[key:string]` : Any other key-value pair that you want to add to the metadata object
 
 #### Customizations
 
-* `theme_color`: custom color the the Pay button
+- `theme_color`: custom color the the Pay button
 
-* `button_label`: custom label for the Pay button
+- `button_label`: custom label for the Pay button
 
-* `font_family`: To set the font family for all the payment library texts and inputs
+- `font_family`: To set the font family for all the payment library texts and inputs
 
-* `hideDetails`: Boolean that hide the summary details section of the payment library. Default is false.
+- `hideDetails`: Boolean that hide the summary details section of the payment library. Default is false.
 
-* `hideBackButton` : Boolean to remove the back button that is next to the Pay button.
+- `hideBackButton` : Boolean to remove the back button that is next to the Pay button.
 
-* `isSingleColumn` : This converts the payment library layout from 2 columns to a single column. Not that this happens by default on mobile screens.
+- `isSingleColumn` : This converts the payment library layout from 2 columns to a single column. Not that this happens by default on mobile screens.
 
-* `padding` : This can be used to adjust the surrounding padding of the payment library.
+- `padding` : This can be used to adjust the surrounding padding of the payment library.
 
-* `showDefaultInputFields` This is an object used to determine what default input fields will be shown on the checkout form. They include:
+- `showDefaultInputFields` This is an object used to determine what default input fields will be shown on the checkout form. They include:
 
-  * `email` : For the Email input. Default is true.
+  - `email` : For the Email input. Default is true.
 
-  * `fullname`: For the Name input. Default is true.
+  - `fullname`: For the Name input. Default is true.
 
-  * `phone`: For the PhoneNumber input. Default is false.
+  - `phone`: For the PhoneNumber input. Default is false.
 
-* `summaryWidth`: This takes a width in pixels to set a fixed width for the summary section.
+- `summaryWidth`: This takes a width in pixels to set a fixed width for the summary section.
 
 #### itemsList
 
-* `name*`: String for the name of the product.
+- `name*`: String for the name of the product.
 
-* `price*`: Type of Number for the product price.
+- `price*`: Type of Number for the product price.
 
-* `currency*`: Currency code of the price.
+- `currency*`: Currency code of the price.
 
-* `quantity*` : The amount of each product being purchased.
+- `quantity*` : The amount of each product being purchased.
 
-* `image`: Optional image url for each product.
+- `image`: Optional image url for each product.
 
 The `paymentRedirectUrl` is the URL to redirect to after a successful payment with Paystack, Startbutton or Stripe UK. This page will be created by you and should contain the following code:
 
@@ -201,46 +204,40 @@ The aim of this is to send a postMessage to the iframe that loads the payment op
 
 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.
+- `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.
 
-* `checkoutTitle`: This takes a string or ReactNode and is used to replace the title of the checkout form section, the default is always "**Checkout Details"**
+- `checkoutTitle`: This takes a string or ReactNode and is used to replace the title of the checkout form section, the default is always "**Checkout Details"**
 
-* `customForm`: This takes a ReactNode used to add a custom form to the payment page.
+- `customForm`: This takes a ReactNode used to add a custom form to the payment page.
 
-* `defaultFormValues`: This is an object with `fullname` and `email` keys. Their values are passed to their respective inputs as default values.
+- `defaultFormValues`: This is an object with `fullname` and `email` keys. Their values are passed to their respective inputs as default values.
 
-* `preCheckoutBanner`: This takes a ReactNode to add a banner to the top of the checkout page.
+- `preCheckoutBanner`: This takes a ReactNode to add a banner to the top of the checkout page.
 
-* `height`: this takes a value in pixels to set a fixed height for the checkout library component.
+- `height`: this takes a value in pixels to set a fixed height for the checkout library component.
 
-* `FooterElement` : This takes a ReactNode to display a component at the bottom of the checkout page.
+- `FooterElement` : This takes a ReactNode to display a component at the bottom of the checkout page.
 
-* `onPaymentComplete`: This is a callback function that is called when the payment is completed. It contains a payload that will include the amount, default input values, and reference of the payment, as well as some other optional data.
+- `onPaymentComplete`: This is a callback function that is called when the payment is completed. It contains a payload that will include the amount, default input values, and reference of the payment, as well as some other optional data.
 
-* `onGoBack`: This is a callback function that is called when the user clicks the back button on the payment page.
+- `onGoBack`: This is a callback function that is called when the user clicks the back button on the payment page.
 
-* `onInitializePayment`: This is an async 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 validating your custom form or making an api call to validate something with the user's name or email before proceeding with payment. It contains an argument that has the values for the default form inputs, and must return a promise that resolves an object with a `terminate` boolean property. The payment initialization will terminate immediately the promise resolves depending on what the value of `terminate` is.
-
-* `onDiscountApplied`: This is a callback that gets called when discount get's applied on checkout.
-
-* `onDiscountRemoved`: This is a callback that get's called when discount is removed from the checkout.
+- `onInitializePayment`: This is an async 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 validating your custom form or making an api call to validate something with the user's name or email before proceeding with payment. It contains an argument that has the values for the default form inputs, and must return a promise that resolves an object with a `terminate` boolean property. The payment initialization will terminate immediately the promise resolves depending on what the value of `terminate` is.
 
 ```typescript
-      <MainstackPayments
-              paymentConfig={config}
-              onGoBack={goBack}
-              onPaymentComplete={(e) => onPaymentSuccess(e)}
-              customForm={
-                <>{customForm}</>
-              }
-              onInitializePayment={onInitPayment}
-       />
+<MainstackPayments
+  paymentConfig={config}
+  onGoBack={goBack}
+  onPaymentComplete={(e) => onPaymentSuccess(e)}
+  customForm={<>{customForm}</>}
+  onInitializePayment={onInitPayment}
+/>
 ```
 
 > Happy Hacking !!!
 
-<!-- @joggr:editLink(b5b2ff2f-550d-4057-bed3-441870eaaf5d):start -->
----
+## <!-- @joggr:editLink(b5b2ff2f-550d-4057-bed3-441870eaaf5d):start -->
+
 <a href="https://app.joggr.io/app/documents/b5b2ff2f-550d-4057-bed3-441870eaaf5d/edit">
   <img src="https://cdn.joggr.io/assets/static/badges/joggr-document-edit.svg?did=b5b2ff2f-550d-4057-bed3-441870eaaf5d" alt="Edit doc on Joggr" />
 </a>

package/build/{CashAppPayment-ec1303ed.js → CashAppPayment-d1f2d636.js}

@@ -1,10 +1,10 @@
 import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { I as b, u as A, a as v, b as E, v as H, C as k, F as x, T as z } from "./index-b2bd5651.js";
-import { customSnackbar as B, SnackbarType as M, ExpandMoreIcon as $ } from "mainstack-design-system";
-import { memo as j, useState as T, useCallback as P } from "react";
-import "react-dom";
-import "axios";
-const F = (i) => /* @__PURE__ */ c(b, { viewBox: "0 0 32 32", ...i, fill: "none", children: [
+import { u as b, a as A, v, C as E } from "./index-35e9efb8.js";
+import { customSnackbar as H, SnackbarType as j, ExpandMoreIcon as k } from "mainstack-design-system";
+import { u as z } from "./payments-a2629fa6.js";
+import { memo as B, useState as M, useCallback as x } from "react";
+import { j as $, F as P, T } from "./ui-bf54450a.js";
+const F = (i) => /* @__PURE__ */ c($, { viewBox: "0 0 32 32", ...i, fill: "none", children: [
   /* @__PURE__ */ c("g", { clipPath: "url(#clip0_3703_1664)", children: [
     /* @__PURE__ */ a(
       "path",
@@ -24,7 +24,7 @@ const F = (i) => /* @__PURE__ */ c(b, { viewBox: "0 0 32 32", ...i, fill: "none"
     )
   ] }),
   /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a("clipPath", { id: "clip0_3703_1664", children: /* @__PURE__ */ a("rect", { width: "32", height: "32", rx: "16", fill: "white" }) }) })
-] }), V = j(
+] }), V = B(
   ({
     Request: i,
     metadata: d,
@@ -33,9 +33,9 @@ const F = (i) => /* @__PURE__ */ c(b, { viewBox: "0 0 32 32", ...i, fill: "none"
     redirectUrl: o,
     checkForErrors: h
   }) => {
-    const m = A(), { mutate: r, isLoading: I } = v(i), { mutate: f, isLoading: L } = E(i), [_, C] = T(!1), u = I || L || _, g = P(async () => {
+    const m = z(), { mutate: r, isLoading: L } = b(i), { mutate: f, isLoading: _ } = A(i), [I, C] = M(!1), u = L || _ || I, g = x(async () => {
       var w;
-      const n = H(), y = {
+      const n = v(), y = {
         ...d,
         reference: n
       };
@@ -91,9 +91,9 @@ const F = (i) => /* @__PURE__ */ c(b, { viewBox: "0 0 32 32", ...i, fill: "none"
             );
         }
       } catch (t) {
-        C(!1), console.error(t), B(
+        C(!1), console.error(t), H(
           ((w = t == null ? void 0 : t.raw) == null ? void 0 : w.message) ?? (t == null ? void 0 : t.message) ?? t ?? "We couldn't complete your payment",
-          M.error
+          j.error
         );
       }
     }, [
@@ -105,20 +105,20 @@ const F = (i) => /* @__PURE__ */ c(b, { viewBox: "0 0 32 32", ...i, fill: "none"
       d,
       o,
       C
-    ]), S = P(async () => {
+    ]), S = x(async () => {
       await h() || g();
     }, [h, g]);
     return /* @__PURE__ */ a(
-      k,
+      E,
       {
         onClick: S,
         disabled: u,
         isLoading: u,
-        children: /* @__PURE__ */ c(x, { justifyContent: "space-between", w: "full", alignItems: "center", children: [
-          /* @__PURE__ */ c(x, { alignItems: "center", gap: "12px", children: [
+        children: /* @__PURE__ */ c(P, { justifyContent: "space-between", w: "full", alignItems: "center", children: [
+          /* @__PURE__ */ c(P, { alignItems: "center", gap: "12px", children: [
             /* @__PURE__ */ a(F, { boxSize: "32px" }),
             /* @__PURE__ */ a(
-              z,
+              T,
               {
                 color: "#111215",
                 fontFamily: "Bricolage Grotesque",
@@ -130,7 +130,7 @@ const F = (i) => /* @__PURE__ */ c(b, { viewBox: "0 0 32 32", ...i, fill: "none"
               }
             )
           ] }),
-          /* @__PURE__ */ a($, { transform: "rotate(-90deg)", boxSize: "24px" })
+          /* @__PURE__ */ a(k, { transform: "rotate(-90deg)", boxSize: "24px" })
         ] })
       }
     );

package/build/{CryptoPayments-018fa85c.js → CryptoPayments-73071cf0.js}

@@ -1,10 +1,10 @@
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { I as _, u as S, a as b, b as E, C as z, F as h, T as M, v as $ } from "./index-b2bd5651.js";
-import { ExpandMoreIcon as j, customSnackbar as k, SnackbarType as v } from "mainstack-design-system";
-import { useState as B } from "react";
-import "react-dom";
-import "axios";
-const F = (s) => /* @__PURE__ */ c(_, { viewBox: "0 0 32 32", ...s, fill: "none", children: [
+import { u as I, a as S, C as b, v as E } from "./index-35e9efb8.js";
+import { ExpandMoreIcon as j, customSnackbar as z, SnackbarType as M } from "mainstack-design-system";
+import { u as $ } from "./payments-a2629fa6.js";
+import { useState as k } from "react";
+import { j as v, F as h, T as B } from "./ui-bf54450a.js";
+const F = (s) => /* @__PURE__ */ c(v, { viewBox: "0 0 32 32", ...s, fill: "none", children: [
   /* @__PURE__ */ n("g", { clipPath: "url(#clip0_2605_970)", children: /* @__PURE__ */ n(
     "path",
     {
@@ -21,9 +21,9 @@ const F = (s) => /* @__PURE__ */ c(_, { viewBox: "0 0 32 32", ...s, fill: "none"
   redirectUrl: o,
   checkForErrors: g
 }) => {
-  const m = S(), { mutate: u, isLoading: L } = b(s), { mutate: w, isLoading: x } = E(s), [P, p] = B(!1), d = L || x || P, I = async () => {
-    var f;
-    const a = $(), y = {
+  const m = $(), { mutate: u, isLoading: L } = I(s), { mutate: w, isLoading: x } = S(s), [P, p] = k(!1), d = L || x || P, _ = async () => {
+    var y;
+    const a = E(), f = {
       ...C,
       reference: a
     };
@@ -33,7 +33,7 @@ const F = (s) => /* @__PURE__ */ c(_, { viewBox: "0 0 32 32", ...s, fill: "none"
           amount: r,
           reference: a,
           currency: l,
-          metadata: y,
+          metadata: f,
           is_crypto_payment: !0
         },
         {
@@ -49,7 +49,7 @@ const F = (s) => /* @__PURE__ */ c(_, { viewBox: "0 0 32 32", ...s, fill: "none"
         {
           amount: r,
           currency: l,
-          metadata: y,
+          metadata: f,
           is_crypto_payment: !0
         },
         {
@@ -77,17 +77,17 @@ const F = (s) => /* @__PURE__ */ c(_, { viewBox: "0 0 32 32", ...s, fill: "none"
           throw new Error(t.message ?? "Couldn't load wallet integration");
       }
     } catch (e) {
-      p(!1), console.error(e), k(
-        ((f = e == null ? void 0 : e.raw) == null ? void 0 : f.message) ?? (e == null ? void 0 : e.message) ?? e ?? "We couldn't complete your payment",
-        v.error
+      p(!1), console.error(e), z(
+        ((y = e == null ? void 0 : e.raw) == null ? void 0 : y.message) ?? (e == null ? void 0 : e.message) ?? e ?? "We couldn't complete your payment",
+        M.error
       );
     }
   };
   return /* @__PURE__ */ n(
-    z,
+    b,
     {
       onClick: async () => {
-        await g() || I();
+        await g() || _();
       },
       disabled: d,
       isLoading: d,
@@ -95,7 +95,7 @@ const F = (s) => /* @__PURE__ */ c(_, { viewBox: "0 0 32 32", ...s, fill: "none"
         /* @__PURE__ */ c(h, { alignItems: "center", gap: "12px", children: [
           /* @__PURE__ */ n(F, { boxSize: "32px" }),
           /* @__PURE__ */ n(
-            M,
+            B,
             {
               color: "#111215",
               fontFamily: "Bricolage Grotesque",