Özelleştirilebilir Form

Paynet ile ödeme almanın diğer bir kolay yolu Paynet-custom.js’i ödeme formunuza gömmektir. Paynet-custom.js ödeme ekranını kendi tasarımınıza uygun şekilde dizayn etmenize olanak verir. Sizin için kart bilgilerinin güvenliğini sağlar, tüm doğrulamaları yapar. Hassas kart bilgileri hiçbir şekilde güvensiz ortamlarda dolaşmaz.

Paynet-custom.js ile ödeme almak üç aşamadan oluşur;

• Paynet-custom.js’i mevcut tasarımı size ait olan HTML formunuza yerleştirirsiniz.

• HTML Form elementlere data-paynet attribute'u ile hangi alan olduğunu işaretlersiniz. Örneğin Kredi kartı numarasını alacağınız html input'a data-paynet="number" attribute'unu eklemeniz gerekiyor.

• Kullanıcı kart bilgilerini girip ödeme butonuna basınca Paynet-custom.js kart bilgilerini alarak sizin formunuza “token_id” ve “session_id” bilgilerini ekler ve formunuzu post eder. Sizde sunucunuzda gönderilen “token_id” ve “session_id” bilgilerini alarak “Ödeme Onaylama” servisi ile kredi kartından çekim işlemini tamamlayabilirsiniz.

Özelleştirilebilir Form methodu ile script'i sayfanıza eklemek için Publishable key, ödeme işlemini sunucu tarafında onaylamak için de secret key'e ihtiyacınız vardır. bnkz.

1.Adım: Paynet-custom.js’i formunuza ekleme

Paynet-custom.js’i aşağıdaki şekilde sayfanıza ekleyebilirsiniz. Eklenen bu script ile sayfanızı isteğiniz doğrultuda dizayn edebilirsiniz.

 <script type="text/javascript"
     class="paynet-button"
     src="https://pts-pj.paynet.com.tr/public/js/paynet-custom.js"
     data-form="#checkout-form"
     data-key="[Publishable key]"
     data-amount="200" 
     data-description="Ödeme açıklaması">
</script>

<form action="[post adresi]" method="post" name="checkout-form" id="checkout-form">
    <input type="text" name="cardHolderName"  data-paynet="holderName" placeholder="Kart Üzerindeki İsim"  />
    <input type="text" name="cardNumber"      data-paynet="number"     placeholder="Kart No"               />
    <select name="expMonth" id="expMonth" data-paynet="exp-month" >                       
         <option value="1">1</option>
                  ...
         <option value="11">11</option>
         <option value="12">12</option>
    </select>                        
    <select name="expYear" id="expYear" data-paynet="exp-year" >
         <option value="">...</option>                
         <option value="2018">2018</option>
         <option value="2019">2019</option>
     </select>
                
     <input type="password"   name="cvv"               data-paynet="cvv"   />                
     
     <button type="submit" data-paynet="submit">Öde</button>
</form>

Paynet-custom.js Parametreleri

Data attribute	Zorunlu	Açıklama
data-form	Evet	Kart bilgilerinin alıncağı formun id'si. css selector "#formid" şeklinde verilmeli
data-key	Evet	Publishable key'iniz.
data-amount	Evet	Kredi kartından çekilecek tutar. Ödeme tutarının yüz ile çarpılmış hali. “10.00 TL” => “1000” olarak gönderilmeli.
data-name	Hayır	Ödeme sırasında görünecek başlık.
data-description	Hayır	Ödeme sırasında görünecek işlem açıklaması. Paynet API İşlem listesinde ve Paynet işlem listesinde burada gönderdiğiniz açıklama gösterilir.
data-agent	Hayır	Eğer alt bayileriniz var ise işlemin hangi bayi üzerinden geldiğini bu alana bayi kodu göndererek yapabilirsiniz.
data-reference_no	Hayır	Ödeme işleminin ilişkili olduğu referans numarası. Tekil (unique) bir veri olmalı. ( örn: sipariş numarası )
data-add_commission_amount	Hayır	Komisyon tutarının ödeme tutarına eklenip eklenmeyeceği belirlenir. True olduğunda komisyon tutarı kredi kartından çekilecek tutara eklenir.
data-no_instalment	Hayır	true/false, default: false. True olduğunda Taksitli çekime izin vermez, tek çekim yapılır.
data-ratio_code	Hayır	Paynet.com.tr yönetim ekranlarında “API oran tanımları” sayfasından tanımlayabileceğiniz oran tablolarının “oran kodunu” bu alanda gönderebilirsiniz. Gönderdiğiniz oran koduna ait oran tablosu üzerinden komisyon hesaplaması yapılır. Bu sayede API üzerinden istediğiniz oranlar ile işlem yapabilirsiniz.
data-show_tds_error	Hayır	Bankanın 3D sayfasında hata alması durumunda bunu direkt müşterinize göstermek isterseniz "true", onaylama adımında göstermek isterseniz "false".
data-invoice_no	Hayır	Düzenli ödeme fatura numarası.
data-subscription_id	Hayır	Düzenli ödeme kodu, mevcut bir düzenli ödemenize manuel ödeme almak istediğinizde invoice_no ile beraber kullanılır.
data-save_card	hayır	Ödeme işlemi ile birlikte kredi kart numarasının da saklanması istiyorsanız bu parametreyi true yollayabilirsiniz. Kart saklama işlemi yapıyorsanız card_desc zorunlu, card_owner_id ya da user_unique_id değerlerinden en az birini göndermeniz zorunlu.
data-save_cardoid	Hayır	İlk defa kart saklama yapıldıktan sonra, Paynet tarafından user_unique_id’ye göre oluşturulan kart sahibinin benzersiz bilgisi. Bir sonraki kart saklama ve karttan ödeme alma işlemlerinde bu değer kullanılır.
data-save_carduid	Hayır	Üye iş yeri tarafından verilen kullanıcıya özgü benzersiz id. İlk defa kart saklama yapılıyorsa zorunlu. İlk kart saklama tamamlandıktan sonra Paynet tarafından bu kullanıcıya benzersiz bir değer atanır( card_owner_id). Bu değeri kendi sisteminizde kullanıcınız ile ilişkilendirerek saklamalısınız. Daha sonra bu kullanıcıya yapılan kart saklama işlemlerinde user_unique_id yerine Paynet tarafından verilen card_owner_id değişkenini kullanmalısınız.
data-save_card_desc	Hayır	Kartı saklarken açıklama.
data-use_saved_card	Hayır	Saklı kartlar ile işlem yapabilme.
data-tds_required	Hayır	True/false, Default: true False : Eğer işlem yapılacak POS 3D’siz işlemi destekliyor ise, kullanıcının 3D’siz de işlem yapmasına izin verir. True: Eğer işlem yapılacak POS 3D’siz işlemi destekliyor ise, kullanıcının 3D’siz de işlem yapmasını engeller.
data-merge_option	Hayır	Bu alanla ilgili daha detaylı bilgi için lütfen destek ekibimiz ile iletişime geçiniz.
data-pos_type	Hayır	Bu alanla ilgili daha detaylı bilgi için lütfen destek ekibimiz ile iletişime geçiniz.
data-ratio_code_method	Hayır	Bu alanla ilgili daha detaylı bilgi için lütfen destek ekibimiz ile iletişime geçiniz.
data-return_url	Hayır	Form action parametresi yerine başka bir url'de ödeme onaylama işlemi yapacaksanız bu alanda ilgili url bilgisini gönderebilirsiniz.

2.Adım: HTML input elementlerinizi işaretleyin.

Ödeme bilgilerinin alınacağı sayfa, tercihleriniz doğrultusunda diyazn edilir. Form'un ID'si script attribute'unda data-form="[your form id]" şeklinde verilmelidir. Formunuzdaki input elementleri de data-paynet attribute'u ile belirtilmelidir. Formunuza yerleştirdiğiniz buton ile ödeme işlemi gerçekleştiğinde Paynet-custom.js, “token_id” ve “session_id” parametrelerini formunuza hidden olarak ekler ve formu post eder. Form post işlemi ile sizin formunuza eklediğiniz parametreler ile beraber session_id ve token_id bilgisi web server’ınıza gelir.

Script Parametreleri

Parametre İsmi	Zorunlu	Açıklama
number	Evet	Kredi kartı numarası bilgisi
installmentKey	Evet	Seçilen taksitin ID’si
holderName	Evet	Kart sahibinin adı
data-agent	Evet	Ödemeyi alanın ya da yapanın firmadaki cari hesap kodu. Bu alanda firma bayisi cari hesap kodu ya da bayinin Paynet altındaki kodu gönderilebilir. Firma kendi bayi kodunu kullanacak ise Paynet sisteminde ilgili tanımın yapılması gerekiyor.
exp-month	Evet	Kredi kartı son kullanma tarihinin ay bilgisi
exp-year	Evet	Kredi kartı son kullanma tarihinin yıl bilgisi
cvv	Evet	Kredi kartı CVC bilgisi
desc	Hayır	Ödeme ile ilgili açıklama bilgisi
email	Hayır	Ödeme yapan kişinin e-posta bilgisi
phone	Hayır	Ödeme yapan kişinin telefon bilgisi
do3D	Hayır	Ödemenin 3D’li olup olmadığı bilgisi

3.Adım : Ödemeyi onaylama

Server’ınıza ulaşan session_id ve token_id parametreleri ile kart bilgisi sizin sisteminizden geçmeden ödeme işlemini onaylayabilirsiniz.Bknz.

pageÖdeme Onaylama

Event parametre ve Servisler

Paynet-custom.js javascript kütüphanesindeki aşağıdaki eventleri ve servisleri daha esnek bir uygulama oluşturmak için kullanabilirsiniz.

1. Event Parametreleri

2. Servis Parametreleri