{"id":38734,"date":"2025-05-06T13:46:19","date_gmt":"2025-05-06T10:46:19","guid":{"rendered":"https:\/\/turanturan.com.tr\/?page_id=38734"},"modified":"2025-09-02T18:10:42","modified_gmt":"2025-09-02T15:10:42","slug":"payment-failure","status":"publish","type":"page","link":"https:\/\/turanturan.com.tr\/en\/payment-failure\/","title":{"rendered":"Payment Failure"},"content":{"rendered":"\n<div class=\"gb-element-6b3cbb3c\" style=\"--inline-bg-image: url(https:\/\/turanturan.com.tr\/wp-content\/uploads\/2021\/03\/page-title.jpg)\">\n<div class=\"gb-element-6419b2ad\">\n<h1 class=\"gb-text gb-text-ef6896ed\">Payment Failure<\/h1>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-bf44f20b\">\n<div class=\"gb-element-af9463bb\">\n<p class=\"gb-text gb-text-78ad429e\">There was a problem during the payment process. You can try making the payment again to complete your appointment.<\/p>\n\n\n\n<style>\r\n    .container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 25px 0px;\r\n    }\r\n    .w-full {\r\n        width: 100%;\r\n    }\r\n    .referance-area {\r\n        max-height: 0; \/* G\u00f6r\u00fcnmezken y\u00fcksekli\u011fi s\u0131f\u0131r *\/\r\n        overflow: hidden; \/* \u0130\u00e7erik ta\u015fmas\u0131n\u0131 engelle *\/\r\n        opacity: 0; \/* G\u00f6r\u00fcnmez *\/\r\n        transform: translateY(-20px); \/* Yukar\u0131 kayd\u0131r *\/\r\n        transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;\r\n        gap: 0px 15px;\r\n        max-width: 450px;\r\n        width: 100%;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;\r\n        border-radius: 10px;\r\n    }\r\n    .referance-area.visible {\r\n        display: flex;\r\n        opacity: 1;\r\n        visibility: visible;\r\n        justify-content: center;\r\n        \/* align-items: center; *\/\r\n        flex-direction: column;\r\n        gap: 10px 0px;\r\n        transform: translateY(0);\r\n        max-height:fit-content; \r\n        padding: 20px;\r\n\r\n    }\r\n    .referance-area p {\r\n        margin-bottom: 0px !important;\r\n    }\r\n    .custom-input {\r\n        border-radius: 10px;\r\n        padding: 7px 10px;\r\n        border: 1px solid #ccc ;\r\n    }\r\n    .custom-input:focus {\r\n       outline: 2px solid #2563eb;\r\n    }\r\n    .custom-input:focus-visible {\r\n        border: 1px solid #2563eb !important;\r\n    }\r\n    .custom-button {\r\n        border-radius: 10px;\r\n        background-color: #fff;\r\n        color: #2563eb;\r\n        border: 1px solid #2563eb;\r\n        padding: 7px 15px;\r\n        cursor: pointer;\r\n        transition: all 0.33s linear;\r\n    }\r\n    .custom-button:hover {\r\n        background-color: #2563eb;\r\n        color: #fff;\r\n        transition: all 0.33s linear;\r\n    }\r\n    .personal-information {\r\n        \/* display: none; *\/\r\n        max-height: 0; \/* G\u00f6r\u00fcnmezken y\u00fcksekli\u011fi s\u0131f\u0131r *\/\r\n        overflow: hidden; \/* \u0130\u00e7erik ta\u015fmas\u0131n\u0131 engelle *\/\r\n        opacity: 0; \/* G\u00f6r\u00fcnmez *\/\r\n        transform: translateY(-20px); \/* Yukar\u0131 kayd\u0131r *\/\r\n        transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;\r\n        border-radius: 10px;\r\n        max-width: 450px;\r\n        width: 100%;\r\n        \/* z-index: 0; *\/\r\n    }\r\n    .personal-information.visible {\r\n        display: flex ;\r\n        opacity: 1;\r\n        visibility: visible;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-direction: column;\r\n        gap: 10px 0px;\r\n        transform: translateY(0);\r\n        max-height:fit-content; \r\n        padding: 20px;\r\n    }\r\n    .flex-area {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 0px 20px;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    h2 {\r\n        margin-top: 0px !important;\r\n    }\r\n    .sfs {\r\n        font-size: 14px !important;\r\n        margin-top: 5px !important;\r\n    }\r\n    .payment-area {\r\n        max-height: 0; \/* G\u00f6r\u00fcnmezken y\u00fcksekli\u011fi s\u0131f\u0131r *\/\r\n        overflow: hidden; \/* \u0130\u00e7erik ta\u015fmas\u0131n\u0131 engelle *\/\r\n        opacity: 0; \/* G\u00f6r\u00fcnmez *\/\r\n        transform: translateY(-20px); \/* Yukar\u0131 kayd\u0131r *\/\r\n        transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;\r\n        max-width: 450px;\r\n        width: 100%;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;\r\n        border-radius: 10px;\r\n    }\r\n    .payment-area.visible {\r\n        display: flex ;\r\n        opacity: 1;\r\n        visibility: visible;\r\n        flex-direction: column;\r\n        gap: 10px 0px;\r\n        transform: translateY(0);\r\n        max-height:fit-content; \r\n        padding: 20px;\r\n    }\r\n    .paid-area {\r\n        max-height: 0; \/* G\u00f6r\u00fcnmezken y\u00fcksekli\u011fi s\u0131f\u0131r *\/\r\n        overflow: hidden; \/* \u0130\u00e7erik ta\u015fmas\u0131n\u0131 engelle *\/\r\n        opacity: 0; \/* G\u00f6r\u00fcnmez *\/\r\n        transform: translateY(-20px); \/* Yukar\u0131 kayd\u0131r *\/\r\n        transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;\r\n        max-width: 450px;\r\n        width: 100%;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;\r\n        border-radius: 10px;\r\n    }\r\n    .paid-area.visible {\r\n        display: flex ;\r\n        opacity: 1;\r\n        visibility: visible;\r\n        flex-direction: column;\r\n        gap: 10px 0px;\r\n        transform: translateY(0);\r\n        max-height:fit-content; \r\n        padding: 20px;\r\n    }\r\n    .w-90 {\r\n        width: 90%;\r\n    }\r\n    .product-area {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        max-width: 450px;\r\n        width: 100%;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;\r\n        padding: 20px;\r\n        border-radius: 10px;\r\n    }\r\n    input[type=\"radio\" i] {\r\n        margin: 0px !important;\r\n    }\r\n    .radio-label {\r\n        width: 100%;\r\n        cursor: pointer;\r\n        font-size: 22px;\r\n        font-weight: 700;\r\n    }\r\n    .radio-input {\r\n        width: 20px; \/* Boyut *\/\r\n        height: 20px;\r\n        accent-color: blue; \/* Taray\u0131c\u0131 deste\u011fi olan mavi renk *\/\r\n        margin: 0; \/* Kenar bo\u015flu\u011funu s\u0131f\u0131rla *\/\r\n        cursor: pointer; \/* \u0130mleci g\u00f6ster *\/\r\n    }\r\n    .date-selector {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 0px 10px;\r\n    }\r\n    .mt-5 {\r\n        margin-top: 5px;\r\n    }\r\n    #modalPopup {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0, 0, 0, 0.6);\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n    #modalPopup > div {\r\n        background: white;\r\n        padding: 20px;\r\n        border-radius: 10px;\r\n        text-align: center;\r\n        width: 400px;\r\n    }\r\n    .custom-btn {\r\n        padding: 10px 20px;\r\n        border-radius: 5px;\r\n        background-color: #fff;\r\n        color: #007BFF;\r\n        border: 2px solid #007BFF;\r\n        cursor: pointer;\r\n        font-size: 16px;\r\n        margin-top: 20px;\r\n        transition: 0.3s linear;\r\n    }\r\n    .custom-btn:hover {\r\n        background-color: #007BFF;\r\n        color: #fff;\r\n        transition: 0.3s linear;\r\n        \r\n    }\r\n    @media (max-width:767px) {\r\n        .flex-area {\r\n            flex-direction: column;\r\n            gap: 10px 0px;\r\n        }\r\n        .w-90 {\r\n            width: 95%;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<body>\r\n    \r\n    <div class=\"container\">\r\n        <div class=\"payment-area visible\">\r\n            <h2 style=\"text-align: center;\">Payment Information<\/h2>\r\n            \r\n            <label for=\"paymentCardName\">Name on card<\/label>\r\n            <input type=\"text\" class=\"custom-input \" id=\"paymentCardName\" name=\"cardname\" placeholder=\"John Doe\">\r\n            <div class=\"flex-area\">\r\n                <div>\r\n                    <label for=\"paymentCardNumber\">Card Number<\/label>\r\n                    <input \r\n                        type=\"text\" \r\n                        id=\"paymentCardNumber\" \r\n                        name=\"cardnumber\" \r\n                        class=\"custom-input w-90\"\r\n                        placeholder=\"1111-1111-1111-1111\" \r\n                        maxlength=\"19\" \r\n                        oninput=\"formatCardNumber(this)\" \r\n                        onkeypress=\"return isNumberOrSlash(event)\"\r\n                        onblur=\"validateCardNumber(this)\" \r\n                        required\r\n                    >\r\n                <\/div>\r\n                <div>\r\n                    <label for=\"cardTypeArea\">Card Type<\/label>\r\n                    <select class=\"custom-input w-full\" name=\"cardType\" id=\"cardTypeArea\">\r\n                        <option value=\"Visa\">Visa<\/option>\r\n                        <option value=\"Mastercard\">Mastercard<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <span id=\"cardError\" style=\"color: red; display: none;\">Please enter a valid card number.<\/span>\r\n            \r\n            <div class=\"flex-area w-full\">\r\n                <div class=\"date-selector\">\r\n                    <label for=\"month\">Expiration date<\/label>\r\n                    <div class=\"flex-area\">\r\n                        <div class=\"w-full\">\r\n                            <select id=\"month\" class=\"custom-input mt-5\" name=\"month\">\r\n                                <option value=\"\" selected>Select Month<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div class=\"w-full\">\r\n                            <select id=\"year\" name=\"year\" class=\"custom-input mt-5\" disabled>\r\n                                <option value=\"\" selected>Select Year<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"w-full\">\r\n                    <label for=\"paymentCardCvv\">CVV<\/label>\r\n                    <input class=\"custom-input w-90 mt-5\" type=\"text\" id=\"paymentCardCvv\" name=\"cardcvv\" placeholder=\"CVV\">\r\n                <\/div>\r\n            <\/div>\r\n            <span id=\"expirationError\" style=\"color: red;display: none;\"><\/span>\r\n\r\n            <div style=\"justify-content: end; display: flex;\">\r\n                <h2 style=\"margin-bottom: 5px;\">Total Price: <b>15$<\/b><\/h2>\r\n            <\/div>\r\n            <div style=\"justify-content: end; display: flex;\">\r\n                <button id=\"payButton\" class=\"custom-button\">Pay<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"modalPopup\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center;\">\r\n        <div id=\"modalContent\" style=\"background: white; padding: 20px; border-radius: 10px; text-align: center; width: 400px;\">\r\n            <!-- Dinamik HTML buraya eklenecek -->\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n\r\n<script>\r\n\r\n    const monthSelect = document.getElementById(\"month\");\r\n    const yearSelect = document.getElementById(\"year\");\r\n\r\n    const currentDate = new Date();\r\n    const currentYear = currentDate.getFullYear();\r\n    const currentMonth = currentDate.getMonth() + 1; \/\/ Aylar 0-11 oldu\u011fu i\u00e7in +1\r\n\r\n    \/\/ Ay se\u00e7eneklerini olu\u015ftur\r\n    for (let i = 1; i <= 12; i++) {\r\n        const option = document.createElement(\"option\");\r\n        option.value = i.toString().padStart(2, \"0\");\r\n        option.textContent = i.toString().padStart(2, \"0\");\r\n        monthSelect.appendChild(option);\r\n    }\r\n\r\n    \/\/ Ay se\u00e7ildi\u011finde y\u0131l se\u00e7eneklerini g\u00fcncelle\r\n    monthSelect.addEventListener(\"change\", function () {\r\n        const selectedMonth = parseInt(monthSelect.value);\r\n        yearSelect.innerHTML = \"\"; \/\/ Y\u0131l se\u00e7eneklerini temizle\r\n\r\n        \/\/ Varsay\u0131lan se\u00e7enek\r\n        const defaultOption = document.createElement(\"option\");\r\n        defaultOption.value = \"\";\r\n        defaultOption.textContent = \"Select Year\";\r\n        yearSelect.appendChild(defaultOption);\r\n\r\n        \/\/ E\u011fer ay se\u00e7ilmi\u015fse\r\n        if (selectedMonth) {\r\n            for (let i = currentYear; i <= currentYear + 20; i++) {\r\n                \/\/ E\u011fer se\u00e7ilen ay mevcut aydan k\u00fc\u00e7\u00fckse, bu y\u0131l se\u00e7ilemez\r\n                if (i === currentYear && selectedMonth < currentMonth) {\r\n                    continue;\r\n                }\r\n                const option = document.createElement(\"option\");\r\n                option.value = i;\r\n                option.textContent = i;\r\n                yearSelect.appendChild(option);\r\n            }\r\n\r\n            yearSelect.disabled = false; \/\/ Y\u0131l se\u00e7im kutusunu aktif et\r\n        } else {\r\n            yearSelect.disabled = true; \/\/ Ay se\u00e7ilmezse y\u0131l kutusu devre d\u0131\u015f\u0131 kal\u0131r\r\n        }\r\n    }); \r\n\r\n    \/\/ Payment script\r\n\r\n    function isNumberOrSlash(event) {\r\n        const char = String.fromCharCode(event.keyCode);\r\n        \/\/ Rakamlar veya '\/' harici hi\u00e7bir karaktere izin verme\r\n        return \/[0-9\\\/]\/.test(char);\r\n    }\r\n\r\n    \/\/ Girdi\u011fi de\u011feri otomatik olarak formatla\r\n    function formatCardNumber(input) {\r\n        let value = input.value.replace(\/[^0-9]\/g, ''); \/\/ Sadece rakamlar\u0131 al\r\n        const formattedValue = value.match(\/.{1,4}\/g)?.join('-') || value; \/\/ Her 4 rakamdan sonra '-' ekle\r\n        input.value = formattedValue.slice(0, 19); \/\/ Maksimum 19 karakter s\u0131n\u0131r\u0131\r\n\r\n        const cardType = getCardType(value.replace(\/-\/g, '')); \/\/ \"-\" kald\u0131r\u0131p g\u00f6nder\r\n        document.getElementById('cardType').textContent = cardType || \"\";\r\n    }\r\n\r\n    function getCardType(cardNumber) {\r\n        if (\/^4\/.test(cardNumber)) return \"Visa\";\r\n        if (\/^5[1-5]\/.test(cardNumber)) return \"MasterCard\";\r\n        if (\/^3[47]\/.test(cardNumber)) return \"American Express\";\r\n        if (\/^6(?:011|5)\/.test(cardNumber)) return \"Discover\";\r\n        if (\/^35\/.test(cardNumber)) return \"JCB\";\r\n        if (\/^3(?:0[0-5]|[68])\/.test(cardNumber)) return \"Diners Club\";\r\n        return \"\";\r\n    }\r\n\r\n    \/\/ Kart numaras\u0131n\u0131 kontrol et\r\n    function validateCardNumber(input) {\r\n        const error = document.getElementById('cardError');\r\n        if (input.value.length < 19) {\r\n        \/\/ Hata: Eksik kart numaras\u0131\r\n        error.style.display = 'block';\r\n        } else {\r\n        \/\/ Ge\u00e7erli kart numaras\u0131\r\n        error.style.display = 'none';\r\n        }\r\n    }\r\n\r\n    function openModal(htmlContent) {\r\n        const modal = document.getElementById(\"modalPopup\");\r\n        const modalContent = document.getElementById(\"modalContent\");\r\n        \r\n        \/\/ Modal i\u00e7ine gelen HTML'i ekleyin\r\n        modalContent.innerHTML = htmlContent;\r\n        \r\n        \/\/ Modal'\u0131 g\u00f6r\u00fcn\u00fcr hale getirin\r\n        modal.style.display = \"flex\";\r\n    }\r\n\r\n    function closeModal() {\r\n        const modal = document.getElementById(\"modalPopup\");\r\n        modal.style.display = \"none\"; \/\/ Modal gizle\r\n    }\r\n\r\n    const payButton = document.getElementById(\"payButton\");\r\n\r\n    payButton.addEventListener(\"click\", (event) => {\r\n        event.preventDefault(); \/\/ Sayfan\u0131n yenilenmesini engelle\r\n\r\n        \/\/ Form verilerini topla\r\n        const cardName = document.getElementById(\"paymentCardName\").value;\r\n        const cardType = document.getElementById(\"cardTypeArea\").value;\r\n        const cardNumber = document.getElementById(\"paymentCardNumber\").value;\r\n        const month = document.getElementById(\"month\").value;\r\n        const year = document.getElementById(\"year\").value;\r\n        const cvv = document.getElementById(\"paymentCardCvv\").value;\r\n        const urlParams = new URLSearchParams(window.location.search);\r\n        const referanceCode = urlParams.get('referance_code');\r\n        const originalCardNumber = cardNumber.replaceAll(\"-\",\"\");\r\n\r\n\r\n        const formattedDate = month + year.slice(-2);\r\n\r\n        \/\/ Verileri do\u011frula (iste\u011fe ba\u011fl\u0131)\r\n        if (!cardName || !cardNumber || !month || !year || !cvv) {\r\n            alert(\"Please fill in all the fields!\");\r\n            return;\r\n        }\r\n\r\n        let formData = new FormData();\r\n\r\n        formData.append(\"cardName\", cardName);\r\n        formData.append(\"cardType\", cardType);\r\n        formData.append(\"cardNumber\", originalCardNumber);\r\n        formData.append(\"expiration_date\", formattedDate);\r\n        formData.append(\"cvv\", cvv);\r\n        formData.append(\"referance_code\", referanceCode);\r\n\r\n        \/\/ Fetch API ile POST iste\u011fi g\u00f6nder\r\n        fetch(\"https:\/\/console.turanturan.com.tr\/api\/tt-kt-payment-referance.php\", {\r\n            method: \"POST\",\r\n            body: formData\r\n        })\r\n        .then((response) => {\r\n            if (!response.ok) {\r\n                throw new Error(\"An error occurred during the payment process.\");\r\n            }\r\n            const contentType = response.headers.get(\"Content-Type\");\r\n            if (contentType && contentType.includes(\"application\/json\")) {\r\n                return response.json(); \/\/ JSON yan\u0131t\u0131 i\u015fleyin\r\n            } else {\r\n                return response.text(); \/\/ HTML veya metin yan\u0131t\u0131 i\u015fleyin\r\n            }\r\n        })\r\n        .then((data) => {\r\n            console.log(data['status']);\r\n            if (data.status == \"error\") {\r\n                alert(data.msg);\r\n            } else {\r\n                console.log(data); \/\/ Ba\u015far\u0131l\u0131 yan\u0131t\u0131 konsola yazd\u0131r\r\n                let win = window.open(\"\", \"_self\");\r\n                \r\n                \/\/ \/\/ Gelen HTML i\u00e7eri\u011fini popup penceresine yaz\r\n                win.document.open();\r\n                win.document.write(data); \/\/ API'den d\u00f6nen HTML i\u00e7eri\u011fi\r\n                win.document.close();\r\n            }\r\n           \r\n            \/\/ alert(\"\u00d6deme ba\u015far\u0131l\u0131!\"); \/\/ Kullan\u0131c\u0131ya bilgi ver\r\n        })\r\n        .catch((error) => {\r\n            console.error(\"Hata:\", error);\r\n            alert(\"An error occurred during the payment process.\");\r\n        });\r\n    });\r\n\r\n<\/script>\r\n\n<\/div>\n<\/div>\n\n\n\n<style>.site-content{width:100%} .inside-article{padding:0px !important}<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Payment Failure There was a problem during the payment process. You can try making the payment again to complete your appointment.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-38734","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/pages\/38734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/comments?post=38734"}],"version-history":[{"count":4,"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/pages\/38734\/revisions"}],"predecessor-version":[{"id":53912,"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/pages\/38734\/revisions\/53912"}],"wp:attachment":[{"href":"https:\/\/turanturan.com.tr\/en\/wp-json\/wp\/v2\/media?parent=38734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}