Hashry Pay Svelte component

# Svelte 5
npm install @hashrytech/pay-svelte

# The build guard (Vite or webpack)
npm install --save-dev @hashrytech/pay-build-guard

<!--
  Pay.svelte: the card form page.

  1. Ask your server for a card form (embed_url, transaction_uid, status_url, status_token).
  2. Show it with <HashryCheckout>. The page never sees card data or a key.
  3. On "completed", show progress with pollStatus (display only), then ask
     your server, which asks Hashry. Only your server's answer counts.
  4. A declined card: the frame asks for another card itself (ondeclined).
     Only when every card it allows is declined does "completed" end in
     "declined", and "Try again" starts a new attempt.
-->
<script lang="ts">
  import { onMount } from "svelte";
  import { HashryCheckout, isHashryPayError, pollStatus, type HashryPayError } from "@hashrytech/pay-svelte";

  type CheckoutSession = {
    embed_url: string;
    transaction_uid: string;
    status_url: string;
    status_token: string;
  };
  type OrderView = { id: string; status: "unpaid" | "paid" | "review"; payment_status: string | null };
  type Phase = "loading" | "card" | "checking" | "paid" | "declined" | "pending" | "review" | "error";

  let { orderId }: { orderId: string } = $props();

  let phase = $state<Phase>("loading");
  let session = $state<CheckoutSession | null>(null);
  let statusText = $state("");
  // A card is going through: no going back to the cart until it ends.
  let locked = $state(false);
  let polling: AbortController | null = null;

  const base = $derived(`/api/orders/${encodeURIComponent(orderId)}`);

  async function post<T>(path: string): Promise<T> {
    const response = await fetch(path, { method: "POST" });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return (await response.json()) as T;
  }

  // The answer that counts: your server asks Hashry (refresh).
  async function confirm() {
    const order = await post<OrderView>(`${base}/confirm`);
    if (order.status === "paid") phase = "paid";
    else if (order.status === "review") phase = "review";
    else if (order.payment_status === "requires_payment_method") phase = "declined";
    else phase = "pending";
  }

  // A first card form, a renewed one after it expired, or a new attempt after
  // a decline. Your server decides which. Calling it twice is safe.
  async function loadCardForm() {
    phase = "loading";
    try {
      const { checkout } = await post<{ checkout: CheckoutSession | null }>(`${base}/payment`);
      if (checkout) {
        session = checkout;
        phase = "card";
      } else {
        // No card form to show: paid already, or the payment is being checked.
        await confirm();
      }
    } catch {
      phase = "error";
    }
  }

  async function completed() {
    // Not proof of payment. The frame only says it reached an outcome.
    if (!session) return;
    locked = false;
    phase = "checking";
    const controller = new AbortController();
    polling = controller;
    try {
      // Display only. The status token reads this payment's status and nothing else.
      await pollStatus({
        statusUrl: session.status_url,
        statusToken: session.status_token,
        signal: controller.signal,
        timeoutMs: 60_000,
        onUpdate: (status) => (statusText = status.status),
      });
    } catch (error) {
      if (isHashryPayError(error) && error.code === "aborted") return;
      // Polling is only a nicety. Ask your server either way.
    }
    try {
      await confirm();
    } catch {
      phase = "error";
    }
  }

  function failed(error: HashryPayError) {
    // error.code is safe to log. The message never holds the embed_url or a token.
    console.error("Card form error:", error.code);
    phase = "error";
  }

  onMount(() => {
    void loadCardForm();
    return () => polling?.abort();
  });
</script>

{#if !locked}
  <a href="/cart">Back to cart</a>
{/if}

{#if phase === "loading"}
  <p>Loading the card form…</p>
{:else if phase === "checking"}
  <p>Checking your payment{statusText ? ` (${statusText})` : ""}…</p>
{/if}

{#if session && (phase === "card" || phase === "checking")}
  <!-- Svelte callback props are lowercase. ondeclined: the frame shows the card
       form again by itself, so there is nothing to ask your server. -->
  <HashryCheckout
    embedUrl={session.embed_url}
    transactionUid={session.transaction_uid}
    onprocessing={() => (locked = true)}
    ondeclined={() => (locked = false)}
    onpaused={() => (locked = false)}
    oncompleted={completed}
    onexpired={() => void loadCardForm()}
    onerror={failed}
  />
{/if}

{#if phase === "paid"}
  <p>Payment received. Thank you!</p>
{:else if phase === "pending"}
  <p>Your payment is still being processed. Check your order soon.</p>
{:else if phase === "review"}
  <p>We are checking your payment. We will email you.</p>
{:else if phase === "declined"}
  <p>Every card was declined. Nothing was charged.</p>
  <button onclick={() => void loadCardForm()}>Try again</button>
{:else if phase === "error"}
  <p>Something went wrong. Try again.</p>
  <button onclick={() => void loadCardForm()}>Try again</button>
{/if}

// src/main.ts: shows the pay page for /orders/<id>/pay.
import { mount } from "svelte";
import Pay from "./Pay.svelte";

// /orders/<id>/pay gives <id>. If your app has a router, use it instead.
const orderId = decodeURIComponent(location.pathname.split("/")[2] ?? "");

mount(Pay, { target: document.getElementById("app")!, props: { orderId } });