Webbkomponent

P2P-komponenter

Repejos P2P-komponenter kan användas både i inbäddad miljö och i Repejos hostade vyer. Lägg till checkout-scriptet och rendera komponenterna med organisationens id.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
          data-organisation-id="org_xxxxxxxxxxxxxxxxxxxxxx"
          data-host="https://app.repejo.se"
        ></script>

        <repejo-p2p-create-button
          organisation_id="org_xxxxxxxxxxxxxxxxxxxxxx"
          host="https://app.repejo.se"
          label="Starta insamling"
        ></repejo-p2p-create-button>

        <repejo-p2p-list
          organisation_id="org_xxxxxxxxxxxxxxxxxxxxxx"
          host="https://app.repejo.se"
        ></repejo-p2p-list>

        <repejo-p2p-leaderboard
          organisation_id="org_xxxxxxxxxxxxxxxxxxxxxx"
          host="https://app.repejo.se"
        ></repejo-p2p-leaderboard>

        <repejo-p2p-checkout
          slug="abcde"
          host="https://app.repejo.se"
        ></repejo-p2p-checkout>
      

Streamöverlägg (gåvokort)

repejo-donation-card visar varje ny gåva som ett kort, tänkt för en livesändning. Peka en webbläsarkälla i OBS på en sida med kodavsnittet nedan och sätt källans bakgrund till genomskinlig.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-donation-card
          short-code="abcde"
          host="https://app.repejo.se"
          locale="sv"
          duration="8000"
          background-color="#111111"
          text-color="#ffffff"
          show-icon
        ></repejo-donation-card>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• duration — antal millisekunder varje kort visas. Standard 8000.
• locale — sv, en, de eller fi. Standard sv.
• background-color — valfri CSS-färg. Genväg för --donation-card-background.
• text-color — valfri CSS-färg. Färgar texten och den valfria ikonen. Genväg för --donation-card-color.
• show-icon — boolean-attribut. Lägger till en liten ikon före texten: ett paket för engångsgåvor, ett hjärta för månadsgåvor.

För finare kontroll finns fler CSS-variabler på elementet: --donation-card-font och --donation-card-font-size.

Insamlingsmål (egen widget)

repejo-donation-goal visar checkoutens insamlingsmål som en stapel med insamlat belopp och procenten på en rad under, plus ett streck för varje synligt delmål på stapeln. Widgeten uppdateras automatiskt när gåvor kommer in — samma live-data som Live-fliken i backoffice läser, paketerad som ett fristående element som du kan bädda in separat från gåvokortet. Widgeten skriver inte ut någon egen rubrik; presentera den så som du vill på sidan.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-donation-goal
          short-code="abcde"
          host="https://app.repejo.se"
          locale="sv"
          primary-color="#4f46e5"
          border-radius="0.75rem"
        ></repejo-donation-goal>
      

Omfatta ett enskilt lag — till exempel för att ge varje lag sin egen stapel på sin sida:

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-donation-goal
          short-code="abcde"
          host="https://app.repejo.se"
          team-id="ftm_…"
          locale="sv"
        ></repejo-donation-goal>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• locale — sv, en, de eller fi. Standard sv.
• primary-color — valfri CSS-färg. Fyller stapeln och färgar strecken för delmål. Genväg för --donation-goal-bar-color.
• border-radius — valfri CSS-längd. Rundar den yttre behållaren. Genväg för --donation-goal-border-radius.
• team-id — ett insamlingsteams ftm_…-id. Stapeln spårar lagets insamlade belopp och mål i stället för checkoutens total. Lagets eget mål används först; fallbacken är checkoutens mål när laget saknar ett eget. Strecken för delmål döljs och stretchmålen tillämpas inte i teamläge — de gäller på checkoutnivå och hade fått fel nämnare. Ett id som inte matchar något lag (ett stavfel, eller ett lag som inte är kopplat till checkouten) faller tyst tillbaka till checkoutens total.

För finare kontroll finns fler CSS-variabler på elementet: --donation-goal-background, --donation-goal-color, --donation-goal-font, --donation-goal-font-size, --donation-goal-bar-background, --donation-goal-bar-height, --donation-goal-tick-color, --donation-goal-tick-width och --donation-goal-padding.

Rullande donationslista

repejo-donation-list visar de tre senaste gåvorna staplade. Nyaste ligger nederst; när en ny gåva kommer in glider den in nerifrån och den äldsta försvinner uppifrån. Läser samma latest_donations som repejo-donation-card, så båda synkas automatiskt. Renderar ingenting förrän minst en gåva har kommit in.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-donation-list
          short-code="abcde"
          host="https://app.repejo.se"
          background-color="#ffffff"
          text-color="#18181b"
          accent-color="#5b21b6"
          show-icon
        ></repejo-donation-list>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• background-color — valfri CSS-färg. Genväg för --repejo-donation-list-background.
• text-color — valfri CSS-färg. Genväg för --repejo-donation-list-color.
• accent-color — valfri CSS-färg för ikon och belopp. Genväg för --repejo-donation-list-accent-color.
• show-icon — boolean-attribut. Visar en gåva- (engångs) / hjärta- (månad) ikon per rad.

Donationsticker

repejo-donation-ticker är en kant-i-kant bar som rullar de senaste gåvorna från höger till vänster kontinuerligt, med en punkt-separator mellan raderna. Placera i toppen eller botten av din sida eller stream-overlay. Håll muspekaren över för att pausa; respekterar prefers-reduced-motion (fryser istället för att animera).

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-donation-ticker
          short-code="abcde"
          host="https://app.repejo.se"
          background-color="#18181b"
          text-color="#ffffff"
          accent-color="#a78bfa"
          duration="40"
        ></repejo-donation-ticker>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• duration — sekunder per varv. Högre = långsammare. Standard 40. Minst 5.
• background-color — valfri CSS-färg. Genväg för --repejo-donation-ticker-background.
• text-color — valfri CSS-färg. Genväg för --repejo-donation-ticker-color.
• accent-color — färg på belopp + separator-punkt. Genväg för --repejo-donation-ticker-accent-color.

Topplista (widget)

repejo-leaderboard visar en live-topplista för en checkout i en av tre varianter, valt via mode: teams (topplista över lagen efter insamlat belopp), onetime (de största engångsgåvorna) eller recurring (de största månadsgåvorna). Visuellt tvilling till repejo-p2p-leaderboard och repejo-team-leaderboard.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-leaderboard
          short-code="abcde"
          host="https://app.repejo.se"
          mode="onetime"
          limit="5"
          background-color="#ffffff"
          text-color="#18181b"
        ></repejo-leaderboard>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• mode — onetime (standard), recurring eller teams. Läget för lag kräver att checkouten är konfigurerad för lag.
• limit — antal rader att visa. Klämmas till 1..10. Standard 5.
• background-color — valfri CSS-färg. Genväg för --repejo-leaderboard-background.
• text-color — valfri CSS-färg. Genväg för --repejo-leaderboard-color.

Matchande donationer (widgets)

Två widgets för att visa en aktiv sponsor-matchning — ett företag som matchar gåvor upp till ett tak. repejo-matching-donation-card renderar det som ett kort; repejo-matching-donation-row renderar det som en tunn horisontell rad, tänkt som topp- eller bottenrad i en OBS-scen. Båda visar samma data — logga, företagsnamn, matchningstak och en progressbar som fylls när nya gåvor kommer in.

Båda widgeten renderar ingenting när ingen matchning är aktiv på checkouten, så en sida som embed:ar widgeten hålls ren mellan sponsorer. Aktivera en matchning från checkoutens Live-flik i back office; bara en matchning kan vara aktiv åt gången.

Det matchade beloppet räknas också in i checkoutens insamlingsmål: medan en matchning är aktiv rör sig målstapeln (i själva checkouten och i repejo-donation-goal) med gåvan plus sponsorns matchning, upp till taket. Det en sponsor matchat ligger kvar i målet efter att matchningen avaktiverats. Widgets som visar enskilda gåvor (flöde, ticker, topplista, största gåva) visar fortfarande bara givarnas pengar.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-matching-donation-card
          short-code="abcde"
          host="https://app.repejo.se"
          background-color="#ffffff"
          text-color="#18181b"
          progress-color="#5b21b6"
        ></repejo-matching-donation-card>

        <repejo-matching-donation-row
          short-code="abcde"
          host="https://app.repejo.se"
          background-color="#ffffff"
          text-color="#18181b"
          progress-color="#5b21b6"
        ></repejo-matching-donation-row>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• background-color — valfri CSS-färg. Genväg för --repejo-matching-donation-background.
• text-color — valfri CSS-färg. Genväg för --repejo-matching-donation-color.
• progress-color — valfri CSS-färg. Genväg för --repejo-matching-donation-progress-color.

Toppgåva (widget)

repejo-top-donation är ett kompakt highlight-kort som visar den största enskilda gåvan på checkouten — rubrik + stort belopp + givarens namn. Läser samma live-data som topplistan så den synkas automatiskt. Renderar ingenting när checkouten inte har några gåvor än.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-top-donation
          short-code="abcde"
          host="https://app.repejo.se"
          background-color="#ffffff"
          text-color="#18181b"
          accent-color="#5b21b6"
        ></repejo-top-donation>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• background-color — valfri CSS-färg. Genväg för --repejo-top-donation-background.
• text-color — valfri CSS-färg. Genväg för --repejo-top-donation-color.
• accent-color — valfri CSS-färg för det stora beloppet. Genväg för --repejo-top-donation-accent-color.

Live-produkter (gåvoshop)

repejo-live-products renderar checkoutens Live-shop som ett grid av förvalda gåvoprodukter (namn, belopp, valfri bild, beskrivning, engångs- eller månadsgåva). Klick på ett kort öppnar <repejo-checkout> i en modal med produktsammanfattningen fäst ovanför den vanliga checkouten — så givaren ser vad de valt innan de fyller i betalningsuppgifter.

Live-produkter är per-checkout och visas aldrig i organisationens vanliga produktlista. Hantera dem från checkoutens Live-flik → Produkter-panelen i back office.

        <script
          defer
          type="text/javascript"
          src="https://app.repejo.se/assets/checkout.js"
        ></script>

        <repejo-live-products
          short-code="abcde"
          host="https://app.repejo.se"
          background-color="transparent"
          text-color="#18181b"
          accent-color="#5b21b6"
        ></repejo-live-products>
      

• short-code — checkoutens kortkod (obligatorisk).
• host — din Repejo-host. Standard https://app.repejo.se.
• background-color — bakgrund på gridet. Genväg för --repejo-live-products-background.
• text-color — textfärg på produktkorten. Genväg för --repejo-live-products-color.
• accent-color — färg på belopp och Köp-knapp. Genväg för --repejo-live-products-accent-color.

Anpassa stil med CSS-variabler

Typografi och typsnitt

Du kan anpassa typografin genom att definiera typsnitt och vikter för olika textstorlekar.

<style>
        repejo-checkout {
          --font-weight-xl: 400;
          --font-weight-lg: 500;
          --font-weight-base: 400;
          --font-sans: Roboto, sans-serif;
        }
      </style>

Tillgängliga typografivariabler

Bakgrund, ram & skugga på behållaren

Checkouten renderas i ett kort med egen bakgrund, ram och skugga. På en sida med färgad bakgrund kan detta ge ett oönskat "kort-i-kort"-utseende. Till skillnad från typografivariablerna ovan styrs behållarens färger av checkoutens branding (konfigureras i back office), inte av CSS-variabler på värdsidan: branding skriver värdet direkt på komponenten, vilket åsidosätter en variabel som ärvts från din sida. Att sätta --color-checkout-background på repejo-checkout från din sida har ingen effekt — branding vinner.

Events

Tillgängliga events

Exempel: repejo:completed

Det vanligaste användningsfallet är att lyssna på repejo:completed eventet för att utföra anpassade åtgärder när en givare slutfört sin donation, som att omdirigera till en tack-sida.

type RepejoCompletedEventDetail = {
  checkout_short_code: string;
  type: "recurring" | "onetime";
  payer: {
    name: string | null;
    phone_number: string | null;
    email: string | null;
  };
};

document.addEventListener("repejo:completed", (event) => {
  const detail = (event as CustomEvent<RepejoCompletedEventDetail>).detail;
  console.log(detail.type, detail.payer);
});

TypeScript- & React-typer

En deklarationsfil publiceras bredvid skript-bundlen på https://app.repejo.se/assets/repejo-checkout.d.ts (använd den host du integrerar mot). Den typar document.createElement("repejo-checkout"), elementets egenskaper och repejo:*-eventen. Kopiera in den i ditt projekt (eller referera till den) — inget @types-paket behövs.

Den utökar även JSX, så <repejo-checkout> blir typad i React. På React 19 (som läser JSX-typer från React.JSX) lägg till elementet där:

// repejo-checkout.d.ts (kopierad från URL:en ovan) deklarerar elementet.
// För React 19, peka JSX mot det:
declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "repejo-checkout": RepejoCheckoutAttributes;
    }
  }
}

// Sedan i din komponent:
<repejo-checkout short_code="aunt123" session-token={token} host="https://app.repejo.se" />