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. 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>

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