From 11bf25d7fc5c8ad1f8184e2b93e97892729ed35f Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Thu, 7 Nov 2024 12:23:10 +0300
Subject: [PATCH 1/2] feat: improve UI of payment-widget

---
 .../src/lib/payment-widget.svelte             | 408 +++++++++---------
 .../src/lib/react/PaymentWidget.d.ts          |   2 +-
 shared/icons/rn-logo-white.svelte             |  20 +
 3 files changed, 214 insertions(+), 216 deletions(-)
 create mode 100644 shared/icons/rn-logo-white.svelte

diff --git a/packages/payment-widget/src/lib/payment-widget.svelte b/packages/payment-widget/src/lib/payment-widget.svelte
index 2250ca8c..25dc2d47 100644
--- a/packages/payment-widget/src/lib/payment-widget.svelte
+++ b/packages/payment-widget/src/lib/payment-widget.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import Modal from "@requestnetwork/shared-components/modal.svelte";
-  import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
+  import RNLogoWhite from "@requestnetwork/shared-icons/rn-logo-white.svelte";
   import type { EventsControllerState } from "@web3modal/core";
   import type { Web3Modal } from "@web3modal/ethers5";
   import { ethers } from "ethers";
@@ -30,7 +30,6 @@
   export let supportedCurrencies: SupportedCurrencies;
   export let sellerAddress: string = "";
   export let persistRequest: boolean = true;
-  export let showRNBranding: boolean = true;
   export let builderId: string = "";
   export let onPaymentSuccess: (request: any) => void;
   export let onError: (error: string) => void;
@@ -41,6 +40,7 @@
   export let feeAmountInUSD: number = 0;
   export let enablePdfReceipt: boolean = true;
   export let enableRequestScanLink: boolean = true;
+  export let hideTotalAmount: boolean = false;
 
   // State
   let web3Modal: Web3Modal | null = null;
@@ -167,107 +167,111 @@
 </script>
 
 <section class="rn-payment-widget">
-  <section class="rn-payment-widget-header">
-    {#if sellerInfo?.logo || sellerInfo?.name}
-      <div class="rn-payment-widget-header-seller-info">
-        {#if sellerInfo.logo}
-          <img src={sellerInfo.logo} alt="Seller logo" />
-        {/if}
-        <h2>{sellerInfo.name}</h2>
-      </div>
-    {/if}
-
-    {#if productInfo?.name || productInfo?.description || productInfo?.image}
-      <div class="rn-payment-widget-header-product-info">
-        <div class="rn-payment-widget-header-product-info-body">
-          <h2>{productInfo?.name}</h2>
-          <span>{productInfo?.description}</span>
+  {#if sellerInfo?.logo || sellerInfo?.name || productInfo?.name || productInfo?.description || productInfo?.image || (!hideTotalAmount && amountInUSD)}
+    <div class="rn-payment-widget-content">
+      <!-- Seller Info -->
+      {#if sellerInfo?.logo || sellerInfo?.name}
+        <div class="rn-payment-widget-seller">
+          {#if sellerInfo.logo}
+            <img src={sellerInfo.logo} alt="Seller logo" />
+          {/if}
+          <span>{sellerInfo.name}</span>
         </div>
-        {#if productInfo.image}
-          <img src={productInfo.image} alt="Product" />
-        {/if}
-      </div>
-    {/if}
-
-    <div class="rn-payment-widget-header-total">
-      <span>TOTAL</span>
-      <span>{amountInUSD} USD</span>
+      {/if}
+
+      <!-- Product Info -->
+      {#if productInfo?.name || productInfo?.description || productInfo?.image}
+        <div class="rn-payment-widget-product">
+          <div class="rn-payment-widget-product-text">
+            {#if productInfo?.name}
+              <h3>{productInfo.name}</h3>
+            {/if}
+            {#if productInfo?.description}
+              <p>{productInfo.description}</p>
+            {/if}
+          </div>
+          {#if productInfo?.image}
+            <img src={productInfo.image} alt="Product" />
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Total -->
+      {#if !hideTotalAmount && amountInUSD}
+        <div class="rn-payment-widget-total">
+          <span>TOTAL</span>
+          <span>{amountInUSD} USD</span>
+        </div>
+      {/if}
     </div>
-  </section>
-
-  <section class="rn-payment-widget-body">
-    <h2>Pay with crypto</h2>
-    <button
-      disabled={!amountInUSD ||
-        !sellerAddress ||
-        amountInUSD === 0 ||
-        supportedCurrencies?.length === 0}
-      on:click={() => {
-        if (!isConnected) {
-          web3Modal?.open();
-        } else {
-          isModalOpen = true;
-        }
-      }}>Pay</button
-    >
-  </section>
-  <Modal
-    config={{}}
-    title="Pay with crypto"
-    isOpen={isModalOpen}
-    onClose={() => {
-      isModalOpen = false;
+  {/if}
+
+  <button
+    class="rn-payment-button"
+    disabled={!amountInUSD ||
+      !sellerAddress ||
+      amountInUSD === 0 ||
+      supportedCurrencies?.length === 0}
+    on:click={() => {
+      if (!isConnected) {
+        web3Modal?.open();
+      } else {
+        isModalOpen = true;
+      }
     }}
   >
-    {#if currentPaymentStep === "currency"}
-      <CurrencySelector
-        {web3Modal}
-        currencies={currencyDetails.currencies}
-        bind:selectedCurrency
-        bind:isConnected
-        onCurrencySelected={handleCurrencySelection}
-      />
-    {:else if currentPaymentStep === "buyer-info"}
-      <BuyerInfoForm
-        bind:currentPaymentStep
-        bind:buyerInfo={currentBuyerInfo}
-      />
-    {:else if selectedCurrency && currentPaymentStep === "confirmation"}
-      <PaymentConfirmation
-        {feeAddress}
-        {feeAmountInUSD}
-        {enableBuyerInfo}
-        {productInfo}
-        {amountInUSD}
-        {sellerAddress}
-        {web3Modal}
-        {selectedCurrency}
-        {persistRequest}
-        {onPaymentSuccess}
-        {builderId}
-        onPaymentError={onError}
-        bind:currentPaymentStep
-        bind:isConnected
-        bind:createdRequest
-        {sellerInfo}
-        buyerInfo={currentBuyerInfo}
-        {invoiceNumber}
-      />
-    {:else}
-      <PaymentComplete
-        {createdRequest}
-        {enablePdfReceipt}
-        {enableRequestScanLink}
-        sellerLogo={sellerInfo.logo}
-      />
-    {/if}
-  </Modal>
+    Pay with <RNLogoWhite />
+  </button>
 </section>
-{#if showRNBranding}
-  <div class="rn-payment-widget-branding">
-    <PoweredBy />
-  </div>
-{/if}
+
+<Modal
+  config={{}}
+  title="Pay with crypto"
+  isOpen={isModalOpen}
+  onClose={() => {
+    isModalOpen = false;
+  }}
+>
+  {#if currentPaymentStep === "currency"}
+    <CurrencySelector
+      {web3Modal}
+      currencies={currencyDetails.currencies}
+      bind:selectedCurrency
+      bind:isConnected
+      onCurrencySelected={handleCurrencySelection}
+    />
+  {:else if currentPaymentStep === "buyer-info"}
+    <BuyerInfoForm bind:currentPaymentStep bind:buyerInfo={currentBuyerInfo} />
+  {:else if selectedCurrency && currentPaymentStep === "confirmation"}
+    <PaymentConfirmation
+      {feeAddress}
+      {feeAmountInUSD}
+      {enableBuyerInfo}
+      {productInfo}
+      {amountInUSD}
+      {sellerAddress}
+      {web3Modal}
+      {selectedCurrency}
+      {persistRequest}
+      {onPaymentSuccess}
+      {builderId}
+      onPaymentError={onError}
+      bind:currentPaymentStep
+      bind:isConnected
+      bind:createdRequest
+      {sellerInfo}
+      buyerInfo={currentBuyerInfo}
+      {invoiceNumber}
+    />
+  {:else}
+    <PaymentComplete
+      {createdRequest}
+      {enablePdfReceipt}
+      {enableRequestScanLink}
+      sellerLogo={sellerInfo.logo}
+    />
+  {/if}
+</Modal>
 
 <style lang="scss">
   @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@@ -284,144 +288,118 @@
   .rn-payment-widget {
     width: 100%;
     max-width: 530px;
+    margin: 0 auto;
+    background: #f6f6f7;
+    border-radius: 16px;
+    position: relative;
+    padding: 16px 16px 16px 20px;
+    border-left: 4px solid #0bb489;
+  }
+
+  .rn-payment-widget-content {
     display: flex;
     flex-direction: column;
-    background: linear-gradient(180deg, #01503a 0%, #002b20 100%);
-    border-radius: 20px;
-    padding: 0;
-    margin: 0 auto;
+    gap: 16px;
+    margin-bottom: 16px;
 
-    &-branding {
-      display: flex;
-      justify-content: flex-end;
+    &:not(:empty) {
+      padding-bottom: 16px;
+      border-bottom: 1px solid #d1d7e3;
     }
+  }
 
-    &-header {
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-
-      &-seller-info {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-
-        img {
-          width: 40px;
-          height: 40px;
-          border-radius: 8px;
-          object-fit: cover;
-        }
-
-        h2 {
-          color: white;
-          font-size: 14px;
-          font-weight: 500;
-        }
-      }
-
-      &-product-info {
-        display: flex;
-        gap: 20px;
-        align-items: center;
-        flex-wrap: wrap;
+  .rn-payment-widget-seller {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    img {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      object-fit: cover;
+    }
 
-        &-body {
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-          flex: 1;
-          min-width: 0;
+    span {
+      font-size: 14px;
+      font-weight: 500;
+      color: #000;
+    }
+  }
 
-          h2 {
-            color: white;
-            font-size: 20px;
-            font-weight: 500;
-          }
+  .rn-payment-widget-product {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
 
-          span {
-            color: #d9d9d9;
-            font-size: 14px;
-            font-weight: 400;
-            word-wrap: break-word;
-          }
-        }
+    &-text {
+      flex: 1;
+      min-width: 0;
 
-        img {
-          width: 80px;
-          height: 80px;
-          border-radius: 8px;
-          object-fit: cover;
-        }
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        margin: 0 0 8px 0;
+        color: #000;
       }
 
-      &-total {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        span {
-          color: white;
-          font-size: 14px;
-          font-weight: 500;
-        }
+      p {
+        font-size: 14px;
+        color: #666;
+        margin: 0;
       }
     }
 
-    &-body {
-      padding: 16px 20px 20px 20px;
-      background-color: #fafafa;
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-      margin: 0;
-      height: 100%;
-      border-radius: 0px 0px 20px 20px;
-
-      button {
-        display: inline-flex;
-        cursor: pointer;
-        align-items: center;
-        justify-content: center;
-        white-space: nowrap;
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        background-color: #0bb489;
-        color: white;
-        padding: 0.5rem 1rem;
-        border: none;
-        outline: none;
-
-        &:focus-visible {
-          outline: 2px solid transparent;
-          outline-offset: 2px;
-          box-shadow: 0 0 0 2px var(--ring-color, #000);
-        }
+    img {
+      width: 48px;
+      height: 48px;
+      border-radius: 4px;
+      object-fit: cover;
+    }
+  }
 
-        &:disabled {
-          pointer-events: none;
-          opacity: 0.5;
-        }
+  .rn-payment-widget-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-        &:hover {
-          background-color: rgba($color: #0bb489, $alpha: 0.8);
-        }
-      }
+    span {
+      font-size: 14px;
+      font-weight: 500;
+      color: #000;
 
-      h2 {
-        color: black;
-        font-size: 18px;
-        font-weight: 500;
+      &:last-child {
+        font-weight: 600;
       }
     }
   }
 
+  .rn-payment-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 12px;
+    background: #0bb489;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: darken(#0bb489, 5%);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
   :global(body.modal-open) {
     overflow: hidden;
   }
diff --git a/packages/payment-widget/src/lib/react/PaymentWidget.d.ts b/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
index 8e581ffb..16d3eb63 100644
--- a/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
+++ b/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
@@ -14,8 +14,8 @@ export interface PaymentWidgetProps {
   supportedCurrencies: SupportedCurrencies;
   sellerAddress: string;
   persistRequest?: boolean;
-  showRNBranding?: boolean;
   builderId?: string;
+  hideTotalAmount?: boolean;
   onPaymentSuccess?: (request: any) => void;
   onError?: (error: string) => void;
   buyerInfo?: BuyerInfo;
diff --git a/shared/icons/rn-logo-white.svelte b/shared/icons/rn-logo-white.svelte
new file mode 100644
index 00000000..0c294138
--- /dev/null
+++ b/shared/icons/rn-logo-white.svelte
@@ -0,0 +1,20 @@
+<svg
+  width="74"
+  height="24"
+  viewBox="0 0 74 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M13.498 13.0762L18.7255 7.89653C19.1183 7.51062 19.3384 6.97893 19.3384 6.43009L19.3471 2.24515C19.3471 2.03076 19.2651 1.82494 19.114 1.67058L9.08645 11.6141C8.27061 12.4159 8.26629 13.7237 9.0735 14.5298L9.08645 14.5427L16.1571 21.5447C16.9729 22.3509 18.2938 22.3466 19.101 21.5362C19.9126 20.7258 19.9082 19.4137 19.0924 18.6119L13.498 13.0762Z"
+    fill="white"
+  />
+  <path
+    d="M18.5313 1.4519H2.77558C1.50218 1.4519 0.56115 2.40809 0.56115 3.7116V20.0397C0.543884 21.1846 1.47196 22.1279 2.6245 22.145H2.6763C3.82452 22.1665 4.77418 21.2532 4.79576 20.1126V5.47819H15.2765L19.114 1.68345C18.9586 1.52909 18.7514 1.44333 18.5313 1.4519Z"
+    fill="#E8E8E8"
+  />
+  <path
+    d="M27.333 6.83744V9.66312H26.0768V2.1937H29.4567C31.2482 2.1937 32.146 3.03412 32.146 4.32047C32.146 5.41387 31.3517 6.1814 30.1906 6.39579C30.5402 6.44724 30.8079 6.52871 31.0366 6.68307C31.4597 6.95749 31.6841 7.45917 31.9345 8.32103L32.3144 9.66312H30.9762L30.6266 8.34247C30.3071 7.10328 29.9963 6.83744 28.6798 6.83744H27.333ZM27.333 3.27852V5.92841H29.0942C30.2467 5.92841 30.8985 5.41816 30.8985 4.56917C30.8985 3.75019 30.3848 3.27852 29.146 3.27852H27.333ZM36.0051 9.76603C34.0151 9.76603 33.0093 8.50541 33.0093 6.82886C33.0093 5.20377 34.123 3.81879 35.9662 3.81879C37.8396 3.81879 38.7289 5.14802 38.7289 6.70451V7.1333H34.2223C34.313 8.12379 34.913 8.72837 35.9835 8.72837C36.7562 8.72837 37.2008 8.41107 37.5375 7.81935L38.5778 8.39392C38.0986 9.18289 37.2957 9.76603 36.0051 9.76603ZM34.2353 6.3572H37.5029C37.4511 5.47819 36.9893 4.84359 35.9576 4.84359C34.9777 4.84359 34.3777 5.41387 34.2353 6.3572ZM42.3807 3.86167C43.3304 3.86167 43.9693 4.28188 44.3275 5.10086V3.93028H45.5621V11.8714H44.3146V8.46253C43.9218 9.28151 43.2139 9.73173 42.2728 9.73173C40.9045 9.73173 39.7908 8.75839 39.7908 6.82457C39.7951 4.85216 41.0642 3.86167 42.3807 3.86167ZM44.4225 6.78598C44.4225 5.67114 43.9088 4.85216 42.7347 4.85216C41.6642 4.85216 41.0642 5.62826 41.0642 6.80742C41.0642 7.99515 41.6296 8.71122 42.7347 8.71122C43.8959 8.71122 44.4225 7.89225 44.4225 6.78598ZM52.4255 9.66312H51.178V8.30388C50.7852 9.28579 50.0773 9.7789 49.1881 9.7789C47.7852 9.7789 47.1161 8.84843 47.1161 7.44631V3.93028H48.3636V7.10328C48.3636 8.09377 48.7046 8.72837 49.7017 8.72837C50.5996 8.72837 51.1651 7.96943 51.1651 6.73453V3.93028H52.4212L52.4255 9.66312ZM56.7551 9.76603C54.7652 9.76603 53.7594 8.50541 53.7594 6.82886C53.7594 5.20377 54.8731 3.81879 56.7163 3.81879C58.5897 3.81879 59.4789 5.14802 59.4789 6.70451V7.1333H54.9767C55.0673 8.12379 55.6673 8.72837 56.7379 8.72837C57.5105 8.72837 57.9551 8.41107 58.2918 7.81935L59.3321 8.39392C58.8444 9.18289 58.0415 9.76603 56.7551 9.76603ZM54.981 6.3572H58.2487C58.1969 5.47819 57.735 4.84359 56.7033 4.84359C55.7234 4.84359 55.1277 5.41387 54.981 6.3572ZM61.2358 7.78934C61.7106 8.41536 62.2977 8.74124 63.1524 8.74124C63.9682 8.74124 64.3049 8.35104 64.3049 7.9437C64.3049 7.35198 63.42 7.30052 62.3581 7.12472C61.3092 6.96178 60.5451 6.61447 60.5451 5.58967C60.5451 4.58632 61.3912 3.79735 62.8329 3.79735C64.0071 3.79735 64.8315 4.15753 65.5222 4.97222L64.5639 5.78263C64.1193 5.14802 63.5668 4.8393 62.7596 4.8393C61.9567 4.8393 61.6372 5.19948 61.6372 5.59825C61.6372 6.12136 62.3063 6.22427 63.2862 6.36577C64.4085 6.52871 65.4186 6.79456 65.4186 7.9437C65.4186 8.99851 64.5639 9.78747 63.1222 9.78747C61.8142 9.78747 60.8991 9.34582 60.3293 8.64262L61.2358 7.78934ZM70.3093 9.53878C70.0115 9.68028 69.6921 9.76174 69.2604 9.76174C68.0129 9.76174 67.5078 9.1057 67.5078 7.8365V4.95078H66.1913V3.93028H67.5208V2.46812L68.6863 1.77349V3.93028H70.3137V4.95507H68.6863V7.69929C68.6863 8.4368 68.9841 8.70265 69.5496 8.70265C69.8604 8.70265 70.046 8.65119 70.3137 8.53971L70.3093 9.53878ZM27.2898 22.3766H26.0725V14.9072H27.5661L30.8338 20.3527L31.1532 21.0388L31.11 20.3013V14.9072H32.3273V22.3766H30.9244L27.5445 16.7166L27.2164 16.1035L27.2898 16.811V22.3766ZM36.6957 22.4795C34.7058 22.4795 33.7 21.2189 33.7 19.5423C33.7 17.9172 34.8137 16.5323 36.6569 16.5323C38.5303 16.5323 39.4195 17.8615 39.4195 19.418V19.8468H34.913C35.0036 20.8372 35.6036 21.4418 36.6742 21.4418C37.4468 21.4418 37.8914 21.1245 38.2281 20.5328L39.2684 21.1074C38.7893 21.8963 37.9821 22.4795 36.6957 22.4795ZM34.9259 19.0707H38.1936C38.1418 18.1916 37.6799 17.557 36.6483 17.557C35.6641 17.557 35.0684 18.1316 34.9259 19.0707ZM44.2153 22.2565C43.9175 22.398 43.598 22.4838 43.1664 22.4838C41.9189 22.4838 41.4138 21.8277 41.4138 20.5585V17.6728H40.0972V16.648H41.4268V15.1859L42.5923 14.4912V16.6523H44.2196V17.6771H42.5923V20.4213C42.5923 21.1588 42.8901 21.4247 43.4556 21.4247C43.7664 21.4247 43.952 21.3732 44.2196 21.2617L44.2153 22.2565ZM48.1434 22.3766H46.5981L45.1348 16.648H46.4211L47.4096 20.863L47.5348 21.6091L47.6988 20.863L48.955 16.648H49.9651L51.191 20.8544L51.3334 21.6305L51.4672 20.863L52.5507 16.648H53.8198L52.214 22.3766H50.7205L49.5981 18.3846L49.4557 17.7714L49.3219 18.3975L48.1434 22.3766ZM54.558 19.5123C54.558 17.8229 55.6587 16.5365 57.5148 16.5365C59.4012 16.5365 60.4631 17.8443 60.4631 19.5123C60.4631 21.1717 59.3624 22.4795 57.5148 22.4795C55.6112 22.4795 54.558 21.2232 54.558 19.5123ZM59.1854 19.5123C59.1854 18.3546 58.6717 17.5699 57.5148 17.5699C56.3796 17.5699 55.8357 18.3889 55.8357 19.5123C55.8357 20.6486 56.3321 21.4247 57.5148 21.4247C58.6803 21.4247 59.1854 20.64 59.1854 19.5123ZM65.656 16.7895L65.3064 17.9258C65.0301 17.75 64.7193 17.6685 64.3265 17.6685C63.6056 17.6685 63.0574 18.2603 63.0574 19.4694V22.3766H61.8099V16.648H63.0574V18.0287C63.3164 17.0254 63.8085 16.5666 64.6546 16.5666C65.0776 16.5666 65.397 16.648 65.656 16.7895ZM67.9222 19.8811L70.6201 16.648H72.0705L69.8863 19.195L72.2043 22.3766H70.7194L68.8633 19.7053L67.9136 20.7901V22.3766H66.6661V14.2297H67.9136V19.8811H67.9222Z"
+    fill="white"
+  />
+</svg>

From a9cce6ba577ad37eacc4322aff3d1a2c0464dde5 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Thu, 7 Nov 2024 16:50:32 +0300
Subject: [PATCH 2/2] chore: update JSDoc

---
 .../payment-widget/src/lib/react/PaymentWidget.d.ts    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/payment-widget/src/lib/react/PaymentWidget.d.ts b/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
index 16d3eb63..6e5ba62d 100644
--- a/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
+++ b/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
@@ -39,6 +39,11 @@ export interface PaymentWidgetProps {
  * - Handles transaction creation and management
  * - Provides real-time payment status updates
  * - Supports full invoice information
+ * - Allows enabling/disabling buyer information collection
+ * - Option to hide the total amount displayed
+ * - Configurable fee address and amount
+ * - Option to enable PDF receipt generation
+ * - Option to enable a request scan link
  *
  * @param {PaymentWidgetProps} props - The component props
  * @returns {JSX.Element}
@@ -74,8 +79,11 @@ export interface PaymentWidgetProps {
  *   onError={(error) => {
  *     console.error(error);
  *   }}
- *   feeAddress="0x1234567890123456789012345678901234567890
+ *   feeAddress="0x1234567890123456789012345678901234567890"
  *   feeAmountInUSD={22}
+ *   enablePdfReceipt={true}
+ *   enableRequestScanLink={true}
+ *   hideTotalAmount={false}
  * />
  */
 declare const PaymentWidget: React.FC<PaymentWidgetProps>;