{"id":1578,"date":"2021-06-24T08:54:28","date_gmt":"2021-06-24T08:54:28","guid":{"rendered":"https:\/\/www.anytimelearn.in\/?page_id=1578"},"modified":"2021-06-25T08:27:01","modified_gmt":"2021-06-25T08:27:01","slug":"cashfree-quick-payment-trial","status":"publish","type":"page","link":"https:\/\/www.anytimelearn.in\/index.php\/cashfree-quick-payment-trial\/","title":{"rendered":"Cashfree Quick Payment Trial"},"content":{"rendered":"\n<div class=\"wp-block-themeisle-blocks-advanced-columns has-1-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-equal-layout has-default-gap has-vertical-unset\" id=\"wp-block-themeisle-blocks-advanced-columns-45279bd7\"><div class=\"wp-block-themeisle-blocks-advanced-columns-overlay\"><\/div><div class=\"innerblocks-wrap\">\n<div class=\"wp-block-themeisle-blocks-advanced-column\" id=\"wp-block-themeisle-blocks-advanced-column-190a2bfe\">\n<p>Rest of the form goes here<\/p>\n\n\n\n<style>\n    \/* .invalid class prevents CSS from automatically applying *\/\n    .invalid input:required:invalid {\n        background: #BE4C54;\n        font-size: 1.2em;\n        font-weight: 600;\n    }\n\n    \/* Mark valid inputs during .invalid state *\/\n    .invalid input:required:valid {\n        background: #17D654;\n    }\n    .modal {\n        display: none;\n        position: fixed;\n        z-index: 1;\n        padding-top: 100px;\n        left: 0;\n        top: 0;\n        height: 100%;\n        overflow: auto;\n        background-color: rgb(0,0,0);\n        background-color: rgba(0,0,0,0.4);\n    }\n    .modal-content {\n        background-color: #fefefe;\n        margin: auto;\n        max-width: 400px;\n    }\n    .close {\n        color: #fff;\n        float: right;\n        font-size: 28px;\n        font-weight: bold;\n    }\n\n    .close:hover,\n    .close:focus {\n        color: #000;\n        text-decoration: none;\n        cursor: pointer;\n    }\n    #cfCheckoutModal {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n\n    .modal-header {\n        background-color: #672fd8;\n        padding: 10px;\n        color: #fff;\n    }\n    .modal-body {\n        margin-bottom:10px;\n    }\n    .modal-header h3 {\n        margin: 5px 0;\n        font-size: 20px;\n    }\n    .modal-header p {\n        font-size: 16px;\n    }\n    .modal-header .close {\n        font-family: auto;\n        line-height: 10px;\n        text-decoration:none;\n        color:#fff;\n        opacity: 1;\n    }\n    .form-group {\n        margin-top: 10px;\n    }\n    .form-modal label {\n        margin-bottom: 5px;\n        font-size: 15px;\n        display: inline-block;\n        font-weight: 500;\n    }\n    .form-modal input {\n        width: -webkit-fill-available;\n        padding: 3px;\n        outline: unset;\n        border: 1px solid #ccc;\n        height: 30px;\n        font-size: 16px;\n    }\n    .form-modal{\n        padding: 20px;\n    }\n    .align-right-btns{\n        text-align: right;\n        margin-top: 20px;\n    }\n    .align-right-btns .cancel-btns{\n        background-color: #fff;\n        padding: 7px 10px;\n        border: 1px solid #ccc;\n        font-size: 14px;\n        margin-right: 5px;\n        color: #000;\n    }\n    .align-right-btns .proceed-btns{\n        background-color: #672fd8;\n        color: #fff;\n        padding: 7px 10px;\n        border: 1px solid #672fd8;\n        font-size: 14px;\n    }\n    .cf_logo {\n        height:22px;\n        width:22px;\n        margin-right:5px;\n        float:left;\n        vertical-align:middle;\n    }\n    .alert {\n        padding: 10px;\n    }\n    .alert-success {\n        color: #155724;\n        background-color: #d4edda;\n        border-color: #c3e6cb;\n    }\n    .alert-danger {\n        color: #721c24;\n        background-color: #f8d7da;\n        border-color: #f5c6cb;\n    }\n    .alert-warning {\n        color: #856404;\n        background-color: #fff3cd;\n        border-color: #ffeeba;\n    }\n<\/style>\n\n<!-- Add custom button on page\/post -->\n<div>\n    <div><button id=\"btn_cashfree\" type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#cfCheckoutModal\">\n                    Subscribe to Anytime Learn\n                    <\/button><\/div>\n    <div id='response'><\/div>\n<\/div>\n\n<!-- Modal for getting customer detail -->\n<div class=\"modal\" id=\"cfCheckoutModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"cfCheckoutModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <a class=\"close\" data-dismiss=\"modal\">\u00d7<\/a>\n                <h3>\n                    <img decoding=\"async\" class=\"cf_logo\" src=\"https:\/\/www.anytimelearn.in\/wordpress\/wp-content\/plugins\/cashfree-quick-button\/images\/logo.png\" alt=\"img\"\/>\n                    <span>Academic Content Individual<\/span>\n                <\/h3>\n                <p>Anytime Learn Self Learning Academic Content Annual Plan<\/p>\n                <h3>\u20b9 944<\/h3>\n            <\/div>\n            <div class=\"form-modal\">\n                <form class=\"needs-validation\" id=\"cfCheckoutForm\" method=\"post\" action=\"https:\/\/www.anytimelearn.in\/wordpress\/wp-admin\/admin-post.php?action=cashfree_checkout_form\" novalidate>\n                    <div class=\"form-group\">\n                        <label for=\"customerName\">Name<\/label>\n                        <input type=\"text\" class=\"form-control\" id=\"customerName\" name=\"customerName\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"customerEmail\">Email address<\/label>\n                        <input type=\"email\" class=\"form-control\" id=\"customerEmail\" aria-describedby=\"emailHelp\" name=\"customerEmail\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"customerPhone\">Phone Number<\/label>\n                        <input type=\"text\" class=\"form-control\" id=\"customerPhone\" name=\"customerPhone\" required>\n                    <\/div>\n                    <div class=\"align-right-btns\">\n                        <button type=\"button\" class=\"cancel-btns\">CANCEL<\/button>\n                        <button type=\"submit\" class=\"proceed-btns\">PROCEED<\/button>\n                        <input type=\"hidden\" name=\"pageID\" value=\"1578\">\n                    <\/div>\n                <\/form> \n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    'use strict';\n    window.addEventListener('load', function() {\n      \/\/ Fetch all the forms we want to apply custom Bootstrap validation styles to\n      var forms = document.getElementsByClassName('needs-validation');\n      \/\/ Loop over them and prevent submission\n      var validation = Array.prototype.filter.call(forms, function(form) {\n        form.addEventListener('submit', function(event) {\n          if (form.checkValidity() === false) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n          else{\n            form.classList.add('was-validated');\n          }\n          \n        }, false);\n      });\n    }, false);\n  })();\n<\/script>\n\n<script>\n    \/\/ Get the modal\n    var modal = document.getElementById(\"cfCheckoutModal\");\n\n    \/\/ Get the button that opens the modal\n    var btn = document.getElementById(\"btn_cashfree\");\n\n    \/\/ Get the <span> element that closes the modal\n    var span = document.getElementsByClassName(\"close\")[0];\n    var cancel_btn = document.getElementsByClassName(\"cancel-btns\")[0];\n\n    \/\/ When the user clicks the button, open the modal \n    btn.onclick = function() {\n    modal.style.display = \"block\";\n    }\n\n    \/\/ When the user clicks on <span> (x), close the modal\n    span.onclick = function() {\n    modal.style.display = \"none\";\n    }\n\n    cancel_btn.onclick = function() {\n    modal.style.display = \"none\";\n    }\n    \/\/ When the user clicks anywhere outside of the modal, close it\n    window.onclick = function(event) {\n    if (event.target == modal) {\n        modal.style.display = \"none\";\n    }\n    }\n<\/script>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1578","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/pages\/1578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/comments?post=1578"}],"version-history":[{"count":1,"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/pages\/1578\/revisions"}],"predecessor-version":[{"id":1582,"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/pages\/1578\/revisions\/1582"}],"wp:attachment":[{"href":"https:\/\/www.anytimelearn.in\/index.php\/wp-json\/wp\/v2\/media?parent=1578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}