Automatyczne wyświetlanie kanałów płatności w

Transkrypt

Dział Pomocy Technicznej Dotpay
ul. Wielicka 72, 30-552 Kraków
tel. +48 12 688 26 00
e-mail: [email protected]
Automatyczne wyświetlanie kanałów płatności
w serwisie Sprzedawcy (Widget)
wersja 1.0.0
Widget wersja 1.0.0
Automatyczne wyświetlanie kanałów płatności w serwisie Sprzedawcy (Widget)
Strona | 2 / 8
W celu osadzenia formularza wyboru kanału płatności na stronie internetowej Sprzedawcy system Dotpay
udostępnia Widget realizujący automatyczne pobranie listy dostępnych (na danym Dotpay ID) kanałów oraz jej
wyświetlenie. Widget wykonany został jako gotowy skrypt w języku JavaScript, co pozwala na łatwe i szybkie
umieszczenie go w serwisie Sprzedawcy (przykładową implementację Widgetu obrazuje poniższy zrzut ekranu).
Do osadzenia Widgetu w systemie Kontrahenta wystarczy wykonać poniższe kroki:
1.
Dołącz kaskadowy arkusz stylów (CSS) w wersji skompresowanej:
<link href="https://ssl.dotpay.pl/t2/widget/payment_widget.min.css"
rel="stylesheet">
lub nieskompresowanej:
<link href="https://ssl.dotpay.pl/t2/widget/payment_widget.css"
rel="stylesheet">
Istnieje możliwość stworzenia własnego arkusza stylów, w tym celu w panelu administracyjnym (menu
Pobierz) zostały udostępnione pliki Sass. Zmianę wyglądu Widgetu można dokonać poprzez edycję pliku
config.sass oraz wygenerowanie CSS (konieczne jest użycie frameworku Compass).
Dział Pomocy Technicznej Dotpay, ul. Wielicka 72, 30-552 Kraków, tel. +48 12 688 26 00, e-mail: [email protected]
Widget wersja 1.0.0
2.
Dołącz skrypt Widgetu:
<script id="dotpay-payment-script"
src="https://ssl.dotpay.pl/t2/widget/payment_widget.js"></script>
3.
Dodaj konfigurację Widgetu:
<script type="text/javascript">
var dotpayWidgetConfig = {
sellerAccountId: '123456'
}
</script>
Widget jest domyślnie wyświetlany w miejscu, w którym (w ciele dokumentu HTML) umieszczony został
znacznik script z pkt. 2 powyżej, niemniej jednak w zależności od potrzeby Widget można odpowiednio
skonfigurować (np. osadzić w konkretnym kontenerze, czy ograniczyć wyświetlane kanały), w tym celu należy
wykorzystać własności obiektu dotpayWidgetConfig opisane w poniższej tabeli.
UWAGA !
Wyświetlana lista kanałów zależna jest od własności amount oraz currency. Własności te domyślnie są
ustawione na 1000.00 oraz PLN. Zalecane jest korzystanie z tych własności w celu uzyskania właściwej
(w stosunku do kwoty koszyka wygenerowanego w systemie Kontrahenta) listy kanałów, gdyż niektóre z metod
płatności (np. ratalne) posiadają ograniczenia kwotowe.
WŁASNOŚĆ
sellerAccountId
ZNACZENIE / OPIS
ID sklepu Sprzedawcy, dla którego ma zostać pobrana
i wyświetlona lista dostępnych kanałów.
Wartość zgodna z opisem parametru id zawartym
w Tabeli 1.
Przykład: sellerAccountId: '123456'
amount
Kwota, dla której ma zostać pobrana i wyświetlona lista
dostępnych kanałów.
Wartość zgodna z opisem parametru amount zawartym
w Tabeli 1.
Przykład: amount: '301.00'
currency
Waluta, dla której ma zostać pobrana i wyświetlona lista
Wartość zgodna z opisem parametru currency zawartym
w Tabeli 1.
Przykład: currency: 'PLN'
Strona | 3 /8
Widget wersja 1.0.0
lang
Strona | 4 / 8
Język, dla którego ma zostać pobrana i wyświetlona lista
Wartość zgodna z opisem parametru lang zawartym
w Tabeli 1.
Przykład: lang: 'pl'
offlineChannel
Sposób wyświetlenia kanałów płatności będących w trybie
offline (tj. kanałów nie księgujących wpłat w czasie
rzeczywistym).
Dostępne wartości:
display – widoczne,
mark – (domyślnie) widoczne, oznaczone jako offline,
hide – niewidoczne
Przykład: offlineChannel: 'mark'
offlineChannelTooltip
Wyświetlanie wiadomości z informacjami (tooltip)
o przyczynie oznaczenia kanału jako offline.
false – (domyślnie) nie wyświetlanie informacji
true – wyświetlanie informacji
Przykład: offlineChannelTooltip: true
channel
Wyświetlenie określonego kanału płatności.
Numery kanałów płatności zostały przedstawione
w rozdz. ZAŁĄCZNIK I (KANAŁY PŁATNOŚCI).
Przykład: channel: 1
channelGroups
Tablica definiująca grupy kanałów płatności, które mają
zostać wyświetlone.
credit_cards – karty płatnicze
fast_transfers – szybkie transfery
transfers – przelewy online
cash – płatności gotówkowe
purses – portmonetki i vouchery
installment – raty
other – inne
posponed_payments – płatności odroczone
Widget wersja 1.0.0
Przykład: channelGroups: ['credit_cards',
'fast_transfers']
Strona | 5 /8
disabledChannels
Tablica definiująca kanały płatności, które mają NIE być
wyświetlone.
Numery kanałów płatności zostały przedstawione
w rozdz. ZAŁĄCZNIK I (KANAŁY PŁATNOŚCI).
Przykład: disabledChannels: [11, 69]
channelsOrder
Tablica definiująca kolejność w jakiej mają zostać
wyświetlone kanały płatności. Wartości elementów tablicy to
numery kanałów.
Przykład: channelsOrder: [31, 69, 11]
widgetFormContainerClass
Klasa (wartość atrybutu id) znacznika HTML, w którym
Widget ma zostać osadzony – w formie graficznej listy
kanałów.
Przykład: widgetFormContainerId: 'my-form-widgetcontainer'
widgetSelectContainerClass
Klasa (wartość atrybutu id) znacznika HTML, w którym
Widget ma zostać osadzony – w formie rozwijalnej listy
kanałów.
Przykład: widgetSelectContainerId: 'my-selectwidget-container'
channelsWrapperContainerClass
Nazwa jaką ma zostać nadpisana klasa dotpay-channels
znacznika div zawartego w domyślnej strukturze Widgetu.
Możliwość nadpisania domyślnej nazwy klasy służy
ułatwieniu ewentualnej edycji stylów lub pozycjonowania
elementów Widgetu.
Przykład: channelsWrapperContainerClass: 'myposition-style-wrapper-container-class'
widgetClass
Nazwa jaką ma zostać nadpisana klasa dotpay-channelsselection znacznika div zawartego w domyślnej
strukturze Widgetu.
Możliwość nadpisania domyślnej nazwy klasy służy
ułatwieniu ewentualnej edycji stylów lub pozycjonowania
elementów Widgetu.
Przykład: widgetClass: 'my-position-style-widgetclass'
Widget wersja 1.0.0
selectedWidgets
Tablica definiująca Widgety, które mają zostać wyświetlone.
Strona | 6 / 8
formWidget – graficzna lista kanałów
selectWidget – rozwijalna lista kanałów
Przykład: selectedWidgets: ['formWidget']
debug
Sposób obsługi błędów.
true – (domyślnie) wyświetlanie na stronie
komunikatów o błędach, przerywanie działania
skryptu,
false – logowanie błędów w konsoli, zamiast
wyświetlania komunikatów na stronie, nie przerywanie
działania skryptu
Przykład: debug: false
UWAGA !
Jeśli Widget ma odnosić się do ID sklepu utworzonego w środowisku testowym, należy podczas dołączania
arkusza stylów oraz skryptu Widgetu (zamiast adresu https://ssl.dotpay.pl/t2/) użyć adresu środowiska
testowego tj. https://ssl.dotpay.pl/test_payment/
Poniżej zostały zamieszczone przykłady użycia Widgetu w formularzach realizujących przekierowanie do
płatności.
Przykład 1.
<!DOCTYPE html>
<html>
<head>
rel="stylesheet">
sellerAccountId: '123456'
}
</script>
</head>
<body>
<div>
<form action="https://ssl.dotpay.pl/t2/" method="post"
id="dotpay_redirection_form">
<input type="hidden" name="id" value="123456">
<input type="hidden" name="amount" value="301.00">
<input type="hidden" name="description" value="Zapłata za
fakturę VAT 12345/2014">
Widget wersja 1.0.0
<script id="dotpay-payment-script" src="
https://ssl.dotpay.pl/t2/widget/payment_widget.js"></script>
</form>
<p>
<button type="submit" form="dotpay_redirection_form"
value="Submit">Potwierdź zamówienie i zapłać</button>
</p>
</div>
</body>
</html>
Przykład 2.
UWAGA !
Wraz z implementacją Widgetu można wykorzystać parametry type=4 oraz url (opisane w Tabeli 2.), które
pozwolą skorzystać z oferowanego przez system Dotpay mechanizmu bezpośredniego przekierowania do
dostawcy kanału. Wykorzystanie wspomnianych parametrów pozwala skrócić ścieżkę płatności, tj. stworzyć
przekierowanie o schemacie np. Sklep → Bank → Sklep zamiast Sklep → Dotpay → Bank → Dotpay → Sklep.
W przypadku korzystania z mechanizmu bezpośredniego przekierowania do dostawcy kanału należy pamiętać
o umieszczeniu przycisków akceptacji zgód regulaminu płatności Dotpay oraz przetwarzania przez Dotpay S.A.
danych osobowych Płacącego dla potrzeb realizacji procesu płatności.
Poniżej został zamieszczony przykład wykorzystania formularza przekierowania do płatności
z wykorzystaniem Widgetu oraz dodatkowych parametrów.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
rel="stylesheet">
<script id="dotpay-payment-script"
src="https://ssl.dotpay.pl/t2/widget/payment_widget.js"></script>
sellerAccountId: '123456',
amount: '301.00',
currency: 'PLN',
lang: 'pl',
widgetFormContainerClass: 'my-form-widget-container',
offlineChannel: 'mark',
offlineChannelTooltip: true
}
</script>
</head>
<body>
<div style="max-width: 970px; margin: 0 auto; margin-top: 40px;
margin-bottom: 100px">
<form action="https://ssl.dotpay.pl/t2/" method="post"
id="dotpay_redirection_form">
<input type="hidden" name="id" value="123456">
<input type="hidden" name="amount" value="301.00">
<input type="hidden" name="currency" value="PLN">
<input type="hidden" name="lang" value="pl">
<input type="hidden" name="description" value="Zapłata za
Strona | 7 /8
Widget wersja 1.0.0
Strona | 8 / 8
fakturę VAT 12345/2014">
<input type="hidden" name="control"
value="d41d8cd98f00b204e9800998ecf8427e">
<input type="hidden" name="urlc"
value="https://www.example.com/urlc_receiver/">
<input type="hidden" name="type" value="4">
<input type="hidden" name="url"
value="https://www.example.com/thanks_page/">
<p style="margin-bottom: 40px; margin-left: 10px">
<input type="text" size="40" name="firstname" id="firstname"
pattern="^[\w\d _\-ąęćśłóżźĄĘĆŚŁÓŻŹ]{0,50}$" placeholder="Imię"/>
<br><br>
<input type="text" size="40" name="lastname" id="lastname"
pattern="^[\w\d _\-ąęćśłóżźĄĘĆŚŁÓŻŹ]{0,50}$"
placeholder="Nazwisko"/>
<br><br>
<input type="text" size="40" name="email" id="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
placeholder="e-mail"/>
</p>
<p for="email">Wybierz kanał płatności:</p>
<div class="my-form-widget-container"></div>
<p style="text-align: left; margin-top: 40px; margin-left: 40px;
margin-right: 40px">
<label><input type="checkbox" name="bylaw" value="1" checked>
Akceptuję <a title="regulamin płatności" target="_blank"
href="https://ssl.dotpay.pl/files/regulamin_
dotpay_sa_dokonywania_wplat_w_serwisie_dotpay.pdf">Regulamin
płatności</a> Dotpay S.A..</label>
<br><br>
<label><input type="checkbox" name="personal_data" value="1" checked>
Wyrażam zgodę na przetwarzanie moich danych osobowych przez Dotpay
S.A. 30-552 Kraków (Polska), Wielicka 72 dla potrzeb realizacji
procesu płatności zgodnie z obowiązującymi przepisami (Ustawa
z dnia 29.08.1997r. o ochronie danych osobowych, Dz. U. nr 133,
poz. 883 z późn. zmianami). Mam prawo wglądu i poprawiania swoich
danych.</label>
</p>
</form>
<p style="text-align: right; margin-top: 40px; margin-right: 40px">
<button type="submit" form="dotpay_redirection_form"
value="Submit">Potwierdź zamówienie i zapłać</button>
</p>
</div>
</body>
</html>

Automatyczne wyświetlanie kanałów płatności w

Transkrypt

Podobne dokumenty

Zmiana oferty "specjalnej": 1

regulamin promocji „raz dwa trzy mp3”

Pokaż kartę produktu

MAGAZYN ESOTIQ.COM DOM TOWAROWY „CHYLONIA” BOX 64

Walentynki 2009: szalone rendez-vous

Pogoda w Lęborku - Lokalna Organizacja Turystyczna ,,Ziemia