https://reflowhq.com/

Scan ID:
d65b75c2-877d-4d46-8ac4-f729b5e62eccFinished
Submitted URL:
https://reflowhq.com/
Report Finished:

The outgoing links identified from the page

JavaScript Variables · 6 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope

Console log messages · 0 found

Messages logged to the web console

HTML

The raw HTML body of the page

<!DOCTYPE html><html lang="en" data-bs-theme="light"><head>
  <meta charset="utf-8">

  <title>Reflow - Easy Auth and Subscriptions for React</title>

  <meta name="csrf-token" content="lgP1baEziN4l9Aji7tFifbKoLzCkWKDWPUrrdipt">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/png" sizes="16x16" href="https://reflowhq.com/img/logos/reflow/16x16.png">
  <link rel="alternate icon" type="image/png" sizes="32x32" href="https://reflowhq.com/img/logos/reflow/32x32.png">
  <link rel="alternate icon" type="image/png" sizes="64x64" href="https://reflowhq.com/img/logos/reflow/64x64.png">
  <link rel="alternate icon" type="image/png" sizes="128x128" href="https://reflowhq.com/img/logos/reflow/128x128.png">
  <link rel="alternate icon" type="image/png" sizes="256x256" href="https://reflowhq.com/img/logos/reflow/256x256.png">
  <link rel="alternate icon" type="image/svg+xml" href="https://reflowhq.com/img/logos/reflow/reflow.svg">
  <link rel="apple-touch-icon" sizes="256x256" href="https://reflowhq.com/img/logos/reflow/256x256.png">

  <link rel="canonical" href="https://reflowhq.com">
  <meta property="og:url" content="https://reflowhq.com">
  <meta name="twitter:url" content="https://reflowhq.com">

  <meta property="og:type" content="website">
  <meta property="og:image" content="https://reflowhq.com/img/card.png">
  <meta property="og:title" content="Reflow - Easy Auth and Subscriptions for React">
  <meta property="og:description" content="We help you add authentication, subscriptions and ecommerce functionality to any React or Next.js project. Just connect your Stripe, PayPal or Paddle account and start accepting payments.">

  <meta name="twitter:title" content="Reflow - Easy Auth and Subscriptions for React">
  <meta name="twitter:image" content="https://reflowhq.com/img/card.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:description" content="We help you add authentication, subscriptions and ecommerce functionality to any React or Next.js project. Just connect your Stripe, PayPal or Paddle account and start accepting payments.">

  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "Reflow",
      "url": "https://reflowhq.com"
    }
  </script>

  <meta name="description" content="We help you add authentication, subscriptions and ecommerce functionality to any React or Next.js project. Just connect your Stripe, PayPal or Paddle account and start accepting payments.">

  <script type="text/javascript">
    const getStoredTheme = () => localStorage.getItem('theme');
    const setStoredTheme = theme => localStorage.setItem('theme', theme);

    const themeIcons = {
      light: `<svg class="bi bi-sun" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
        </svg>`,
      dark: `<svg class="bi bi-moon" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 16 16">
            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"></path>
        </svg>`
    };

    const getPreferredTheme = () => {

      const storedTheme = getStoredTheme();
      if (storedTheme) {
        return storedTheme;
      }

      const pageTheme = document.documentElement.getAttribute('data-bs-theme');

      if (pageTheme) {
        return pageTheme;
      }

      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }

    const setTheme = theme => {
      document.documentElement.setAttribute('data-bs-theme', theme);
    }

    let preferredTheme = getPreferredTheme()
    setStoredTheme(preferredTheme);
    setTheme(preferredTheme);

    const showActiveTheme = (theme) => {
      const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));

      if (!themeSwitchers.length) return;

      for (const themeSwitcher of themeSwitchers) {
        themeSwitcher.innerHTML = themeIcons[theme];
      }
    }

    window.addEventListener('DOMContentLoaded', () => {
      showActiveTheme(getPreferredTheme());

      document.querySelectorAll('.theme-switcher').forEach(toggle => {
        toggle.addEventListener('click', (e) => {
          e.preventDefault();

          const oldTheme = getPreferredTheme();
          const newTheme = oldTheme === 'light' ? 'dark' : 'light';

          setStoredTheme(newTheme);
          setTheme(newTheme);
          showActiveTheme(newTheme);
        });
      });
    });
  </script>

  
  <link rel="stylesheet" type="text/css" href="/css/app.css?id=834fa923c63f6759fe7c">

  
<style>code[class*=language-],pre[class*=language-]{word-wrap:normal;background:none;color:#ccc;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}</style></head>
<body class="app-layout" id="landing-page">

    
  <div id="main-container">

    <div class="w-100 border-bottom-0 header bg-body text-body shadow-lg fixed-top px-4 py-1">
      <div class="limiter limiter-lg">
        <nav class="navbar-static navbar w-100 navbar-expand-md navbar-light">
     <div class="container-fluid p-0">
       <a href="https://reflowhq.com" class="logo me-5">
    <img src="https://reflowhq.com/img/logos/reflow.svg" width="40" height="40" alt="Logo">
    <span class="fw-bold ms-1 fs-2 text-body align-middle">Reflow</span>
</a>
       
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse justify-content-end" id="navbarNav">

                          
             <ul class="navbar-nav fs-5 fw-bold">
               <li class="nav-item"><a class="nav-link me-4" href="https://reflowhq.com/pricing">Pricing</a></li>
               <li class="nav-item dropdown me-lg-3"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">Learn&nbsp;</a>
                 <div class="dropdown-menu" data-bs-theme="light"><a class="dropdown-item" href="/docs/">Docs</a><a class="dropdown-item" href="/learn/">Articles</a></div>
               </li>
               <li class="nav-item"><a class="nav-link me-0 me-lg-4" href="https://reflowhq.com/login">Login</a></li>
               <li class="nav-item"><a href="https://reflowhq.com/register" class="d-none d-sm-inline-block btn btn-primary fs-6 px-5 ms-2">Sign up</a></li>
               <li class="nav-item"><a href="https://reflowhq.com/register" class="d-block d-sm-none nav-link fs-5 text-primary">Sign up</a></li>
             </ul>
             
           </div>

         </div>
       </nav>      </div>
    </div>

    <div class="content pt-6">
      
<div class="static-page pt-9 cream-background">

  <div class="limiter limiter-lg px-4 text-center">

    <h1 class="mb-1 text-center display-5">Best way to add <span id="typed-strings" style="clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;"><span>user sign-in</span>, <span>ecommerce</span> and <span>subscriptions</span></span><span id="typed">user si</span><span class="typed-cursor" aria-hidden="true">|</span></h1>
    <h3 class="limiter mb-7 display-6 text-success">to your React projects</h3>

    <p class="mb-7 limiter limiter-md px-md-6 fs-3">Reflow is a platform that helps you add authentication, subscriptions and ecommerce functionality to any React or Next.js project. Just connect your Stripe, PayPal or Paddle account and start accepting payments.</p>

    <div class="">
      <a href="https://reflowhq.com/register" class="btn btn-lg btn-primary fs-3 ms-2 mb-3 mb-sm-0" style="padding: 12px 48px;">Sign up</a>
      <a href="/docs/" class="btn btn-lg btn-outline-secondary fs-3 ms-2" style="padding: 12px 32px;">Integration Guide</a>
    </div>

    <div class="position-relative d-none d-md-block mt-7">
      <div class="animation-wrapper">
        <div class="animation-container">
          <div class="animation-auth" style="opacity: 0;">
            <div class="browser-window browser-window-lg">
              <div class="browser-bar">
                <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
              </div>

              <div class="browser-content bg-primary-subtle">
                <div class="button-content">
                  <a href="#" class="btn btn-primary mb-2">Sign in</a>
                </div>
              </div>
            </div>
            <div class="connection-container d-flex align-items-center">
              <div class="connection flex-grow-1">
                <div class="connection-content">
                  <div class="connecting-line"></div>
                  <div class="browser-window browser-window-sm position-absolute" style="opacity: 0;">
                    <div class="browser-bar">
                      <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
                    </div>

                    <div class="browser-content p-3">
                      <div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1" viewBox="0 0 33 33" width="33" height="33">
                          <defs>
                            <linearGradient id="g1" x1="16.7" y1=".4" x2="16.7" y2="34" gradientUnits="userSpaceOnUse">
                              <stop offset="0" stop-color="#00b2ff"></stop>
                              <stop offset="1" stop-color="#006aff"></stop>
                            </linearGradient>
                          </defs>
                          <path id="Layer" fill-rule="evenodd" style="fill: url(#g1)" d="m16.7 0.7c8.8 0 15.9 7.1 15.9 15.9 0 8.9-7.1 16-15.9 16-8.9 0-16-7.1-16-16 0-8.8 7.1-15.9 16-15.9z"></path>
                          <path id="Layer" style="fill: #ffffff" d="m18.7 32.5v-12.4h3.5l0.5-4.3h-4v-2.2c0-1.1 0.1-1.7 1.8-1.7h2.1v-4.3h-3.4c-4.2 0-5.7 2.1-5.7 5.6v2.6h-2.6v4.3h2.6v12.2q1.5 0.3 3.2 0.3 0.2 0 0.5 0 0.2 0 0.5 0 0.3-0.1 0.5-0.1 0.3 0 0.5 0z"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" class="mb-1" width="33" height="33" viewBox="0 0 24 24">
                          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
                          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
                          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
                          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
                          <path d="M1 1h22v22H1z" fill="none"></path>
                        </svg>
                        <br>
                        <svg xmlns="http://www.w3.org/2000/svg" class="d-dark-none me-1" viewBox="0 0 32 38" width="32" height="38">
                          <path id="Apple" style="fill: #000000" d="m26.1 20c0-3.1 1.3-5.4 4.1-7.1q-2.3-3.3-7-3.7c-2.9-0.2-6.1 1.8-7.3 1.8-1.2 0-4.1-1.7-6.3-1.7-4.6 0.1-9.6 3.7-9.6 11.1q0 3.2 1.2 6.7c1.1 3 4.9 10.5 8.9 10.3 2.1 0 3.6-1.4 6.3-1.4 2.6 0 4 1.4 6.3 1.4 4 0 7.5-6.8 8.5-9.8-5.4-2.6-5.1-7.5-5.1-7.6zm-4.7-13.6c2.3-2.7 2.1-5.2 2-6-2 0.1-4.3 1.3-5.6 2.9-1.5 1.6-2.3 3.6-2.1 5.9 2.1 0.2 4.1-0.9 5.7-2.8z"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" class="d-light-none me-1" viewBox="0 0 32 38" width="32" height="38">
                          <path id="Apple" style="fill: #ffffff" d="m26.1 20c0-3.1 1.3-5.4 4.1-7.1q-2.3-3.3-7-3.7c-2.9-0.2-6.1 1.8-7.3 1.8-1.2 0-4.1-1.7-6.3-1.7-4.6 0.1-9.6 3.7-9.6 11.1q0 3.2 1.2 6.7c1.1 3 4.9 10.5 8.9 10.3 2.1 0 3.6-1.4 6.3-1.4 2.6 0 4 1.4 6.3 1.4 4 0 7.5-6.8 8.5-9.8-5.4-2.6-5.1-7.5-5.1-7.6zm-4.7-13.6c2.3-2.7 2.1-5.2 2-6-2 0.1-4.3 1.3-5.6 2.9-1.5 1.6-2.3 3.6-2.1 5.9 2.1 0.2 4.1-0.9 5.7-2.8z"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 30" width="37" height="30">
                          <path id="Twitter" style="fill: #1da1f2 " d="m11.7 29.9c13.7 0 21.1-11.4 21.1-21.2q0-0.5 0-0.9 0.6-0.4 1.1-0.9 0.5-0.4 1-0.9 0.4-0.5 0.8-1 0.5-0.5 0.8-1.1-2 0.9-4.2 1.2c1.5-0.9 2.7-2.4 3.2-4.1q-0.5 0.3-1.1 0.6-0.6 0.2-1.1 0.5-0.6 0.2-1.3 0.4-0.6 0.1-1.2 0.3c-1.3-1.5-3.3-2.4-5.4-2.4-4.1 0-7.4 3.3-7.4 7.4q0 0.9 0.1 1.7c-6.1-0.3-11.6-3.2-15.3-7.7q-0.2 0.4-0.4 0.9-0.2 0.4-0.3 0.9-0.2 0.5-0.2 0.9-0.1 0.5-0.1 1c0 2.6 1.3 4.9 3.3 6.2q-0.4 0-0.9-0.1-0.4 0-0.8-0.2-0.4-0.1-0.8-0.2-0.5-0.2-0.8-0.4 0 0 0 0.1c0 3.6 2.5 6.6 5.9 7.3q-0.2 0-0.5 0.1-0.2 0-0.5 0.1-0.2 0-0.4 0-0.3 0-0.5 0-0.8 0-1.4-0.1c0.9 2.9 3.7 5.1 6.9 5.2-2.5 1.9-5.7 3.1-9.2 3.1q-0.2 0-0.5 0-0.2 0-0.4 0-0.2 0-0.5 0-0.2 0-0.4-0.1c3.3 2.1 7.2 3.4 11.4 3.4z"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="user-avatar user-avatar-lg bg-primary-subtle"></div>
            </div>
          </div>
          <div class="animation-subscribe" style="opacity: 0;">
            <div class="browser-window browser-window-lg">
              <div class="browser-bar">
                <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
              </div>

              <div class="browser-content bg-success-subtle">
                <div class="button-content">
                  <a href="#" class="btn btn-success mb-2">Subscribe</a>
                </div>
              </div>
            </div>
            <div class="connection-container d-flex align-items-center">
              <div class="connection flex-grow-1">
                <div class="connection-content">
                  <div class="connecting-line"></div>
                  <div class="browser-window browser-window-sm position-absolute">
                    <div class="browser-bar">
                      <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
                    </div>

                    <div class="browser-content p-3">
                      <div>
                        <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 31" width="73" height="31">
                          <path id="stripe" fill-rule="evenodd" style="fill: #6772e5" d="m12.9 19.3c0 3.6-2.8 5.7-7 5.7-1.8 0-3.7-0.3-5.5-1.2v-4.7c1.7 0.9 3.8 1.6 5.5 1.6 1.1 0 1.9-0.3 1.9-1.3 0-2.4-7.6-1.5-7.6-7 0-3.6 2.7-5.7 6.8-5.7 1.6 0 3.3 0.2 5 0.9v4.7c-1.6-0.8-3.5-1.3-5-1.3-1.1 0-1.8 0.3-1.8 1.1 0 2.3 7.7 1.2 7.7 7.2zm5.9-12.3h3.9v4.3h-3.9v7.2c0 2.9 3.2 2 3.9 1.7v4.1c-0.7 0.4-1.9 0.7-3.6 0.7-2.9 0-5.2-2.2-5.2-5.2v-16.1l5-1.1zm14.2 0v4.7c-0.6-0.2-2.6-0.5-3.8 1v12h-5v-17.7h4.3l0.3 1.5c1.2-2.1 3.6-1.7 4.2-1.5zm1.3 0h5v17.7h-5zm0-5.7l5-1v4l-5 1.1zm22.4 14.4c0 6.3-3.3 9.2-6.9 9.2-1.8 0-2.8-0.7-3.6-1.2v5.7l-5 1v-23.4h4.4l0.3 1.2c0.7-0.6 2-1.6 3.9-1.6 3.5 0 6.9 3.2 6.9 9.1zm-5 0.1c0-2.6-1.3-4.7-3.1-4.7-1.1 0-1.9 0.4-2.4 1v7.5c0.5 0.5 1.2 0.9 2.4 0.9 1.9 0 3.1-2 3.1-4.7zm20.8 1.8h-9.8c0.2 2.4 1.9 3.1 3.9 3.1 2 0 3.5-0.4 4.9-1.1v4c-1.4 0.8-3.2 1.3-5.6 1.3-4.9 0-8.3-3-8.3-9.1 0-5.1 2.9-9.2 7.7-9.2 4.8 0 7.3 4.1 7.3 9.3 0 0.4-0.1 1.5-0.1 1.7zm-4.7-3.7c0-2.2-1.3-3.2-2.5-3.2-1.3 0-2.7 1-2.7 3.2z"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="user-avatar user-avatar-lg bg-success-subtle"></div>
            </div>
          </div>
          <div class="animation-checkout" style="opacity: 0;">
            <div class="browser-window browser-window-lg">
              <div class="browser-bar">
                <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
              </div>

              <div class="browser-content bg-danger-subtle">
                <div class="button-content">
                  <a href="#" class="btn btn-danger mb-2">Checkout</a>
                </div>
              </div>
            </div>
            <div class="connection-container d-flex align-items-center">
              <div class="connection flex-grow-1">
                <div class="connection-content">
                  <div class="connecting-line"></div>
                  <div class="browser-window browser-window-sm position-absolute">
                    <div class="browser-bar">
                      <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
                    </div>

                    <div class="browser-content p-3">
                      <div>
                        <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 31" width="73" height="31">
                          <path id="stripe" fill-rule="evenodd" style="fill: #6772e5" d="m12.9 19.3c0 3.6-2.8 5.7-7 5.7-1.8 0-3.7-0.3-5.5-1.2v-4.7c1.7 0.9 3.8 1.6 5.5 1.6 1.1 0 1.9-0.3 1.9-1.3 0-2.4-7.6-1.5-7.6-7 0-3.6 2.7-5.7 6.8-5.7 1.6 0 3.3 0.2 5 0.9v4.7c-1.6-0.8-3.5-1.3-5-1.3-1.1 0-1.8 0.3-1.8 1.1 0 2.3 7.7 1.2 7.7 7.2zm5.9-12.3h3.9v4.3h-3.9v7.2c0 2.9 3.2 2 3.9 1.7v4.1c-0.7 0.4-1.9 0.7-3.6 0.7-2.9 0-5.2-2.2-5.2-5.2v-16.1l5-1.1zm14.2 0v4.7c-0.6-0.2-2.6-0.5-3.8 1v12h-5v-17.7h4.3l0.3 1.5c1.2-2.1 3.6-1.7 4.2-1.5zm1.3 0h5v17.7h-5zm0-5.7l5-1v4l-5 1.1zm22.4 14.4c0 6.3-3.3 9.2-6.9 9.2-1.8 0-2.8-0.7-3.6-1.2v5.7l-5 1v-23.4h4.4l0.3 1.2c0.7-0.6 2-1.6 3.9-1.6 3.5 0 6.9 3.2 6.9 9.1zm-5 0.1c0-2.6-1.3-4.7-3.1-4.7-1.1 0-1.9 0.4-2.4 1v7.5c0.5 0.5 1.2 0.9 2.4 0.9 1.9 0 3.1-2 3.1-4.7zm20.8 1.8h-9.8c0.2 2.4 1.9 3.1 3.9 3.1 2 0 3.5-0.4 4.9-1.1v4c-1.4 0.8-3.2 1.3-5.6 1.3-4.9 0-8.3-3-8.3-9.1 0-5.1 2.9-9.2 7.7-9.2 4.8 0 7.3 4.1 7.3 9.3 0 0.4-0.1 1.5-0.1 1.7zm-4.7-3.7c0-2.2-1.3-3.2-2.5-3.2-1.3 0-2.7 1-2.7 3.2z"></path>
                        </svg>
                        <br>
                        <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 21" width="85" height="21">
                          <path id="Layer" fill-rule="evenodd" style="fill: #253b80" d="m35.3 5.6q0.9 1.1 0.6 3-0.7 4.4-5.3 4.4h-1.4q-0.2 0-0.3 0.1-0.1 0-0.2 0.1 0 0.1-0.1 0.2-0.1 0.1-0.1 0.2l-0.5 3.2q0 0.1-0.1 0.2 0 0.1-0.1 0.2-0.1 0-0.2 0.1-0.1 0-0.2 0h-2.2q-0.1 0-0.2 0-0.1 0-0.1-0.1-0.1-0.1-0.1-0.2 0 0 0-0.1l1.9-11.9q0-0.1 0-0.2 0.1-0.1 0.2-0.2 0.1-0.1 0.2-0.1 0.1 0 0.2 0h4.6c1.6 0 2.8 0.4 3.4 1.1zm-3.1 1.9c-0.4-0.5-1.2-0.5-2-0.5h-0.3q-0.1 0-0.1 0.1-0.1 0-0.2 0 0 0.1 0 0.1-0.1 0.1-0.1 0.2l-0.5 3.1h0.7c1.2 0 2.5 0 2.8-1.7q0.1-0.9-0.3-1.3zm13.7 1.3q0.1 0 0.2 0.1 0 0 0.1 0.1 0 0.1 0 0.2l-1.2 7.6q-0.1 0.1-0.1 0.2-0.1 0.1-0.2 0.2 0 0-0.1 0.1-0.2 0-0.3 0h-2q-0.1 0-0.1 0-0.1 0-0.2-0.1 0-0.1 0-0.2-0.1 0-0.1-0.1l0.1-0.6c0 0-1 1.2-3 1.2-1.2 0-2.1-0.3-2.8-1.1-0.8-0.9-1.1-2.1-0.8-3.4 0.4-2.6 2.5-4.5 4.9-4.5 1.1 0 2.2 0.3 2.6 1l0.2 0.2 0.1-0.6q0-0.1 0-0.2 0.1 0 0.1-0.1 0.1 0 0.1 0 0.1-0.1 0.2-0.1h2.2q0.1 0 0.1 0.1zm-3.6 2.7q-0.5-0.6-1.5-0.6c-1.2 0-2.2 0.9-2.4 2.1-0.2 0.6 0 1.2 0.3 1.6q0.5 0.6 1.5 0.6c1.3 0 2.3-0.9 2.5-2.1 0.1-0.7 0-1.2-0.4-1.6zm15.5-2.7q0.1 0.1 0.1 0.2 0.1 0 0.1 0.2 0 0.1-0.1 0.1l-7.4 10.8q0 0-0.1 0.1-0.1 0-0.1 0.1-0.1 0-0.2 0 0 0-0.1 0h-2.3q-0.1 0-0.2 0 0-0.1-0.1-0.2 0-0.1 0-0.2 0-0.1 0-0.2l2.3-3.2-2.4-7.2q0-0.1 0-0.2 0-0.1 0-0.2 0.1-0.1 0.2-0.1 0.1-0.1 0.2-0.1h2.1q0.1 0 0.2 0.1 0.1 0 0.2 0.1 0.1 0 0.2 0.1 0 0.1 0.1 0.2l1.3 4.4 3-4.6q0.1 0 0.1-0.1 0.1 0 0.2-0.1 0 0 0.1 0 0.1-0.1 0.2-0.1h2.2q0.1 0 0.2 0.1z"></path>
                          <path id="Layer" fill-rule="evenodd" style="fill: #179bd7" d="m68.4 5.6q0.9 1.1 0.6 3-0.7 4.4-5.3 4.4h-1.5q-0.1 0-0.2 0.1-0.1 0-0.2 0.1-0.1 0.1-0.2 0.2 0 0.1 0 0.2l-0.6 3.3q0 0.1 0 0.2 0 0.1-0.1 0.1-0.1 0.1-0.1 0.1-0.1 0-0.2 0h-2.4q-0.1 0-0.1 0-0.1 0-0.2-0.1 0-0.1-0.1-0.2 0 0 0-0.1l1.9-11.9q0-0.1 0.1-0.2 0-0.1 0.1-0.2 0.1-0.1 0.2-0.1 0.1 0 0.2 0h4.7c1.5 0 2.7 0.4 3.4 1.1zm-3.1 1.9c-0.4-0.5-1.2-0.5-2-0.5h-0.4q0 0-0.1 0.1-0.1 0-0.1 0-0.1 0.1-0.1 0.1 0 0.1 0 0.2l-0.5 3.1h0.7c1.2 0 2.5 0 2.7-1.7q0.2-0.9-0.2-1.3zm13.7 1.3q0.1 0 0.1 0.1 0.1 0 0.1 0.1 0 0.1 0 0.2l-1.2 7.6q0 0.1-0.1 0.2 0 0.1-0.1 0.2-0.1 0-0.2 0.1-0.1 0-0.2 0h-2q-0.1 0-0.2 0-0.1 0-0.1-0.1-0.1-0.1-0.1-0.2 0 0 0-0.1l0.1-0.6c0 0-1.1 1.2-3.1 1.2-1.1 0-2.1-0.3-2.8-1.1-0.7-0.9-1-2.1-0.8-3.4 0.4-2.6 2.5-4.5 5-4.5 1 0 2.1 0.3 2.6 1l0.1 0.2 0.1-0.6q0-0.1 0.1-0.2 0 0 0.1-0.1 0 0 0.1 0 0-0.1 0.1-0.1h2.2q0.1 0 0.2 0.1zm-3.6 2.7q-0.6-0.6-1.5-0.6c-1.3 0-2.3 0.9-2.5 2.1-0.1 0.6 0 1.2 0.3 1.6q0.6 0.6 1.5 0.6c1.3 0 2.3-0.9 2.5-2.1 0.1-0.7 0-1.2-0.3-1.6zm6.1-6.8q0-0.1 0.1-0.1 0-0.1 0.1-0.1 0.1 0 0.1 0h2.2q0.1 0 0.1 0 0.1 0 0.2 0.1 0 0.1 0 0.1 0.1 0.1 0.1 0.2l-1.9 11.9c-0.1 0.3-0.3 0.5-0.7 0.5h-1.9q-0.1 0-0.1 0-0.1 0-0.2-0.1 0-0.1 0-0.2-0.1 0-0.1-0.1l1.9-12.1q0.1-0.1 0.1-0.1z"></path>
                          <path id="Layer" style="fill: #253b80" d="m5.5 19.6l0.4-2.2h-0.8-3.8l2.7-16.6q0-0.1 0-0.1 0 0 0-0.1 0.1 0 0.1 0 0 0 0.1 0h6.3q3.2 0 4.4 1.3 0.5 0.6 0.7 1.3 0.1 0.7 0 1.8h-0.1v0.5l0.4 0.2q0.1 0 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.2 0 0.1 0.1 0.1 0.5 0.6 0.6 1.3 0.1 0.9-0.1 2-0.2 1.2-0.8 2.1-0.1 0.2-0.2 0.4-0.1 0.2-0.3 0.4-0.2 0.1-0.3 0.3-0.2 0.1-0.4 0.3-0.7 0.5-1.7 0.7-0.9 0.3-2 0.3h-0.5c-0.4 0-0.7 0.1-1 0.3q-0.1 0.1-0.2 0.2-0.1 0.1-0.1 0.2-0.1 0.1-0.1 0.3-0.1 0.1-0.1 0.2v0.2l-0.7 4v0.1q0 0.1 0 0.1 0 0 0 0-0.1 0-0.1 0 0 0 0 0 0 0 0 0z"></path>
                          <path id="Layer" style="fill: #179bd7" d="m16.2 5.1q0 0.2 0 0.4c-0.9 4.3-3.7 5.7-7.4 5.7h-1.9c-0.4 0-0.8 0.4-0.9 0.8l-0.9 6.1-0.3 1.7q0 0.1 0 0.2 0.1 0.1 0.1 0.2 0.1 0 0.2 0.1 0.1 0 0.2 0h3.3c0.4 0 0.7-0.3 0.8-0.6v-0.2l0.6-4 0.1-0.2c0-0.4 0.4-0.6 0.8-0.6h0.5c3.2 0 5.7-1.3 6.4-5.1 0.3-1.6 0.2-2.9-0.7-3.8q0-0.1-0.2-0.2-0.1-0.1-0.2-0.2-0.1-0.1-0.2-0.2-0.1-0.1-0.3-0.1z"></path>
                          <path id="Layer" style="fill: #222d65" d="m15.4 4.7q-0.1 0-0.2 0-0.1-0.1-0.2-0.1-0.1 0-0.2 0-0.1 0-0.3-0.1-0.2 0-0.4 0-0.2 0-0.4 0-0.2-0.1-0.4-0.1-0.2 0-0.4 0h-5q-0.1 0-0.3 0.1-0.1 0-0.2 0.1-0.1 0.1-0.2 0.2 0 0.2-0.1 0.3l-1 6.7-0.1 0.2q0.1-0.2 0.2-0.3 0-0.1 0.2-0.2 0.1-0.1 0.2-0.2 0.2-0.1 0.3-0.1h1.9c3.7 0 6.5-1.4 7.4-5.7q0-0.2 0-0.4 0-0.1-0.1-0.1-0.1 0-0.2-0.1-0.1 0-0.2 0-0.1-0.1-0.1-0.1-0.1 0-0.1 0 0 0 0 0-0.1 0-0.1-0.1 0 0 0 0z"></path>
                          <path id="Layer" style="fill: #253b80" d="m7.1 5.1q0.1-0.1 0.1-0.3 0.1-0.1 0.2-0.2 0.1-0.1 0.2-0.1 0.2-0.1 0.3-0.1h5q0.9 0 1.6 0.1 0.2 0.1 0.3 0.1 0.1 0 0.3 0.1 0.1 0 0.2 0 0.1 0 0.3 0.1 0.3 0.1 0.6 0.3c0.3-1.6 0-2.7-0.8-3.7-1-1.1-2.7-1.5-4.9-1.5h-6.3c-0.5 0-0.9 0.3-0.9 0.8l-2.7 16.7q0 0.1 0 0.3 0.1 0.1 0.2 0.2 0 0.1 0.1 0.1 0.2 0.1 0.3 0.1h3.9l1-6.3z"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="user-avatar user-avatar-lg bg-danger-subtle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div> 

<div class="white-background pt-7 pt-md-7">

  <div class="limiter limiter-lg px-4">

    <div class="text-center mb-5">
      <h2 class="mb-3 display-6 mb-2 pt-md-7">Sign-in is a piece of cake</h2>
      <p class="mb-4 limiter limiter-md text-secondary-emphasis px-md-6 fs-3">Add user accounts and authentication to your React<br>and vanilla js projects in seconds.</p>
      <a href="https://reflowhq.com/docs/guide/auth-overview" class="btn btn-success">Learn more</a>
    </div>

    <div class="d-flex flex-column flex-md-row justify-content-center py-5">
      <ul class="nav nav-pills nav-vertical flex-md-column flex-nowrap pb-3 pb-md-0 mb-5 mb-md-0 me-md-5" role="tablist">
        <li class="nav-item has-arrow text-nowrap" role="presentation"><a class="nav-link active" role="tab" data-bs-toggle="tab" href="#registration-tab-1" aria-selected="true">Easy integration</a></li>
        <li class="nav-item has-arrow text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#registration-tab-2" aria-selected="false" tabindex="-1">Elegant sign-in flow</a></li>
        <li class="nav-item has-arrow text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#registration-tab-3" aria-selected="false" tabindex="-1">Multiple auth providers</a></li>
        <li class="nav-item has-arrow text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#registration-tab-4" aria-selected="false" tabindex="-1">Frontend and backend</a></li>
        <li class="nav-item has-arrow text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#registration-tab-5" aria-selected="false" tabindex="-1">GDPR and privacy friendly</a></li>
      </ul>
      <div class="tab-content flex-grow-1 ms-md-5">
        <div id="registration-tab-1" class="tab-pane active" role="tabpanel">
          <div class="code-window mb-5 p-1 p-md-4 top-0">
            <div>
              <pre class="text-white fs-5 text-start mb-0 rounded-b-xl language-jsx" tabindex="0"><code class="p-0 language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> useAuth <span class="token keyword">from</span> <span class="token string">"@reflowhq/auth-react"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> auth <span class="token operator">=</span> <span class="token function">useAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">storeID</span><span class="token operator">:</span> <span class="token number">123456789</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>auth<span class="token punctuation">.</span><span class="token function">isSignedIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Welcome, </span><span class="token punctuation">{</span>auth<span class="token punctuation">.</span>user<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> auth<span class="token punctuation">.</span><span class="token function">signIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    Sign In
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

            </div>

          </div>
          <p class="px-sm-5">To integrate Reflow Auth, just import our React hook and pass your project id. <a href="https://reflowhq.com/docs/guide/auth-overview">Getting started →</a>
          </p>
        </div>
        <div id="registration-tab-2" class="tab-pane" role="tabpanel">
          <div class="mb-5">
            <img src="img/landing/sign-in-illustration.svg" class="img-fluid" alt="Sign in Window">
          </div>
          <p class="px-sm-5">The Reflow Auth library lets users sign into your app without page redirects, making it easy to transition into a signed-in state seamlessly. <a href="https://reflowhq.com/docs/guide/auth-react-integration">Examples →</a>
          </p>
        </div>
        <div id="registration-tab-3" class="tab-pane" role="tabpanel">
          <div class="mb-5">
            <img src="img/landing/auth-providers-illustration.svg" class="img-fluid" alt="Authentication Providers">
          </div>
          <p class="px-sm-5">Users can sign in via multiple providers, including Google, Apple, Facebook, Twitter/X, and also by using an email and password.
            <a href="https://reflowhq.com/docs/guide/auth-setup">Sign-in providers →</a>
          </p>
        </div>
        <div id="registration-tab-4" class="tab-pane" role="tabpanel">
          <div class="code-window mb-5 p-1 p-md-4 top-0">
            <div>
              <pre class="text-white fs-5 text-start mb-0 rounded-b-xl language-jsx" tabindex="0"><code class="p-0 language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> useAuth <span class="token keyword">from</span> <span class="token string">"@reflowhq/auth-react"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> auth <span class="token operator">=</span> <span class="token function">useAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">storeID</span><span class="token operator">:</span> <span class="token number">123456789</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>auth<span class="token punctuation">.</span><span class="token function">isSignedIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Please sign in to create a ticket.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>auth<span class="token punctuation">.</span><span class="token function">isSubscribed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">An active subscription is
      required to create tickets.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">createTicket</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    Create a Ticket
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">createTicket</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token keyword">await</span> auth<span class="token punctuation">.</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
    <span class="token string">"/create-ticket?token="</span> <span class="token operator">+</span> token<span class="token punctuation">,</span> 
    <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">"POST"</span> <span class="token punctuation">}</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  window<span class="token punctuation">.</span>location <span class="token operator">=</span> json<span class="token punctuation">.</span>url<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
            </div>
          </div>
          <p class="px-sm-5">You can authenticate both the frontend and backend. Reflow Auth gives you secure JWT tokens which you can validate on the server or in cloud functions like Cloudflare Workers and Lambda. <a href="https://github.com/Reflow-HQ/libs/tree/master/auth/examples/express-signin">Server example →</a></p>
        </div>
        <div id="registration-tab-5" class="tab-pane" role="tabpanel">
          <div class="mb-5">
            <img src="img/landing/user-data.svg" class="img-fluid" alt="Purge User Data">
          </div>
          <p class="px-sm-5">Browse and manage registered accounts from Reflow's backend. Purge user data and invalidate active sessions all from a central place.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="white-background pt-7 pt-lg-9">

  <div class="limiter limiter-lg px-4">

    <div class="text-center mb-5">
      <h2 class="mb-3 display-6 mb-2 pt-md-7">Subscriptions are a breeze</h2>
      <p class="mb-4 limiter limiter-md text-secondary-emphasis px-md-6 fs-3">Connect Stripe, define subscription plans and receive<br>your earnings with zero fees.</p>
      <a href="https://reflowhq.com/docs/guide/subscriptions-overview" class="btn btn-success">Learn more</a>
    </div>

    <div class="d-flex flex-column align-items-md-center py-5">
      <ul class="nav nav-pills flex-nowrap pb-3 pb-md-5 mb-1" role="tablist">
        <li class="nav-item text-nowrap" role="presentation"><a class="nav-link active" role="tab" data-bs-toggle="tab" href="#subscription-tab-1" aria-selected="true">Select plans</a></li>
        <li class="nav-item text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#subscription-tab-2" aria-selected="false" tabindex="-1">Create subscription</a></li>
        <li class="nav-item text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#subscription-tab-3" aria-selected="false" tabindex="-1">Modify subscription</a></li>
        <li class="nav-item text-nowrap" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#subscription-tab-4" aria-selected="false" tabindex="-1">Restrict access</a></li>
      </ul>
      <div id="subscription-tab-content" class="tab-content">
        <div id="subscription-tab-1" class="tab-pane limiter-md active" role="tabpanel">
          <div class="code-window mb-5 p-1 p-md-4 top-0">
            <div>
              <pre class="text-white fs-5 text-start mb-0 rounded-b-xl language-jsx" tabindex="0"><code class="p-0 language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">storeID</span><span class="token operator">:</span> <span class="token number">123456789</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>plans<span class="token punctuation">,</span> setPlans<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.reflowhq.com/v2/stores/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>storeID<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plans/</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">r</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setPlans</span><span class="token punctuation">(</span>r<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plan-container<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token punctuation">{</span>plans<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plan<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>features<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">f<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>f<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>prices<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>price_formatted<span class="token punctuation">}</span><span class="token plain-text"> per </span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>prices<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>billing_period<span class="token punctuation">}</span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
            </div>
          </div>
          <p class="px-sm-5">Configure your subscription plans on Reflow, define plan limits and feature flags. Use the Reflow API to select your plans and build a pricing table.
            <a href="https://reflowhq.com/docs/guide/subscriptions-react-integration/">See Example →</a>
          </p>
        </div>
        <div id="subscription-tab-2" class="tab-pane" role="tabpanel">
          <div class="code-window mb-5 p-1 p-md-4 top-0">
            <div>
              <pre class="text-white fs-5 text-start mb-0 rounded-b-xl language-jsx" tabindex="0"><code class="p-0 language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> useAuth <span class="token keyword">from</span> <span class="token string">"@reflowhq/auth-react"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> auth <span class="token operator">=</span> <span class="token function">useAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">storeID</span><span class="token operator">:</span> <span class="token number">123456789</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>auth<span class="token punctuation">.</span><span class="token function">isSubscribed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">You are subscribed to the </span><span class="token punctuation">{</span>auth<span class="token punctuation">.</span>subscription<span class="token punctuation">.</span>plan<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token plain-text"> 
      plan for </span><span class="token punctuation">{</span>auth<span class="token punctuation">.</span>subscription<span class="token punctuation">.</span>price<span class="token punctuation">.</span>price_formatted<span class="token punctuation">}</span><span class="token plain-text"> per 
      </span><span class="token punctuation">{</span>auth<span class="token punctuation">.</span>subscription<span class="token punctuation">.</span>price<span class="token punctuation">.</span>billing_period<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> auth<span class="token punctuation">.</span><span class="token function">createSubscription</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">priceID</span><span class="token operator">:</span> <span class="token number">123456789</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Subscribe</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
            </div>
          </div>
          <p class="px-sm-5">Call the <code>auth.createSubscription</code> method with the id of a Plan Price to display a payment page.
            <a href="https://reflowhq.com/docs/guide/subscriptions-react-integration#subscription-example">See Example →</a>
          </p>
        </div>
        <div id="subscription-tab-3" class="tab-pane" role="tabpanel">
          <div class="code-window mb-5 p-1 p-md-4 top-0">
            <div>
              <pre class="text-white fs-5 text-start mb-0 rounded-b-xl language-jsx" tabindex="0"><code class="p-0 language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> useAuth <span class="token keyword">from</span> <span class="token string">"@reflowhq/auth-react"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> auth <span class="token operator">=</span> <span class="token function">useAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">storeID</span><span class="token operator">:</span> <span class="token number">123456789</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>auth<span class="token punctuation">.</span><span class="token function">isSubscribed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> auth<span class="token punctuation">.</span><span class="token function">modifySubscription</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      Modify Subscription
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Please sign in to modify your subscription</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
            </div>
          </div>
          <p class="px-sm-5">To let the user update their payment method or change their plan, call the <code>auth.modifySubscription</code> method.
            <a href="https://reflowhq.com/docs/guide/subscriptions-react-integration#subscription-example">See Example →</a>
          </p>
        </div>
        <div id="subscription-tab-4" class="tab-pane" role="tabpanel">
          <div class="code-window mb-5 p-1 p-md-4 top-0">
            <div>
              <pre class="text-white fs-5 text-start mb-0 rounded-b-xl language-jsx" tabindex="0"><code class="p-0 language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> useAuth <span class="token keyword">from</span> <span class="token string">"@reflowhq/auth-react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>sendInvitation<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../helpers/invitations"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> auth <span class="token operator">=</span> <span class="token function">useAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">storeID</span><span class="token operator">:</span> <span class="token number">123456789</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>auth<span class="token punctuation">.</span><span class="token function">isSubscribed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> auth<span class="token punctuation">.</span>subscription<span class="token punctuation">.</span>plan<span class="token punctuation">.</span>parameters<span class="token punctuation">.</span>can_invite<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">sendInvitation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      Invite Team Mate
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">You can't invite team additional members.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
            </div>
          </div>
          <p class="px-sm-5">Restrict content only to subscribers, define feature flags and limits as plan parameters. Restrictions can be applied both on the client and server with the help of JWT.
            <br><a href="https://reflowhq.com/docs/guide/subscriptions-react-integration">Client Example →</a>&nbsp; &nbsp;<a href="https://github.com/Reflow-HQ/libs/tree/master/auth/examples/express-signin">Server Example →</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="white-background pt-7 pt-lg-9">

  <div class="limiter limiter-lg px-4">

    <div class="text-center mb-7">
      <h2 class="mb-3 display-6 mb-2 pt-md-7">Ecommerce as it should be</h2>
      <p class="mb-4 limiter limiter-md text-secondary-emphasis px-md-6 fs-3">Turning your React or vanilla js project into a fully fledged<br>store is easier than ever.</p>
      <a href="/docs/" class="btn btn-success">Learn more</a>
    </div>

    <div class="row">
      <div class="col-12 col-md-6">
        <div class="d-flex p-sm-4">
          <div class="text-primary me-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-shop" viewBox="0 0 16 16">
              <path d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0zM1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5zM4 15h3v-5H4v5zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3zm3 0h-2v3h2v-3z"></path>
            </svg>
          </div>
          <div>
            <h4>Powerful ecommerce platform</h4>
            <p>With support for rich product information, customization, variants, categories, coupons and gift cards, you can handle any use case.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex p-sm-4">
          <div class="text-primary me-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"></path>
              <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
              <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
            </svg>
          </div>
          <div>
            <h4>Manage and fulfill orders</h4>
            <p>Our advanced dashboard lets you manage every part of the purchase process and order fullfilment.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex p-sm-4">
          <div class="text-primary me-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
              <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"></path>
            </svg>
          </div>
          <div>
            <h4>Streamlined Payment Processing</h4>
            <p>Effortlessly accept payments through Stripe and PayPal, ensuring smooth transactions for customers and merchants alike.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex p-sm-4">
          <div class="text-primary me-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
              <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
            </svg>
          </div>
          <div>
            <h4>Integration &amp; customization</h4>
            <p>Fetch product info from our API, integrate your backend with webhooks and even customize the emails that Reflow sends out.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="spacer mt-8"></div>
</div>


    </div>

    <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 20"></div>

    <footer class="bg-body-tertiary text-center mt-auto py-6 pt-8 pb-7">

  <div class="limiter limiter-lg">
    <div class="container text-start px-6 px-sm-1 px-5">
      <div class="row">

        <div class="col-6 mb-3 col-sm-3 mb-sm-0">
          <nav class="nav flex-column">
            <span class="py-1 fs-5 text-uppercase fw-bold">Auth</span>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/auth/">Overview</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/auth/setup/">Setup</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/auth/email-and-password/">Providers</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/auth/react-integration/">Integration</a>
          </nav>
        </div>

        <div class="col-6 mb-3 col-sm-3 mb-sm-0">
          <nav class="nav flex-column">
            <span class="py-1 fs-5 text-uppercase fw-bold">Subscriptions</span>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/subscriptions/subscriptions-how/">Overview</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/subscriptions/plans/">Plans &amp; Prices</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/subscriptions/free-trials/">Trial Periods</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/subscriptions/one-time-charges/">One-time Charges</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/subscriptions/react-integration/">Integration</a>
          </nav>
        </div>

        <div class="col-6 mb-3 col-sm-3 mb-sm-0">
          <nav class="nav flex-column">
            <span class="py-1 fs-5 text-uppercase fw-bold">Ecommerce</span>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/ecommerce/orders/">Orders</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/ecommerce/products/">Products</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/ecommerce/coupons/">Coupons</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/ecommerce/taxes/">Taxes</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/ecommerce/shipping/">Shipping</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/docs/libraries/html-toolkit-v2/">Toolkit</a>
          </nav>
        </div>

        <div class="col-6 mb-3 col-sm-3 mb-sm-0">
          <nav class="nav flex-column">
            <span class="py-1 fs-5 text-uppercase fw-bold">Reflow</span>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/contact-us#faq">FAQ</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/pricing">Pricing</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/changelog">Changelog</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/terms">Terms &amp; Conditions</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/privacy">Privacy Policy</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/gdpr">GDPR</a>
            <a target="_blank" class="nav-link py-1 fs-4 text-body text-opacity-75 text-hover-opacity-100 px-0" href="https://reflowhq.com/contact-us">Contact Us</a>
          </nav>
        </div>

        <div class="col-12">
          <p class="mt-8 text-start"><a href="https://reflowhq.com" class="logo me-5">
    <img src="https://reflowhq.com/img/logos/reflow.svg" width="40" height="40" alt="Logo">
    <span class="fw-bold ms-1 fs-2 text-body align-middle">Reflow</span>
</a>
</p>
        </div>

      </div>

    </div>

  </div>

</footer>
  </div>

  
  
  <script type="text/javascript">
    const reflowStoreId = "";
      </script>

    <script type="text/javascript" src="/js/landing-page.js?id=75587409749897d6fcbc"></script><style type="text/css" data-typed-js-css="true">
        .typed-cursor{
          opacity: 1;
        }
        .typed-cursor.typed-cursor--blink{
          animation: typedjsBlink 0.7s infinite;
          -webkit-animation: typedjsBlink 0.7s infinite;
                  animation: typedjsBlink 0.7s infinite;
        }
        @keyframes typedjsBlink{
          50% { opacity: 0.0; }
        }
        @-webkit-keyframes typedjsBlink{
          0% { opacity: 1; }
          50% { opacity: 0.0; }
          100% { opacity: 1; }
        }
      </style>
  
  


</body></html>