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>

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.

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);
});