# Ö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; * [x] Paynet-custom.js’i mevcut tasarımı size ait olan HTML formunuza yerleştirirsiniz. * [x] 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. * [x] 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. {% hint style="info" %} Ö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. [Bakınız](https://doc.paynet.com.tr/authentication#secret-key) {% endhint %} | Sistem | URL | | ---------------- | --------------------------------------------------------- | | **Canlı Sistem** | | | **Test Sistemi** | | ## **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. ```markup
``` #### 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ı ne ise onu göndermelisiniz. Örneğin: “100,55 TL” => “100,55” gibi gönderilmelidir. | | **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-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-reference\_no** | Hayır | Ödeme işleminin ilişkili olduğu referans numarası. | | **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-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, save\_cardoid ya da save\_carduid değerlerinden en az birini göndermeniz zorunlu. | | **data-use\_saved\_card** | Hayır | Ödeme işlemi sırasında data-use\_saved\_card parametresinin “true” ayarlandığı durumda card\_hash parametresinin doğruluğu kontrol edilir. | | **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 saklamada kullanılacak kart açıklaması. | | **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. | | **data-installments** | Hayır | Eğer müşterinize sadece belirli taksitler ile alış veriş yapmasına izin vermek istiyorsanız, virgül ile ayırarak izinli taksit bilgisini gönderebilirsiniz. 0, 3, 4, 6 gibi | | **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. | ## **2.Adım: HTML input elementlerinizi işaretleyin.** Ödeme bilgilerinin alınacağı HTML formunuz, tercihleriniz doğrultusunda diyazn edilir. Formunuzdaki input elementleri ve buton data-paynet attribute'u ile işaretlenir. Kullanıcı kart bilgilerini girip formu post ettiğinde; Paynet-custom.js, “**token\_id**” ve “**session\_id**” parametrelerini formunuza hidden olarak ekler ve formu action adresi ile belirtiğiniz sayfaya 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. {% hint style="warning" %} Script tag’inin içinde data-from parametresinin değeri ödeme bilgilerinin alınacağı HTML formun ID"si olmalı. Değer "**#formid**" şeklinde verilmeli. {% endhint %} {% hint style="info" %} Eğer **data-return\_url** parametresi kullanıyorsanır, Paynet-custom.js formun action adresi yerine return\_url ile belirtilen adrese post işlemini yapar. {% endhint %} {% hint style="info" %} Formunuzda **data-paynet** attribute'u ile işaretlemediğiniz inputlar değişiklik olmadan post edilir. {% endhint %} #### data-paynet HTML form değerleri | Parametre İsmi | Zorunlu | Açıklama | | ------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------- | | **number** | Evet | Kredi kartı numarasının alınacağı html input'u işaretlemek için kullanılır. | | **installmentKey** | Hayır | Seçilen taksitin ID’si | | **holderName** | Evet | Kart sahibinin alınacağı html input'u işaretlemek için kullanılır. | | **exp-month** | Evet | Kredi kartı son kullanma tarihinin ay bilgisinin alınacağı html input'u işaretlemek için kullanılır. | | **exp-year** | Evet | Kredi kartı son kullanma tarihinin yıl bilgisinin alınacağı html input'u işaretlemek için kullanılır. | | **cvv** | Evet | Kredi kartı CVC bilgisinin alınacağı html input'u işaretlemek için kullanılır. | | **desc** | Hayır | Ödeme ile ilgili açıklama bilgisinin alınacağı html input'u işaretlemek için kullanılır. | | **email** | Hayır | Ödeme yapan kişinin e-posta bilgisinin alınacağı html input'u işaretlemek için kullanılır. | | **phone** | Hayır | Ödeme yapan kişinin telefon bilgisinin alınacağı html input'u işaretlemek için kullanılır. | | **do3D** | Hayır | 3D'li ya da 3D'siz ödemeyi kullanıcıların tercihine bırakmak istediğinizde HTML checkboxı işaretlemek için kullanılır. | | **save\_card** | Hayır | Kart saklamayı kullanıcının tercihine bırakmak istediğinizde HTML checkbox'ı işaretlemek için kullanılır. | | **save-card-desc** | Hayır | Kart saklamada kart açıklamasının alınacağı HTML input'u işaretlemek için kullanılır. | ## 3.Adım : Ödemeyi onaylama Form action adresi ya da data-return\_url ile belirtiğiniz adrese **session\_id** ve **token\_id** parametreleri post edildikten sonra ödeme işlemini "Ödeme Onaylama" servisi ile onaylamalısınız. [Bakınız](https://doc.paynet.com.tr/servisler/islem/odeme-onaylama) {% content-ref url="../servisler/islem/odeme-onaylama" %} [odeme-onaylama](https://doc.paynet.com.tr/servisler/islem/odeme-onaylama) {% endcontent-ref %} {% hint style="danger" %} Ödeme onaylama servisini başarılı şekilde çalıştırmazsanız kredi kartından tahsilat işlemi yapılmaz. {% endhint %} ## 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](https://doc.paynet.com.tr/oedeme-metotlari/oezellestirilmis-form/event-parametreleri) 2. [Servis Parametreleri](https://doc.paynet.com.tr/oedeme-metotlari/oezellestirilmis-form/servis-parametreleri)