Det ursprungliga checkout-elementet.
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". | |
| 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. | |
| 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 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. |
<octany-widget url="https://app.octany.com" account-id="100" product-id="4662" success-url="https://example.se/tack?order={orderId}&belopp={total}" 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.8 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, 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.