Den klassiska widgeten.
Klassiska widgeten lägger Octany-kassan på vilken HTML-sida som helst. Du lägger in ett <octany-widget>-element, laddar checkout.js från ditt Octany-konto, så sköter Octany resten av betalflödet.
§ 01.1 Vad du bäddar in #
Integrationen använder ett enda hostat checkout.js-skript som serveras från ditt Octany-konto på {octany-url}/js/checkout.js. Skriptet registrerar custom-elementet och öppnar kassan när besökaren interagerar.
<octany-widget>är ingången du lägger in på sidan.- Octany renderar kassan och håller all betalhantering inom Octany.
Kommunikationen sker via webbläsarens postMessage-event, så kassan kan öppnas, ändra storlek, redirecta och återhämta sig trots de vanligaste integritetsbegränsningarna i moderna webbläsare.
§ 01.2 Installera #
Två taggar. Ordningen spelar roll — skriptet måste finnas på sidan innan elementet renderar.
<!DOCTYPE html> <html> <head> <!-- Stylesheeten exponerar kontots tema-tokens --> <link rel="stylesheet" href="https://app.octany.com/100/checkout/appearance"> </head> <body> <!-- Sätt elementet där du vill ha en "Prenumerera"-CTA --> <octany-widget url="https://app.octany.com" account-id="100" product-id="4662" success-url="https://example.se?success" abort-url="https://example.se?abort" type="iframe" ></octany-widget> <!-- Bundle:n injicerar modal-iframen och registrerar elementet --> <script src="https://app.octany.com/js/checkout.js"></script> </body> </html>
url-attributet är din Octany-host. account-id är det numeriska konto-ID som klassiska integrationen använder. appearance-stylesheeten exponerar kontots varumärkesfärger som CSS-variabler på värdsidan.
§ 01.3 Element-attribut #
| Attribut | Krävs | Anteckningar |
|---|---|---|
| url | ja | Octany-host, t.ex. https://app.octany.com. |
| account-id | ja | Numeriskt konto-ID. |
| product-id | ja | Ett ID, eller pipe-separerat för flikbaserad multi-produkt (4662|4663). |
| type | ja | iframe (renderar på plats) eller button (CTA som öppnar modalen). |
| success-url | Redirect efter lyckad betalning. | |
| abort-url | Redirect när användaren hoppar av. | |
| tab-title | Pipe-separerade flik-etiketter för multi-produkt (Bli månadsgivare|Engångsgåva). | |
| page-title | Pipe-separerad rubrik per produkt, visas ovanför formuläret. | |
| label | Knapptext när type="button". | |
| locale | sv, en, osv. Faller tillbaka på en. | |
| amount | Heltal i öre. Skriver över produktpriset för "namnge ditt pris". Måste vara minst produktens minimum och plattformens golv för valutan: SEK/NOK/DKK 1000, EUR/USD/GBP 100. | |
| custom-price | Boolean. Sätt till false för att dölja kryssrutan "välj eget belopp" på gåvoprodukter och låsa givaren till det förinställda priset. Default true. | |
| price-with-vat | Boolean. Visa priser inklusive moms. | |
| price-description | Egen etikett på prisraden. | |
| reference-id | Använd för att korrelera. Hamnar på resulterande prenumeration/order och på varje webhook. | |
| reference-name | Mänskligt läsbar etikett som visas bredvid resursen i admin. | |
| email, first-name, last-name | Förifyll kundfält. | |
| company, phone | Förifyll företags- och kontaktfält. | |
| line1, line2, zip, city, country | Förifyll faktureringsadress. | |
| personal-identity-number | Förifyll personnummer. | |
| accepted-terms | Förifyll bocken för att villkoren är accepterade. | |
| method | Tvinga ett specifikt betalsätt (t.ex. card, swish). | |
| use-spar | Boolean. Slå upp adress mot SPAR. Default true. | |
| continue | Återuppta en pågående checkout-session via anonymt ID. | |
| metadata | JSON-kodat objekt som följer med till resulterande order. | |
| custom-fields | JSON-kodat objekt med värden för anpassade fält, med fält-ID som nyckel. Se Förifyllda anpassade fält. | |
| version | 1 aktiverar gamla z-index-regler. | |
| safari-url-redirect | Workaround för iOS Safaris third-party-cookies. Se anteckning nedan. |
§ 01.4 Iframe vs. knapp #
type-attributet styr renderingsläget.
type="iframe"
Formuläret renderas på plats där elementet sitter. Storleken justeras automatiskt via postMessage från iframen. Bäst för landningssidor.
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662" type="iframe"></octany-widget>
type="button"
Renderar en CTA-knapp. Klick på den öppnar modal-iframen i fullskärm. Bäst för "Prenumerera"-/"Donera"-knappar utspridda över sidan.
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662" label="Bli medlem" type="button"></octany-widget>
§ 01.5 Flera produkter i ett flöde #
Pipe-separera product-id och para ihop med matchande tab-title/page-title. Användbart för månadsgåva + engångsgåva i en och samma CTA.
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662|4663" tab-title="Bli månadsgivare|Engångsgåva" page-title="Ge en gåva varje månad|Ge en engångsgåva" success-url="https://example.se?success" type="iframe"></octany-widget>
§ 01.6 Egen metadata #
Attributet metadata tar emot ett JSON-kodat objekt som hamnar på ordern. Bra för kampanjtaggar, källsidor eller strukturerade fält du annars hade petat in i reference_id. Widgeten lyssnar på attributet via MutationObserver — ändrar du värdet efter render slår det igenom i den öppna modalen.
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662" metadata='{"campaign":"varen-2025","source":"footer"}' type="iframe"></octany-widget>
UTM-parametrar från värdsidans URL (utm_source, utm_medium, utm_campaign, utm_content, utm_term) fångas automatiskt och skickas vidare — du behöver inte koppla dem.
§ 01.7 Förifyllda anpassade fält #
Med attributet custom-fields fyller du i kontots anpassade fält i förväg. Det tar emot ett JSON-kodat objekt med fältets ID som nyckel. Använd det för att tagga en gåva med en kampanj eller ett event i ett fält som givaren aldrig ser, eller för att hoppa över frågor som sidan redan vet svaret på. Det är skilt från metadata, som fungerar som tidigare och sparas oförändrad.
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662" custom-fields='{"1":"Afrika","12":"Spring gala 2026"}' metadata='{"campaign":"spring-gala"}' type="iframe"></octany-widget>
Fältets ID hittar du i Octany admin under Produkter → Anpassade fält — det är numret i slutet av URL:en när du öppnar fältet.
- Fält som widgeten visar fylls i förväg i modalen, och givaren kan ändra dem. Är alla visade fält ifyllda (rubriker räknas inte) hoppas steget med anpassade fält över. Det dyker bara upp om ett värde underkänns när givaren går vidare.
- Fält som widgeten inte visar valideras när kassan startar och sparas i bakgrunden.
- När ordern eller prenumerationen skapas sparas de förifyllda värdena tillsammans med givarens svar. Har givaren svarat på samma fält vinner givarens svar. Sedan går värdena samma väg som vanligt, inklusive synken till kontaktprofilen när ordern bekräftas.
Tillåtna värden
| Fälttyp | Värde |
|---|---|
| Text, textområde, dedikation | Sträng. |
| Rullgardin, radioknappar | Ett val-ID, t.ex. "34". |
| Flera kryssrutor | En array med val-ID:n, t.ex. ["34","35"]. |
| Kryssruta | true/false eller "1"/"0". |
| Datum | En datumsträng, normaliseras till YYYY-MM-DD. Skicka YYYY-MM-DD så är du på den säkra sidan. |
§ 01.8 Success-/abort-URL #
Vid lyckad betalning postar modalen close-modal med { type: 'success', successUrl } och värdsidan navigerar till din success-url. Vid avhopp navigerar den till abort-url om sådan finns, annars stängs bara modalen.
Platshållare i success-url
Innan klassiska checkouten redirectar substitueras en fast uppsättning platshållare i URL:en. Använd dem när du vill ha en landningssida per order utan en extra rundtur till din backend.
| Platshållare | Ersätts med |
|---|---|
{firstName} | Kundens förnamn. |
{lastName} | Kundens efternamn. |
{email} | Kundens e-postadress. |
{customerId} | Octany-kund-ID. |
{orderId} | Resulterande order-ID (engångsköp). |
{subscriptionId} | Resulterande prenumerations-ID (recurrent produkt). |
{product} | Produktnamnet, URL-encodat. |
{total} | Totalbelopp i öre. |
{provider} | Betalleverantör/typ som användes för betalningen, t.ex. stripe, swish, trustly eller billecta. |
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662" success-url="https://example.se/tack?order={orderId}&belopp={total}&provider={provider}" type="iframe"></octany-widget>
Vilka platshållare som gäller beror på vad det är för slags checkout: {orderId} för engångsorder, {subscriptionId} för prenumerationer. Okända platshållare lämnas orörda.
UTM-taggar skickas inte vidare. Widgeten fångar utm_source/medium/campaign/content/term från värdsidans URL och lägger dem på resulterande orderns utm_parameters för attribution, men de läggs inte till på success-url. Behöver du UTM på redirecten, peta in dem själv i success-url när du renderar elementet.
order.paid/subscription.created.
§ 01.9 När du ska använda något annat #
Klassiska widgeten gör det den ska, stabilt. För nya bygg, kolla alternativen först:
- Insamling och donationer — använd de moderna Insamling-upplevelserna. Donation, Membership, 1-click Swish och Greeting är byggda för kampanjsidor, redaktionella sidor och säsongsgivande.
- SaaS, e-handel eller varukorg med flera produkter — använd Checkout. Den har hostad kassa-URL, inbäddningsbar varukorg och JS-API:et
window.Octany.
Att byta ut är mest mekaniskt: ersätt <octany-widget>-elementet med relevant loader-snutt eller en hostad checkout-länk. Webhook-hanteringen i din backend är oförändrad.