Jak vložit Flixy platební formulář na vlastní web – embed (updated, draft+2)

Platební formulář můžete vložit přímo na stránku vytvořenou například ve WordPressu, Frameru, Webflow nebo jiném nástroji. Zákazník tak dokončí objednávku přímo na vašem webu, zatímco Flixy se na pozadí postará o platbu, objednávku, fakturaci a zpřístupnění zakoupeného produktu, kurzu nebo členství.

Než začnete

Pro použití vloženého platebního formuláře potřebujete mít ve Flixy vytvořený a publikovaný produkt a připojený Stripe účet. Váš web zároveň musí umožňovat vložení vlastního HTML nebo embed kódu.

Vložený platební formulář je aktuálně experimentální funkce. Nadále ji upravujeme a vylepšujeme podle zpětné vazby.

Použití vloženého platebního formuláře se řídí vlastním ceníkem, který se může lišit podle vašeho Flixy plánu.

Aktuální podmínky a ceny najdete ve Flixy v Nastavení → Vyúčtování na kartě „Použití embed platebního formuláře“.

1) Kde najdete embed platebního formuláře?

Embed znamená vložení platebního formuláře z Flixy na vlastní web pomocí krátkého kódu. Díky tomu můžete mít prodejní stránku vytvořenou mimo Flixy, ale samotná objednávka, platba, fakturace a zpřístupnění produktu stále proběhnou přes Flixy.

V administraci Flixy otevřete produkt, jehož platební formulář chcete vložit na svůj web. V nastavení produktu přejděte do sekce Embed platebního formuláře.

Zde najdete veškerá nastavení potřebná pro vložení formuláře na vlastní web, včetně URL přesměrování, povolených domén a samotného embed kódu.

Můj obchod → vybraný produkt → Možnosti → Embed platebního formuláře

2) Jak embed platebního formuláře nastavit?

V části Embed platebního formuláře nejprve funkci povolte. Následně nastavte přesměrování po nákupu a domény, na kterých chcete formulář používat.

2.1) URL přesměrování po nákupu

Vložte adresu stránky, na kterou bude zákazník přesměrován po dokončení objednávky.

Může jít například o děkovací stránku na vašem vlastním webu.

2.2) Domény s platebním formulářem

Vložte domény, na kterých bude platební formulář zobrazen.

Tyto adresy se používají pro registraci a správné zobrazení podporovaných platebních metod, například Apple Pay nebo Google Pay.

Pokud používáte více domén, vložte každou adresu na samostatný řádek.

URL musí obsahovat protokol (https://) a doménu bez konkrétní cesty, například:

https://example.com

Nevkládejte konkrétní podstránky, například:

https://example.com/nabidka 
https://example.com/upsell 
https://example.com/dekovaci-stranka

2.3) Embed kód

Embed kód se zobrazí až po prvním uložení prodejní stránky nebo funnelu.

Pokud jej v nastavení ještě nevidíte, nejprve danou prodejní stránku nebo funnel uložte. Poté se vraťte do části Embed platebního formuláře, kde už bude možné kód zkopírovat.

Po nastavení URL adres zkopírujte připravený kód pomocí tlačítka Kopírovat kód.

Tento kód následně vložte na vlastní web nebo prodejní stránku tam, kde chcete platební formulář zobrazit.

3) Jak vložit formulář na vlastní web?

Zkopírovaný embed kód vložte na místo stránky, kde chcete platební formulář zobrazit.

Většina webových editorů umožňuje vložit vlastní HTML nebo embed kód. Přesný postup se může lišit podle nástroje, který používáte.

Obecný postup:

Otevřete editor své stránky.
Přidejte blok pro vlastní HTML nebo embed kód.
Vložte zkopírovaný kód z Flixy.
Stránku uložte nebo publikujte.
Otevřete stránku jako běžný návštěvník a zkontrolujte, zda se platební formulář správně zobrazuje.

4) Jak vložený formulář otestovat?

Po vložení formuláře otevřete stránku jako běžný návštěvník a zkontrolujte, zda se platební formulář správně načítá a zobrazuje.

Doporučujeme zkontrolovat také zobrazení na mobilním zařízení a před ostrým spuštěním projít celý nákupní proces.

Ověřte především, že:

se platební formulář správně zobrazuje,
je možné dokončit objednávku,
po dokončení objednávky dojde k přesměrování na nastavenou stránku,
se objednávka správně vytvoří ve Flixy,
proběhnou navazující procesy, například odeslání potvrzovacího e-mailu nebo zpřístupnění zakoupeného obsahu.

Pro otestování celého nákupního procesu bez nutnosti provedení skutečné platby můžete dočasně nastavit cenu produktu na 0.

Pokročilé možnosti

Pokud potřebujete platební formulář více přizpůsobit nebo propojit s vlastními nástroji, můžete využít následující pokročilé možnosti.

Úprava vzhledu formuláře

Vzhled platebního formuláře můžete do určité míry přizpůsobit pomocí vlastního CSS tak, aby lépe odpovídal vzhledu vašeho webu nebo značky.

Pro dostupné možnosti úprav a podporované CSS selektory využijte https://moje.flixy.cz/embed/docs/README.md

Pokud s úpravou CSS nemáte zkušenosti, doporučujeme tuto část předat webaři nebo vývojáři.

Dokumentaci můžete předat také AI nástroji, který díky ní lépe pochopí, jak je platební formulář postavený a jaké možnosti úprav podporuje.

Programatické vložení formuláře

Pro běžné použití doporučujeme využít embed kód vygenerovaný přímo ve Flixy. Pokud ale potřebujete větší kontrolu nad chováním formuláře, můžete jej vložit programaticky pomocí window.FlixyCheckout.mount(). V takovém případě kód z bodu 3 nepoužívejte a použijte kód z příkladu níže.

Programatické vložení můžete využít například pokud chcete:

reagovat na dokončení objednávky pomocí callbacku onConversion,
předávat stav souhlasu prostřednictvím instance formuláře,
řídit vložení formuláře vlastním JavaScriptem.

Při vložení formuláře získáte instanci, prostřednictvím které můžete s formulářem dále pracovat.

Příklad programatického vložení

<div id="my-checkout"></div>

<script
  src="https://moje.flixy.cz/embed/v1/checkout.js"
  crossorigin="anonymous"
  async
></script>

<script>
  window.addEventListener(
    "flixy-checkout-ready",
    () => {
      const handle = window.FlixyCheckout.mount(
        document.getElementById("my-checkout"),
        {
          pageId: "VAŠE_PAGE_ID",
          locale: "cs",

          onError: (error) => {
            console.error("Checkout error", error);
          },

          onConversion: (conversion) => {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push(conversion);
          },
        }
      );

      // Hodnoty nastavte podle souhlasu z vaší cookie lišty.
      handle.setConsent({
        marketing: false,
        analytics: false,
      });
    },
    { once: true }
  );
</script>

Hodnotu VAŠE_PAGE_ID nahraďte ID produktové stránky uvedeným ve vašem embed kódu.

Měření dokončených objednávek / konverzí

Pokud chcete dokončenou objednávku zaznamenat ve vlastních měřicích nástrojích, můžete při programatickém vložení využít callback onConversion.

Callback se zavolá po úspěšném dokončení objednávky ještě před přesměrováním zákazníka na nastavenou URL.

Můžete jej využít například pro odeslání události do Google Tag Manageru, Meta Pixelu nebo jiného měřicího nástroje na vašem webu.

Například pro předání konverze do Google Tag Manageru můžete použít:

onConversion: (conversion) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push(conversion);
},

Callback obdrží objekt s informacemi o dokončené objednávce:

{
  event: "purchase" | "lead",
  identifier: string,
  orderCurrency?: string,
  orderPrice?: number,
  hashedUserData?: {
    email: string,
    firstName?: string,
    lastName?: string,
  },
}

Jednotlivé hodnoty znamenají:

event – typ konverze. U placeného checkoutu jde o purchase, u lead magnetu o lead.
identifier – identifikátor konverze. U placeného checkoutu jde o Stripe Payment/Setup Intent ID.
orderCurrency – měna objednávky. Je uvedena u události purchase.
orderPrice – cena objednávky v hlavní měnové jednotce, například 499.99, nikoli v haléřích nebo centech.
hashedUserData – SHA-256 hash e-mailu a případně jména zákazníka. Data jsou již zahashovaná a není potřeba je hashovat znovu.

Měřicí nástroje nastavené přímo ve Flixy se na váš externí web automaticky nevloží. Meta Pixel, Google Analytics, Google Tag Manager nebo jiné klientské měření proto musí být na vašem webu nastavené samostatně.

Callback je dostupný pouze při programatickém vložení formuláře.

Předání souhlasu a napojení cookie lišty

Pokud využíváte serverové měření podporované Flixy, například Meta Conversions API, je potřeba Flixy předat aktuální stav souhlasu návštěvníka.

Pokud používáte standardní embed kód s data-flixy-page-id, není potřeba platební formulář vkládat programaticky ani získávat vlastní instanci. Souhlas můžete předat pomocí globální metody:

window.FlixyCheckout.setConsent({
  marketing: true,
  analytics: true,
});

Hodnoty true jsou v tomto příkladu pouze ukázkové. V reálném nasazení je nenastavujte napevno, ale vždy je odvoďte od aktuálního souhlasu návštěvníka ve vaší cookie liště.

Jednotlivé hodnoty znamenají:

marketing – souhlas s marketingovým měřením, například pomocí Meta CAPI,
analytics – souhlas s analytickým měřením.

Výchozí hodnota obou souhlasů je false. Bez předání odpovídajícího souhlasu se příslušné serverové měření neprovede.

Napojení na vlastní cookie lištu

Aktuální stav souhlasu předejte Flixy po načtení platebního formuláře a znovu pokaždé, když návštěvník své nastavení cookies změní.

Například:

function syncFlixyConsent({ marketing, analytics }) {
  if (!window.FlixyCheckout?.setConsent) return;

  window.FlixyCheckout.setConsent({
    marketing: !!marketing,
    analytics: !!analytics,
  });
}

window.addEventListener("flixy-checkout-ready", () => {
  syncFlixyConsent(readConsentFromYourBanner());
});

readConsentFromYourBanner() je pouze ilustrační název funkce. Nahraďte jej načtením aktuálního stavu souhlasu z cookie lišty, kterou na svém webu používáte.

Při změně nastavení cookie lišty následně zavolejte stejnou funkci znovu:

syncFlixyConsent({
  marketing: true,
  analytics: false,
});

Flixy si stav souhlasu mezi načteními stránky neukládá. Po obnovení stránky je proto potřeba aktuální stav z vaší cookie lišty předat znovu.

Pokud předáváte pouze jednu hodnotu, předchozí stav druhé hodnoty zůstane zachovaný:

window.FlixyCheckout.setConsent({
  marketing: true,
});

Samotné zavolání setConsent nespouští Meta Pixel, Google Analytics ani Google Tag Manager na vašem webu. Tyto nástroje musí respektovat souhlas nastavený přímo na vašem webu.

Technická dokumentace

Kompletní technickou dokumentaci platebního formuláře najdete zde:

https://moje.flixy.cz/embed/docs/README.md

Dokumentaci můžete předat také svému webaři, vývojáři nebo AI nástroji, který vám může pomoci například s:

vložením formuláře,
úpravou jeho vzhledu,
napojením cookie lišty,
předáním souhlasu,
nastavením vlastního měření.

Na co si dát pozor?

Před spuštěním stránky doporučujeme zkontrolovat:

zda je produkt ve Flixy správně nastavený a publikovaný,
zda je správně nastavená cena,
zda máte připojený Stripe účet,
zda je vyplněná URL přesměrování po nákupu,
zda jsou vyplněné domény, na kterých bude platební formulář vložený,
zda je každá doména vložená na samostatném řádku,
zda jsou vložené pouze domény bez konkrétních cest,
zda je embed kód vložený na správném místě stránky,
zda se formulář správně zobrazuje také na mobilních zařízeních,
zda máte na vlastním webu správně nastavené měřicí nástroje,
zda při serverovém měření předáváte prostřednictvím setConsent aktuální stav souhlasu návštěvníka.

Před ostrým spuštěním doporučujeme celý nákupní proces otestovat.

Časté dotazy

Co se stane po dokončení objednávky?

Po dokončení objednávky probíhá zpracování stejně jako u běžného prodeje přes Flixy.

Flixy zajistí zpracování platby, vytvoření objednávky, vystavení faktury podle nastavení obchodu, odeslání potvrzovacího e-mailu a zpřístupnění zakoupeného produktu, kurzu nebo členství.

Pokud používáte onConversion, callback se zavolá po dokončení objednávky ještě před přesměrováním zákazníka na nastavenou stránku.

Je potřeba mít prodejní stránku vytvořenou ve Flixy?

Ne. Prodejní stránku můžete mít vytvořenou mimo Flixy a vložit na ni pouze platební formulář.

Bude Flixy nadále řešit fakturaci a zpřístupnění produktu?

Ano. I když je formulář vložený na vlastním webu, objednávka, platba, fakturace a zpřístupnění produktu běží přes Flixy.

Je možné formulář vložit do WordPressu?

Ano. Ve WordPressu můžete použít například blok Vlastní HTML. Pokud používáte Elementor, využijte prvek určený pro vložení HTML kódu.

Je možné formulář vložit i do jiných nástrojů?

Ano. Formulář je možné vložit do nástrojů, které podporují vlastní HTML nebo embed kód, například do Frameru, Webflow a dalších editorů webů.

Je možné upravit vzhled platebního formuláře?

Ano, vzhled formuláře je možné upravit pomocí CSS. Tuto část doporučujeme řešit s webařem, vývojářem nebo pomocí technické dokumentace.

Kam přesně je potřeba kód vložit?

Kód vložte na místo stránky, na kterém chcete platební formulář zobrazit. Formulář se zobrazí přímo v dané části stránky.

Budou fungovat měřicí nástroje nastavené ve Flixy?

Měřicí kódy nastavené ve Flixy se na externí web automaticky nevloží. Meta Pixel, Google Analytics nebo Google Tag Manager proto musí být nastavené přímo na vašem webu.

Pro předání informace o dokončené objednávce můžete využít callback onConversion.

Jak se předává souhlas pro serverové měření?

Aktuální stav souhlasu z cookie lišty předáte pomocí metody setConsent. Výchozí hodnotou pro marketingový i analytický souhlas je false.

Bez odpovídajícího souhlasu se příslušné serverové měření, například přes Meta CAPI, neprovede.

Shrnutí

Vložený platební formulář vám umožní propojit vlastní web s Flixy.

Prodejní stránku si můžete vytvořit podle svého stylu a zároveň využívat Flixy pro platby, fakturaci, objednávky, doručení produktu a automatické zpřístupnění kurzu nebo členství.

Pro klientské měření dokončených objednávek můžete využít onConversion. Pomocí setConsent předáte Flixy aktuální souhlas návštěvníka se serverovým měřením.