Repejo JavaScript API

Med Repejos JavaScript API kan ni bygga egna knappar och flöden för engångsgåvor och ändå använda Apple Pay eller Google Pay. API:et bygger på en checkout short code och fungerar direkt i webbläsaren.

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

Snabbstart

  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>

Typer

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. När detta returneras har betalrutan aldrig
// öppnats och ingenting har debiterats.
type RepejoValidationError = {
  type: "validation_error";
  errors: Record<string, string>;
};

type InitiateOneTimeDonationResult =
  | "cancelled"
  | Error
  | OneTimeDonation
  | RepejoValidationError;
initiateOneTimeDonation(
  options: InitiateOneTimeDonationOptions
): Promise<InitiateOneTimeDonationResult>;

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 utan att betalrutan öppnas (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. När detta returneras har betalrutan aldrig öppnats och ingenting har debiterats — visa meddelandena för givaren och låt dem rätta uppgifterna.

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