Integracja z Chargebee

Zaktualizowano: 29 marca, 2021 Autor: Avatar Teresa
share
Spis treści
share
Spis treści

Chargebee to platforma obsługująca płatności cykliczne.

Ta instrukcja przeprowadzi Cię przez proces wdrożenia cyklicznych płatności Chargebee oraz możliwości zarządzania subskrybcjami na swoim landing page’u.

Czego będziesz potrzebował:

  • dwóch przycisków na landingu: do sybskrybcji oraz zarządzania kontem;
  • trzech dodatkowych skryptów na landingu: jednego skopiowanego z konta Chargebee i dwóch z tej instrukcji, z podmienionymi właściwymi wartościami ID.

Poniżej przykładowa implementacja:

chargebee_EN1

Krok I – po stronie Chargebee

1. Zaloguj się do swojego konta Chargebee i przejdź do zakładki Product Catalog (katalog produktów) (1). Wybierz plan, który chcesz sprzedawać na landingu i skopiuj jego ID (2) – będziesz potrzebował go później, a następnie kliknij w Grab code (pobierz kod) (3).

image

2. Skopiuj kod Header script, który wkleisz później w platformie Landingi.

image1

Krok II – po stronie platformy Landingi

1. Wejdź w Dashboard wybranego landing page’a, przejdź do zakładki Kody Javascript i kliknij Dodaj skrypt. Więcej na temat dodawania własnych kodów JS znajdziesz tutaj.

Na koniec powinieneś mieć 3 dodatkowe skrypty, jak na zrzucie ekranu poniżej.

Chargebee_PL2

2. Nazwij pierwszy skrypt (A) – np. “chargebee”, wklej cały kod (Header script) skopiowany wcześniej z konta Chargebee i umieć go na pozycji head strony głównej. Zapisz zmiany.

ChargebeeJS_PL1

3. Aby uzupełnić drugi skrypt, będziesz potrzebował ID planu (skopiowanego z konta Chargebee) oraz ID przycisku subskrypcji (subscribe) z edytora Landingi. Aby go zdobyć, przejdź do edytora, wybierz przycisk, który zainicjuje subskrypcję, zaznacz go i skopiuj jego ID z menu po prawej.

Chargebee_PL3

4. Mając ID planu Chargebee i ID przycisku subskrybcji, wróć do zakładki Kody Javascript i kliknij w Dodaj skrypt.

5. Nazwij drugi skrypt (B) – np. “subscribe” i wklej w puste miejsce kod umieszczony poniżej, umieszczając go na pozycji body bottom strony głównej.

Pamiętaj, żeby w miejsce YOUR PLAN ID oraz SUBSCRIBE BUTTON ID wkleić odpowiednie wartości.

<script> // fill your chargbee plan ID and landingi button ID var plan = "YOUR PLAN ID" var button = "SUBSCRIBE BUTTON ID"   document.getElementById(button).setAttribute("href", "javascript:void(0)"); document.getElementById(button).setAttribute("data-cb-type", "checkout"); document.getElementById(button).setAttribute("data-cb-plan-id", plan); </script> 

6. Aby uzupełnić trzeci skrypt, będziesz potrzebował ID przycisku zarządzania kontem (manage account). Przejdź ponownie do edytora, wybierz przycisk do zarządzania kontem, zaznacz go i skopiuj jego ID.

Chargebee_PL4

7. Mając ID przycisku zarządzania kontem, wróć do zakładki Kody Javascript i kliknij Dodaj skrypt, by dodać ostatni kod.

8. Nazwij trzeci skrypt (C) – np. “manage account”  i wklej w puste miejsce kod umieszczony poniżej, na pozycji body bottom strony głównej. Pamiętaj, żeby w miejsce MANAGE BUTTON ID  wkleić odpowiednią wartość.

<script> // fill landingi button ID var button = “MANAGE BUTTON ID"   document.getElementById(button).setAttribute("href", "javascript:void(0)"); document.getElementById(button).setAttribute("data-cb-type", "portal"); </script> 
ChargebeeJS_PL3

Od teraz, Twoi klienci będą mogli skorzystać z płatności cyklicznych na Twoim landingu.

share

Czy ta instrukcja była pomocna?