Publier sur Hostinger & activer les paiements

Partie A — Envoyer ton site sur Hostinger

1. Prérequis

• Un compte Hostinger avec un hébergement web actif.
• Le nom de domaine residencevalue.com relié à cet hébergement (acheté chez Hostinger ou ailleurs — voir plus bas).

2. Fichiers à uploader

Depuis ton dossier de projet sur l’ordinateur, envoie tout le contenu utile du site, par exemple :

Les fichiers .css (styles.css) restent à part : c’est normal pour la mise en forme.

3. Où les placer sur Hostinger (hPanel)

1. Connecte-toi à hpanel.hostinger.com.
2. Ouvre Fichiers → Gestionnaire de fichiers.
3. Va dans public_html (racine du site pour le domaine principal).
4. Téléverse les fichiers HTML, styles.css, etc. Si Hostinger affiche déjà un index.html par défaut, tu peux le remplacer par le tien.
5. Vérifie au minimum : public_html/index.html, public_html/checkout.html, public_html/styles.css, etc.

Alternative : FTP — Dans hPanel, cherche Comptes FTP, puis avec FileZilla ou Cyberduck envoie les mêmes fichiers dans public_html.

4. Domaine et HTTPS

• Si le domaine est chez Hostinger, teste https://residencevalue.com.
• Si le domaine est ailleurs, suis l’assistant Hostinger (Domaines) : nameservers ou enregistrements DNS (A / CNAME) indiqués par hPanel.
• Active le SSL : hPanel → Sécurité → SSL → Let’s Encrypt pour residencevalue.com et www si besoin.

5. Vérification rapide

• Ouvre https://residencevalue.com — la page d’accueil doit s’afficher.
• Ouvre https://residencevalue.com/checkout.html — la page de choix de forfait doit s’afficher.

Partie B — Activer les moyens de paiement (Stripe)

Le site redirige vers Stripe : le client paie sur une page hébergée par Stripe (carte). L’argent arrive sur ton compte Stripe, puis sur ton compte bancaire.

PayPal n’est pas dans le code pour l’instant ; tu pourras l’ajouter plus tard.

1. Créer un compte Stripe (Canada)

1. Va sur stripe.com et crée un compte.
2. Indique le Canada, devise CAD.
3. Complète la vérification d’identité et ajoute ton compte bancaire pour les virements.

2. Créer les produits / prix (abonnements mensuels)

Dans le tableau de bord Stripe : Produits → Ajouter un produit. Crée trois offres récurrentes :

• Basic — 19,99 $ CAD / mois
• Pro — 54,99 $ CAD / mois
• Premium — 94,99 $ CAD / mois

3. Créer un lien de paiement pour chaque forfait

Pour chaque prix : crée un lien de paiement (Payment Link) et copie l’URL (souvent du type https://buy.stripe.com/...). Tu dois obtenir trois URL.

4. Coller les liens dans ton site (Hostinger)

Ouvre le fichier checkout.html, tout en bas : dans le premier <script>, remplis l’objet stripePaymentLinks :

window.RESIDENCEVALUE_CONFIG = {
  stripePaymentLinks: {
    basic: "https://buy.stripe.com/xxxxxxxxxxxxx",
    pro: "https://buy.stripe.com/yyyyyyyyyyyyy",
    premium: "https://buy.stripe.com/zzzzzzzzzzzzz",
  },
};

Enregistre, puis upload à nouveau checkout.html dans public_html/ sur Hostinger.

5. Passer en mode réel (pour accepter de vrais paiements)

1. Complète l’activation de ton compte Stripe (identité, compte bancaire).
2. En haut du tableau de bord Stripe, désactive le mode Test (bascule « Test » → « Live »).
3. Crée de nouveaux liens de paiement en mode Live (les liens test_xxx ne fonctionnent qu’en test). Produits → chaque prix → Créer un lien de paiement.
4. Remplace les URLs dans stripePaymentLinks (checkout.html) par ces nouveaux liens, puis réenvoie le fichier sur Hostinger.

6. Envoyer un email de confirmation / facture après l’achat

Stripe peut envoyer automatiquement un reçu par courriel après chaque paiement réussi :

1. Stripe Dashboard → Settings (⚙️) → Emails.
2. Active « Successful payments » (ou « Paiements réussis »).
3. Le client reçoit un email avec le montant, la date et un lien vers le reçu détaillé.

Pour les abonnements, Stripe envoie déjà des factures automatiquement. Tu peux personnaliser le logo et les couleurs dans Settings → Branding.

7. Nom sur le relevé bancaire

Dans Stripe, configure le nom de l’entreprise / descripteur de relevé (ex. ResidenceValue ou residencevalue.com).

8. Webhook pour activer l'abonnement

Pour que les utilisateurs accèdent aux estimations après paiement, crée un webhook Stripe (Développeurs → Webhooks) qui écoute checkout.session.completed. L'endpoint doit mettre à jour profiles.subscription_plan (basic, pro ou premium) selon le client_reference_id = user_id. Ajoute client_reference_id dans tes liens Stripe.

Partie C — Comptes (Supabase)

Crée un projet sur supabase.com. Dans SQL Editor, exécute :

create table reports (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  address text, province text,
  form_data jsonb, estimation jsonb, rooms jsonb,
  created_at timestamptz default now()
);
alter table reports enable row level security;
create policy "view_own" on reports for select using (auth.uid() = user_id);
create policy "insert_own" on reports for insert with check (auth.uid() = user_id);
create policy "delete_own" on reports for delete using (auth.uid() = user_id);

-- Magasin (annonces publiées) et messagerie
create table listings (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  report_id uuid references reports(id) on delete cascade,
  address text not null, region text, country text, province text,
  price_est numeric, price_asked numeric, description text,
  form_data jsonb, estimation jsonb,
  created_at timestamptz default now()
);
alter table listings enable row level security;
create policy "listings_select" on listings for select using (true);
create policy "listings_insert" on listings for insert with check (auth.uid() = user_id);
create policy "listings_update" on listings for update using (auth.uid() = user_id);
create policy "listings_delete" on listings for delete using (auth.uid() = user_id);

create table messages (
  id uuid default gen_random_uuid() primary key,
  listing_id uuid references listings(id) on delete cascade not null,
  sender_id uuid references auth.users(id) on delete cascade not null,
  recipient_id uuid references auth.users(id) on delete cascade not null,
  content text not null,
  read_at timestamptz,
  created_at timestamptz default now()
);
alter table messages enable row level security;
create policy "msg_select" on messages for select using (auth.uid() = sender_id or auth.uid() = recipient_id);
create policy "msg_insert" on messages for insert with check (auth.uid() = sender_id);
create policy "msg_update" on messages for update using (auth.uid() = recipient_id);

-- Profils utilisateur (photo, description)
create table profiles (
  id uuid primary key references auth.users(id) on delete cascade,
  display_name text,
  description text,
  avatar_url text,
  subscription_plan text,
  updated_at timestamptz default now()
);
alter table profiles enable row level security;
create policy "profiles_select" on profiles for select using (true);
create policy "profiles_insert" on profiles for insert with check (auth.uid() = id);
create policy "profiles_update" on profiles for update using (auth.uid() = id);

Stockage (photo de profil) : dans Supabase, va dans Storage → crée un bucket avatars (public). Dans Policies du bucket, ajoute : INSERT et UPDATE pour les utilisateurs authentifiés (auth.uid()), sur le chemin {user_id}/*.

Bucket photos du plan : crée un bucket floor_plans (public). Policies : INSERT et SELECT pour les utilisateurs authentifiés sur {user_id}/*.

Abonnement requis : exécute cette requête pour ajouter le champ abonnement aux profils : alter table profiles add column if not exists subscription_plan text; (valeurs : basic, pro, premium). Un webhook Stripe (voir ci-dessous) met à jour ce champ quand un paiement est validé.

Puis remplace SUPABASE_URL et SUPABASE_ANON_KEY dans connexion.html, compte.html, index.html, magasin.html et messages.html (Paramètres → API dans Supabase).

4. Emails de confirmation

Authentication → URL Configuration : mets Site URL à https://residencevalue.com (et non localhost). Dans Redirect URLs, ajoute https://residencevalue.com/**.