Приклади (Hydrogen)

const CHECKOUT_URL = "https://checkout.plata-app.com";

export function plataCheckoutUrl(
  slug: string,
  cartToken: string,
  extra?: Record<string, string>
): string {
  const url = new URL(
    `/c/e/${encodeURIComponent(slug)}/${encodeURIComponent(cartToken)}`,
    CHECKOUT_URL
  );
  for (const [key, value] of Object.entries(extra ?? {})) {
    if (value) {
      url.searchParams.set(key, value);
    }
  }
  return url.toString();
}

import { redirect } from "@shopify/remix-oxygen";

const ATTRIBUTION = [
  "utm_source",
  "utm_medium",
  "utm_campaign",
  "utm_content",
  "utm_term",
] as const;

export async function action({ context, request }: ActionFunctionArgs) {
  const cart = await context.cart.get(); // ваш спосіб отримати cart
  const cartToken = cart?.id; // або token — те, що резолвить Storefront API
  const slug = context.env.PUBLIC_STORE_DOMAIN.replace(/\.myshopify\.com$/, "");

  if (!cartToken) {
    return redirect("/cart");
  }

  const incoming = new URL(request.url);
  const extra: Record<string, string> = {};
  for (const key of ATTRIBUTION) {
    const value = incoming.searchParams.get(key);
    if (value) {
      extra[key] = value;
    }
  }

  return redirect(plataCheckoutUrl(slug, cartToken, extra));
}

export function PlataCheckoutButton({
  slug,
  cartToken,
}: {
  slug: string;
  cartToken: string;
}) {
  return (
    <a className="checkout-button" href={plataCheckoutUrl(slug, cartToken)}>
      Оформити замовлення
    </a>
  );
}

function sendPlataSnapshot(slug: string, cart: {
  token: string;
  items: unknown[];
  items_subtotal_price: number;
  total_price: number;
  currency: string;
}): void {
  if (typeof navigator === "undefined" || !navigator.sendBeacon) {
    return;
  }
  const body = new Blob(
    [
      JSON.stringify({
        slug,
        cartToken: cart.token,
        items: cart.items,
        subtotal: cart.items_subtotal_price,
        total: cart.total_price,
        currency: cart.currency,
        snapshottedAt: Date.now(),
      }),
    ],
    { type: "text/plain" }
  );
  navigator.sendBeacon(`${CHECKOUT_URL}/c/e/snapshot`, body);
}