freclean-website/web3-payments.html at main · CeloHaiTiFreClean/freclean-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web3 Payments | Celo & CeloHT | FreClean</title>
  <meta name="description" content="How FreClean's Web3 payments work through the CeloHT DApp on Celo, including USDm checkout and payment verification.">
  <link rel="canonical" href="https://freclean.com/web3-payments.html">
  <meta property="og:title" content="FreClean | Web3 Payments">
  <meta property="og:description" content="How FreClean accepts digital payments on Celo through CeloHT.">
  <meta name="twitter:card" content="summary">
  <link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<a class="skip-link" href="#main">Skip to content</a>

<header class="site">
  <div class="nav">
    <a class="brand" href="index.html"><img src="assets/img/logo.jpg" alt="FreClean logo"> FreClean</a>
    <button class="menu-toggle" aria-label="Open menu" aria-controls="navlinks" aria-expanded="false">&#9776;</button>
    <ul id="navlinks">
      <li><a href="about.html">Company</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="entrepreneurship.html">Entrepreneurship</a></li>
      <li><a href="web3-payments.html">Web3 Payments</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a class="cta" href="contact.html#book">Book a Cleaning</a></li>
    </ul>
  </div>
</header>

<main id="main">

<section class="page-hero">
  <div class="container">
    <div class="breadcrumb"><a href="index.html">Home</a> / Web3 Payments</div>
    <h1>Digital payments on Celo, through CeloHT</h1>
    <p class="lead">FreClean is not a crypto company. It is a cleaning company that also accepts USDm payments, verified in the same way as all other payments.</p>
    <picture>
      <source type="image/webp" srcset="assets/img/celoht-logo.webp">
      <img src="assets/img/celoht-logo.png" alt="CeloHT partner mark" style="width:64px;height:64px;margin-top:18px;border-radius:14px;" loading="lazy">
    </picture>
  </div>
</section>

<div class="container"><div class="wipe"></div></div>

<section>
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Payment flow</span>
      <h2>How to complete your payment</h2>
      <p>Follow the payment steps below to complete your FreClean transaction quickly and securely using the option that works best for you.</p>
    </div>
    <div class="pay-shell">
      <div class="pay-option highlight">
        <span class="tag live">CeloHT DApp</span>
        <h2>How to pay with CeloHT DApp</h2>
        <p>Customers can launch the CeloHT DApp to complete a wallet-based checkout, confirm the amount, and receive the same payment confirmation flow used across FreClean transactions.</p>
        <div class="pay-list">
          <span>Wallet confirmation</span>
          <span>USDm-ready checkout flow</span>
          <span>Instant payment status tracking</span>
        </div>
        <a class="btn btn-primary btn-logo pay-cta" href="https://celoht.com/" target="_blank" rel="noopener">
          <img src="assets/img/celoht-logo.webp" alt="CeloHT logo" loading="lazy" width="24" height="24">
          <span>Launch CeloHT DApp</span>
        </a>
      </div>

      <div class="pay-option">
        <span class="tag dev">Debit card</span>
        <h2>Pay by debit or credit card</h2>
        <p>For guests and customers who prefer a card-based checkout, FreClean offers a direct card payment option with confirmation and receipt issued after successful approval.</p>
        <div class="pay-list">
          <span>Secure card payment</span>
          <span>Confirmation before service delivery</span>
          <span>Digital receipt included</span>
        </div>

        <form class="payment-form" action="#" method="post">
          <label>
            Cardholder name
            <input type="text" name="cardholder" placeholder="Full name on card" />
          </label>
          <label>
            Card number
            <input type="text" name="card-number" inputmode="numeric" placeholder="1234 5678 9012 3456" />
          </label>
          <div class="form-row">
            <label>
              Expiry date
              <input type="text" name="expiry" placeholder="MM / YY" />
            </label>
            <label>
              CVV
              <input type="text" name="cvv" inputmode="numeric" placeholder="123" />
            </label>
          </div>
          <label>
            Billing ZIP / Postal code
            <input type="text" name="zip" placeholder="ZIP / Postal code" />
          </label>
          <button type="submit" class="btn btn-primary">Submit payment</button>
        </form>

        <div class="pay-box" aria-label="Debit card payment illustration">
          <div class="chip"></div>
          <div class="card-row"><span>FreClean</span><span>●●●●</span></div>
          <div class="card-row small"><span>DEBIT / CREDIT</span><span>VISA</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="grid cols-2" style="align-items:center;">
      <picture>
        <source type="image/webp" srcset="assets/img/web3-checkout.webp">
        <img src="assets/img/web3-checkout.png" alt="Mobile payment confirmation screen at FreClean checkout" loading="lazy">
      </picture>
      <div>
        <span class="eyebrow">Explained simply</span>
        <h2>Step-by-step payment guide</h2>
        <div class="card" style="margin-bottom:14px;"><h3>Qu’est-ce que Celo ?</h3><p>Celo est un réseau blockchain public conçu pour des paiements numériques rapides et peu coûteux, y compris des stablecoins dont la valeur est adossée à une monnaie comme le dollar américain.</p></div>
        <div class="card" style="margin-bottom:14px;"><h3>Qu’est-ce qu’un stablecoin ?</h3><p>Un stablecoin est un actif numérique conçu pour conserver une valeur stable, contrairement aux cryptomonnaies volatiles. Le montant ne change pas entre la commande et la confirmation.</p></div>
        <div class="card" style="margin-bottom:14px;"><h3>Comment payer ?</h3><p>Sélectionnez Web3 à la caisse FreClean, scannez la demande de paiement avec un portefeuille compatible et confirmez le montant.</p></div>
        <div class="card"><h3>How to pay with CeloHT DApp</h3><p>Open the CeloHT DApp, connect your compatible Celo wallet, and select the FreClean payment request generated at checkout. Verify the amount, approve the transaction in your wallet, and wait for the payment status to update to “Confirmed” before leaving the page.</p></div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Payment lifecycle</span>
      <h2>How a Web3 payment is verified</h2>
      <p>Every FreClean Web3 payment moves through the same tracked states. Nothing is marked confirmed until it is verified on-chain.</p>
    </div>
    <div class="steps">
      <div class="step"><span class="n mono">01</span><h4>Requested</h4><p>Checkout generates a payment request.</p></div>
      <div class="step"><span class="n mono">02</span><h4>Pending</h4><p>Waiting for the customer's wallet to send funds.</p></div>
      <div class="step"><span class="n mono">03</span><h4>Detected</h4><p>A matching transaction is seen on Celo.</p></div>
      <div class="step"><span class="n mono">04</span><h4>Verified</h4><p>The transaction is checked against the request.</p></div>
      <div class="step"><span class="n mono">05</span><h4>Confirmed</h4><p>Order or booking is confirmed and a receipt issued.</p></div>
    </div>
    <p style="margin-top:16px;font-size:.9rem;">Payments can also end in <strong>Failed</strong>, <strong>Expired</strong>, or <strong>Refunded</strong> where applicable.</p>
  </div>
</section>

<section>
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Supported assets</span>
      <h2>What FreClean accepts on Celo</h2>
      <p>FreClean supports only assets that are technically verified and activated. Activation details are published only after real verification.</p>
    </div>
    <div class="registry-empty card">
      <h3>No USDm asset is activated at this time</h3>
      <p>The registry remains intentionally empty until an asset is technically implemented and verified by our infrastructure partner CeloHT.</p>
    </div>
    <p style="margin-top:14px;font-size:.88rem;">Nous mettrons ce registre à jour dès qu’un actif USDm sera confirmé comme disponible pour paiement.</p>
  </div>
</section>

<div class="container">
  <div class="callout"><p>FreClean does not create or issue its own cryptocurrency or blockchain. All illustrative payment examples shown on this site are clearly labeled as DEMO and are not real transactions.</p></div>
</div>

<footer>
  <div class="container grid">
    <div>
      <a class="brand" href="index.html" style="color:#fff;"><img src="assets/img/logo.jpg" alt="FreClean logo"> FreClean</a>
      <p style="color:#9DBBB4;margin-top:12px;max-width:32ch;">Professional cleaning, cleaning products, entrepreneurship, and Web3 payments in Léogâne, Ouest, Haiti.</p>
    </div>
    <div><h4>Company</h4><ul><li><a href="about.html">About</a></li><li><a href="services.html">Services</a></li><li><a href="products.html">Products</a></li></ul></div>
    <div><h4>Programs</h4><ul><li><a href="entrepreneurship.html">Entrepreneurship</a></li><li><a href="web3-payments.html">Web3 Payments</a></li></ul></div>
    <div><h4>Contact</h4><ul><li><a href="mailto:freclean7@gmail.com">freclean7@gmail.com</a></li><li><a href="tel:+18493881969">+1 (849) 388-1969</a></li><li>Léogâne, Ouest, Haiti</li></ul></div>
  </div>
  <div class="container footer-bottom">
    <span>© 2026 FreClean. All rights reserved.</span>
    <span><a href="policies.html">Privacy · Terms · Booking · Payment policies</a></span>
  </div>
  </footer>

  <script>
  (function(){
    const btn = document.querySelector('.menu-toggle');
    const nav = document.getElementById('navlinks');
    if(btn && nav){
      btn.setAttribute('aria-expanded','false');
      btn.addEventListener('click', function(){
        const open = nav.classList.toggle('open');
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
      document.addEventListener('keydown', (e)=>{ if(e.key==='Escape'){ nav.classList.remove('open'); btn.setAttribute('aria-expanded','false'); }});
    }
  })();
  </script>

</main>

</body>
</html>