Accept payments page Implementaion

components/AcceptPayments/InlineCheckout.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import Divider from 'components/Divider'
+import LzTable from 'components/UI/table'
+import  CodeBlock  from 'components/CodeBlock'
+
+const InlineCheckout = () => {
+  return (
+    <>
+      <div>
+        <h5 className='heading-6-s'>1. Add the inline Checkout</h5>
+        <p className='paragraph-2 my-6'>
+          Add the inline checkout to your website using a script tag, it is
+          delivered through a reliable CDN.
+        </p>
+        <p className='bg-neu-50 p-2'>
+          {'<script>'}
+          <code>
+            https://cdn.jsdelivr.net/gh/Lazerpay-Finance/checkout-build@main/
+            <br /> [email protected]/dist/index.min.js{' '}
+          </code>
+          {'</script>'}
+        </p>
+      </div>
+      <div className='my-6'>
+        <h5 className='heading-6-s'>1. Collect user Date</h5>
+        <p className='paragraph-2 my-6'>
+          To receive payments you will need to pass some parameters which
+          include some functions and <br /> optional customer information. They
+          include:
+        </p>
+        <Divider className='max-w-100 mb-4' />
+
+        <LzTable
+          head={['Props', 'Functionality', 'Priority', 'Type']}
+          body={[
+            ['name', 'Customers Name', 'optional', `<code>Strings</code>`],
+            ['email', 'Customer email', 'optional', `<code>String</code>`],
+            [
+              'amount',
+              'Customers amount to pay (in USD, AED, GBP, EUR, NGN)',
+              'required',
+              `<code>Strings | Number</code>`,
+            ],
+            [
+              'reference',
+              'Unique case sensitive transaction reference. If you do not pass this parameter, Lazerpay will generate a unique reference for you',
+              'optional',
+              `<code>Strings | Number</code>`,
+            ],
+            [
+              'acceptPartial Payment',
+              "If you want accept partial payment from customers, By default it's false",
+              'optional',
+              `<code>Boolean</code>`,
+            ],
+            [
+              'key',
+              'Lazerpay key. Get you public key from your Lazerpay dashboard. Testnet public keys begin with "pk_test_" and mainnet keys begin with "pk_live_".',
+              'required',
+              `<code>Strings</code>`,
+            ],
+            [
+              'currency',
+              `The currency <code>amount</code> is denominated in. Can be USD, GBP, EUR, AED or NGN`,
+              'required',
+              `<code>Strings</code>`,
+            ],
+            [
+              'onClose',
+              'The function called when the payment modal closes',
+              'optional',
+              `<code>Function</code>`,
+            ],
+            [
+              'onSuccess',
+              'The function called after the payment is confirmed',
+              'optional',
+              `<code>Function</code>`,
+            ],
+            [
+              'onError',
+              'The function that is called if an error occurs during payment confirmation',
+              'optional',
+              `<code>Function</code>`,
+            ],
+          ]}
+        />
+        <div className='paragraph-2 my-9'>
+          <p className='my-14'>
+            The function that is called if an error occurs during payment
+            confirmation <code>LazerCheckout</code> <br />
+            function. Pass the information you get in step 2 to the function in
+            an object inside the <br /> <code>payWithLazer</code>function
+          </p>
+          <p>
+            The customer information can be retrieved from your database if you
+            already have it stored, or <br /> from a form like in the example
+            below:
+          </p>
+        </div>
+        <CodeBlock
+          options
+          lang='js'
+          req1='HTML'
+          req2='JAVASCRIPT'
+          id1='acceptPaymentsHTML'
+          id2='acceptPaymentsJS'
+        />
+
+        <p className='paragraph-1 my-6'>In this sample, notice how:</p>
+
+        <ul className='space-y-5 paragraph-2'>
+          <li>
+            <code>1</code> The Lazerpay inline javascript is included using a{' '}
+            <code>script</code>tag. This is how you import <br />
+            Lazerpay into your code.
+          </li>
+          <li>
+            <code>2</code> The <code>script</code> and <code>email</code> here
+            <br />
+            can be optional. The PopUp will provide those fields to the
+            customers
+          </li>
+          <li>
+            <code>3</code> The <code>Pay With Lazerpay</code> button has been
+            tied to an <code>onClick</code> function called <br />{' '}
+            <code>pay With Lazerpay </code>. This is the action that causes the
+            Lazerpay popup to load.
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+}
+
+export default InlineCheckout

components/AcceptPayments/PaymentAPI.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import LzTable from 'components/UI/table'
+import LzAlert from 'components/UI/alert'
+import CodeBlock, { Label } from 'components/CodeBlock'
+import { FaAngleDown } from 'react-icons/fa'
+import { ToggleIcon } from 'public/icons'
+
+const RESPONSES = {
+  created: '201: Created',
+  unauthorized: '401: Unauthorized',
+}
+const snipId = {
+  success: 'resCode201',
+  failed: 'reCode401',
+}
+
+const PaymentAPI = () => {
+  const [option, setOption] = React.useState(RESPONSES.created)
+
+  return (
+    <>
+      <LzTable
+        head={['Parameter name', 'Type', 'Description']}
+        body={[
+          ['Header', '', '.'],
+          ['x-api-key*', `<code>String</code>`, 'YOUR_PUBLIC_KEY'],
+          ['Body', '.', ''],
+          ['reference', `<code>String</code>  `, 'YOUR_REFERENCE'],
+          ['customer_name*', `<code>String</code>`, 'Your Customer’s name'],
+          ['customer_email*', `<code>String</code>`, 'Your Customer’s email'],
+          [
+            'coin*',
+            `<code>String</code>`,
+            'Stablecoins you want your customers to pay you in',
+          ],
+          [
+            'currency*',
+            `<code>String</code> `,
+            'Currency should be in the currency you accept on your store, or application',
+          ],
+          [
+            'amount*',
+            `<code>String | Number</code>`,
+            'The amoumt you want to charge the customer in the currency specified above',
+          ],
+          [
+            'accept_partial_payment',
+            `<code>Boolean</code>`,
+            'This parameter is set to "false" by default. When you want to accept partial payments and ensure customers complete the required amount they are supposed to pay, it should be set to true',
+          ],
+        ]}
+      />
+
+      {/* cURL CODEBLOCK */}
+      <CodeBlock
+        options
+        lang='curl'
+        req1={<Label label='POST' />}
+        req2={
+          <span className='flex space-x-2 items-center'>
+            cURL
+            <FaAngleDown />
+          </span>
+        }
+        sideAct={
+          <span className='flex paragraph-1 space-x-2 items-center'>
+            <p> Hide Response</p>
+            <ToggleIcon />
+          </span>
+        }
+        id1='cRULSnippet'
+      />
+
+      {/* RESPONSE CODE */}
+      <CodeBlock
+        options
+        lang='json'
+        req1='Response'
+        sideAct={
+          <select
+            name={option}
+            id={option}
+            className='caption-s border-none decoration-none items-center'
+          >
+            <option value={RESPONSES.created}>{RESPONSES.created} </option>
+            <option value={RESPONSES.unauthorized}>
+              {RESPONSES.unauthorized}
+            </option>
+          </select>
+        }
+        id1={snipId.success}
+        id2={snipId.failed}
+        className='!bg-white `'
+      />
+
+      <h6 className='header-6 my-5'>Important Note</h6>
+
+      <ul className='paragraph-2 space-y-5  my-6'>
+        <li>
+          <code>1</code> The <code className='text-sec-700'>coin</code> field
+          must either be “BUSD”, “DAI”, “USDT”, or “USDC”.
+        </li>
+        <li>
+          <code>2</code>It’s ideal to generate a unique{' '}
+          <code className='text-sec-700'>reference</code>
+          from your system for every transaction to avoid <br />
+          duplicate attempts.
+        </li>
+        <li>
+          <code>3</code> The{' '}
+          <code className='text-sec-700'>accept_partial_payment</code>field is
+          used to enforce payment completion by your customers. <br />
+          {''}A scenario is when a customer is trying to pay for a service worth
+          a fixed <code className='text-sec-700'>amount</code>of $100 USD.{' '}
+          <br />
+          {''} When <code className='text-sec-700'>accept_partial_payment</code>
+          is set to true, the customer must pay the exact amount <br />
+          {''}before the funds will be sent to you. Read more about Partial
+          Payments here.
+        </li>
+        <li>
+          <code>4</code> The <code className='text-sec-700'>amount</code> field
+          should be in your fiat currency. The currencies we support are USD,
+          AED, <br /> GBP, EUR and NGN. Please reach out to{''}
+          <i className='underline text-pri-300'>[email protected]</i> if
+          you would want us to <br /> support a currency.
+        </li>
+        <li>
+          <code>5</code> The <code className='text-sec-700'>amount</code> during
+          initialization is converted to the{' '}
+          <code className='text-sec-700'>coin</code> equivalent of the currency{' '}
+          <br /> specified.
+        </li>
+      </ul>
+      <LzAlert
+        status='warning'
+        content='Never call the Lazerpay API directly from your frontend to avoid exposing your secret key on the frontend. All requests to the Lazerpay API should be initiated from your server, and your frontend gets the response from your server.'
+      />
+    </>
+  )
+}
+
+export default PaymentAPI

components/AcceptPayments/index.tsx

@@ -1,24 +1,34 @@
-import classNames from "classnames";
-import CodeBlock from "components/CodeBlock";
-import LzButton from "components/UI/button";
-import Styles from './index.module.scss';
+import classNames from 'classnames'
+import Styles from './index.module.scss'
+import LzButton from 'components/UI/button'
+import CodeBlock from 'components/CodeBlock'
 
 export default function AcceptPayments(): JSX.Element {
-
     return (
-        <section className={classNames(Styles.AcceptPayments, "flex flex-col lg:flex-row w-full lg:space-y-0 lg:space-x-6")}>
-            <div className="flex flex-col justify-between px-6 pt-8 pb-4 md:pt-14 rounded-t-8 lg:rounded-8 lg:w-52">
-                <div className="!pr-8 mb-8 lg:mb-0">
-                    <h3 className="heading-6-s whitespace-nowrap">To get started</h3>
-                    <p className="mt-5 paragraph-1">Authenticate all Lazerpay API calls using your secret keys.</p>
+        <section
+            className={classNames(
+                Styles.AcceptPayments,
+                'flex flex-col lg:flex-row w-full lg:space-y-0 lg:space-x-6',
+            )}
+        >
+            <div className='flex flex-col justify-between px-6 pt-8 pb-4 md:pt-14 rounded-t-8 lg:rounded-8 lg:w-52'>
+                <div className='!pr-8 mb-8 lg:mb-0'>
+                    <h3 className='heading-6-s whitespace-nowrap'>To get started</h3>
+                    <p className='mt-5 paragraph-1'>
+                        Authenticate all Lazerpay API calls using your secret keys.
+                    </p>
                 </div>
-                <LzButton className="w-full mt-24 paragraph-1 md:mt-0" size="md" rightIcon={'chevron'}>
+                <LzButton
+                    className='w-full mt-24 paragraph-1 md:mt-0'
+                    size='md'
+                    rightIcon={'chevron'}
+                >
                     Let's go
                 </LzButton>
             </div>
-            <div className="lg:max-w-lg xl:max-w-xl xl:w-4/6 bg-pri-50">
-                <CodeBlock id="api" />
+            <div className='xl:max-w-xl xl:w-4/6'>
+                <CodeBlock id1='api' className='md:max-w-lg' />
             </div>
         </section>
     )
-}
+}