Repejo

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>

Tips: `repejo-p2p-create-button` guidar creator genom flödet skapa utkast → verifiera magic link → publicera. `repejo-p2p-list` och `repejo-p2p-leaderboard` uppdaterar automatiskt när nya kampanjer skapas eller publiceras.

Anpassa stil med CSS-variabler

Typografi och typsnitt

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

Exempel: Anpassa typsnitt

Här är ett exempel på hur du kan använda egna typsnitt:

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

Tillgängliga typografivariabler

Variabel	Beskrivning
`--text-xl`	Textstorlek för stora rubriker (24px)
`--font-family-xl`	Typsnitt för stora rubriker
`--font-weight-xl`	Fontvikt för stora rubriker (standard: 600)
`--text-lg`	Textstorlek för underrubriker (18px)
`--font-family-lg`	Typsnitt för underrubriker
`--font-weight-lg`	Fontvikt för underrubriker (standard: 500)
`--text-base`	Textstorlek för brödtext (16px)
`--font-family-base`	Typsnitt för brödtext
`--font-weight-base`	Fontvikt för brödtext (standard: 400)
`--text-sm`	Textstorlek för liten text (14px)
`--font-family-sm`	Typsnitt för liten text
`--font-weight-sm`	Fontvikt för liten text (standard: 600)
`--text-xs`	Textstorlek för extra liten text (12px)
`--font-sans`	Bas-typsnitt som används som fallback

💡 Tips

Om du använder ett typsnitt som inte är webbtypsnitt, se till att det är inläst innan webbkomponenten laddas. Du kan använda @font-face eller länka till Google Fonts i din HTML.

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.

Branding-inställning	Effekt
Checkoutens bakgrundsfärg	Kortets bakgrund. Sätt den till sidans färg (eller transparent) för att ta bort kort-i-kort-utseendet.
Ramfärg / rambredd	Kortets ram. Sätt bredden till 0 för att ta bort ramen.
Dölj skugga	Slå på för att ta bort skuggan runt kortet.

För att smälta in checkouten på en färgad sida: sätt checkoutens bakgrundsfärg så att den matchar din sida (eller transparent) och slå på "dölj skugga" i checkoutens branding. De CSS-variabler som går att åsidosätta från värdsidan är typografivariablerna ovan.

Events

Tillgängliga events

Event	Beskrivning
`repejo:first-interaction`	Skickas när givaren gör sitt första klick inuti komponenten
`repejo:registered`	Skickas när givaren har klickat på "Bli givare"-knappen
`repejo:completed`	Skickas när gåvan eller signeringen är slutförd

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.

Grundläggande användning

Lägg till en event listener på ditt dokument för att fånga upp repejo:completed eventet:

Typning

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" />

Webbkomponent