Repejo JavaScript API

Med Repejos JavaScript API kan ni bygga egna knappar och flöden för gåvor. API:et bygger på en checkout short code och fungerar direkt i webbläsaren.

Sidan har två delar: API-referens beskriver metoderna och deras typer, och Guider visar kompletta exempel för de vanligaste användningsfallen.

API-referens

window.Repejo.createSession

Skapar en wallet-session för engångsgåvor med Apple Pay eller Google Pay. Det går bara att använda med en engångscheckout som har Apple Pay och Google Pay aktiverat. 

window.Repejo.createSession(
  checkout_short_code: string,
  host?: string // standard "https://app.repejo.se"
): Promise<RepejoSession>;

Returnerar en RepejoSession med metoderna on och initiateOneTimeDonation.

session.initiateOneTimeDonation

Öppnar betalrutan (Apple Pay/Google Pay) för en engångsgåva. 

session.initiateOneTimeDonation(
  options: InitiateOneTimeDonationOptions
): Promise<InitiateOneTimeDonationResult>;
type RepejoPaymentMethod = "apple_pay" | "google_pay";

// Alla fält är valfria. Utelämnade eller tomma fält skickas inte.
type RepejoPayerDetails = {
  name?: string;
  phone_number?: string;
  email?: string;
};

type InitiateOneTimeDonationOptions = {
  // Belopp i ore (minsta valutanheten), t.ex. 1000 = 10 SEK
  amount: number;
  label: string;
  currency: "sek";
  country: "SE";
  payment_method: RepejoPaymentMethod;
  payer?: RepejoPayerDetails;
};
type OneTimeDonation = {
  amount: number;
  currency: string;
  country: string;
};

// errors mappar fältnamn ("name" | "phone_number" | "email") till ett
// lokaliserat meddelande. Betalrutan öppnas i klicket och stängs
// igen när detta returneras; ingenting har debiterats.
type RepejoValidationError = {
  type: "validation_error";
  errors: Record<string, string>;
};

type InitiateOneTimeDonationResult =
  | "cancelled"
  | Error
  | OneTimeDonation
  | RepejoValidationError;

window.Repejo.presentCheckoutModal

Öppnar en checkout i samma modal som <repejo-checkout-button> använder, men styrs programmatiskt så att ni kan koppla den till era egna knappar. Modalen sätter URL-parametern rp_modal när den öppnas och tar bort den när den stängs. 

window.Repejo.presentCheckoutModal(
  short_code: string,
  options?: PresentCheckoutModalOptions
): Promise<void>;
type PresentCheckoutModalOptions = {
  // Repejo-host; ange "https://test.repejo.se" vid test.
  host?: string;
  // Publik metadata (motsvarar knappens metadata-*-attribut).
  publicMetadata?: Record<string, string>;
  // Motsvarar knappens user-has-consented-to-marketing-cookies-attribut.
  userHasConsentedToMarketingCookies?: boolean;
};

Promisen resolver när modalen öppnats, eller direkt om en modal som öppnats på det här sättet redan är öppen. Den rejektas om checkouten inte kan laddas (t.ex. ett ogiltigt short code) — fånga felet för att visa ett felmeddelande istället för att knappen tyst gör ingenting. Ingen modal monteras i så fall.

Guider

Öppna checkout i en modal med egen knapp

Använd presentCheckoutModal när ni vill ha full kontroll över knappens utseende men ändå visa checkouten i Repejos modal: 

<button id="donate_button">Donera</button>
<script src="https://app.repejo.se/assets/repejo.js"></script>
<script>
  document.getElementById("donate_button").addEventListener("click", () => {
    window.Repejo.presentCheckoutModal("DIN_SHORT_CODE", {
      publicMetadata: { member_id: "42" }
    }).catch((error) => {
      console.error("Kunde inte öppna checkout", error);
    });
  });
</script>

Samma modal går att öppna utan JavaScript, med en länk till ?rp_modal=DIN_SHORT_CODE eller attributet data-repejo-checkout på er egen knapp. Med attributen kan ni också välja belopp och referens i förväg. Se Egen knapp eller länk .

Engångsgåva med Apple Pay/Google Pay

Obs: Det går bara att använda API:et med en engångscheckout som har Apple Pay och Google Pay aktiverat.

  1. Lägg till skriptet för Repejo SDK.
  2. Skapa en session med er checkout_short_code.
  3. Lyssna på paymentMethods och aktivera eller visa/göm knapparna för respektive betalmetod.
  4. Skicka en donation med initiateOneTimeDonation. 
<button id="donate_apple_pay_button">Donera 100 kr med Apple Pay</button>
<button id="donate_google_pay_button">Donera 100 kr med Google Pay</button>
<script src="https://app.repejo.se/assets/repejo.js"></script>
<script>
  (async () => {
    const session = await window.Repejo.createSession("DIN_SHORT_CODE");
    const donateApplePayButton = document.getElementById("donate_apple_pay_button");
    const donateGooglePayButton = document.getElementById("donate_google_pay_button");

    session.on("paymentMethods", (methods) => {
      const paymentMethods = Array.isArray(methods) ? methods : [];
      donateApplePayButton.disabled = !paymentMethods.includes("apple_pay");
      donateGooglePayButton.disabled = !paymentMethods.includes("google_pay");
    });

    async function donate(method) {
      const result = await session.initiateOneTimeDonation({
        amount: 10000,
        label: "Donation 100 SEK",
        currency: "sek",
        country: "SE",
        payment_method: method
      });
      console.log(result);
    }

    donateApplePayButton.addEventListener("click", () => donate("apple_pay"));
    donateGooglePayButton.addEventListener("click", () => donate("google_pay"));
  })();
</script>

Lägg till kontaktuppgifter för givaren

Skicka med ett valfritt payer-objekt till initiateOneTimeDonation för att koppla namn, telefonnummer och e-post till gåvan. Uppgifterna knyts till givarposten så att handläggare kan identifiera och kontakta givaren i efterhand.

  • Alla tre fälten (name, phone_number, email) är valfria.
  • Fält som utelämnas eller skickas tomma ignoreras — de skrivs inte över befintliga uppgifter.
  • Samla in värdena i ert eget formulär och läs av dem när givaren klickar på betalknappen.

Exemplet nedan är komplett och kan kopieras rakt av — det definierar både fälten och avläsningen: 

<input id="payer_name" placeholder="Namn" />
<input id="payer_phone" placeholder="Mobilnummer" />
<input id="payer_email" type="email" placeholder="E-postadress" />
<div id="payer_errors"></div>
<button id="donate_button" disabled>Donera 100 kr</button>
<script src="https://app.repejo.se/assets/repejo.js"></script>
<script>
  (async () => {
    const session = await window.Repejo.createSession("DIN_SHORT_CODE");
    const button = document.getElementById("donate_button");
    const errors = document.getElementById("payer_errors");

    session.on("paymentMethods", (methods) => {
      const list = Array.isArray(methods) ? methods : [];
      button.disabled = !list.includes("apple_pay");
    });

    button.addEventListener("click", async () => {
      const result = await session.initiateOneTimeDonation({
        amount: 10000,
        label: "Donation 100 SEK",
        currency: "sek",
        country: "SE",
        payment_method: "apple_pay",
        payer: {
          name: document.getElementById("payer_name").value,
          phone_number: document.getElementById("payer_phone").value,
          email: document.getElementById("payer_email").value
        }
      });

      if (result && result.type === "validation_error") {
        errors.textContent = Object.values(result.errors).join(" · ");
      }
    });
  })();
</script>

Ogiltiga uppgifter returneras som ett validation_error och betalrutan stängs utan debitering (se Felhantering). För telefonnummer gäller formaten som beskrivs under Telefonnummerformat.

Felhantering

initiateOneTimeDonation kan returnera ett validation_error där errors mappar fältnamn (name, phone_number, email) till ett lokaliserat felmeddelande. Betalrutan öppnas direkt i klicket (Apple Pay kräver det) och stängs igen när valideringen misslyckas — ingenting debiteras. Visa meddelandena för givaren och låt dem rätta uppgifterna.

Anropa initiateOneTimeDonation direkt i klick-hanteraren, utan await, anrop till er backend eller annan asynkron kod före anropet. Safari tillåter bara att Apple Pay-rutan öppnas medan klickets användaraktivering lever; annars ges felet The code that shows the Apple Pay payment sheet must be invoked directly by a user activation event. Samla in belopp och givaruppgifter i förväg och skicka med dem i anropet.

  • "cancelled" — givaren stängde Apple Pay-/Google Pay-rutan.
  • Error — ett generellt fel eller ett betalfel från Stripe.
  • RepejoValidationError — ogiltiga givaruppgifter (se ovan).
  • OneTimeDonation — gåvan genomfördes.

Telefonnummerformat

Telefonnummer tolkas som svenska som standard. Dessa format accepteras: 0701234567, +46701234567 och 46701234567. Nummer från andra länder måste innehålla landskod. Numret måste vara ett mobilnummer — fasta nummer avvisas. Ogiltiga nummer ger ett validation_error med errors.phone_number.

E-postadressen trimmas på blanksteg. Fritextfält (namn och e-post) får vara högst 500 tecken.

Testmiljö och host

Vid testning kan ni använda Repejos testmiljö som host, dvs. https://test.repejo.se. 

const session = await window.Repejo.createSession(
  "DIN_SHORT_CODE",
  "https://test.repejo.se"
);