{"id":10077,"date":"2026-09-20T10:42:29","date_gmt":"2026-09-20T10:42:29","guid":{"rendered":"https:\/\/alsuntranslation-riyadh.com\/?page_id=10077"},"modified":"2026-09-20T10:43:02","modified_gmt":"2026-09-20T10:43:02","slug":"payment","status":"publish","type":"page","link":"https:\/\/alsuntranslation-riyadh.com\/en\/payment\/","title":{"rendered":"Payment"},"content":{"rendered":"\n&#8220;`html\n<style>\n.ats-direct-payment,\n.ats-direct-payment * {\n    box-sizing: border-box;\n}\n\n.ats-direct-payment {\n    --primary: #d9272e;\n    --primary-dark: #aa1d23;\n    --text: #182033;\n    --muted: #687386;\n    --border: #dce2ea;\n\n    width: calc(100% - 30px);\n    max-width: 620px;\n    margin: 60px auto;\n    padding: 38px;\n    direction: ltr;\n    background: #fff;\n    border: 1px solid rgba(24, 32, 51, 0.08);\n    border-radius: 24px;\n    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.12);\n    font-family: inherit;\n}\n\n.ats-payment-heading {\n    margin-bottom: 30px;\n    text-align: center;\n}\n\n.ats-payment-lock {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 58px;\n    height: 58px;\n    margin: 0 auto 15px;\n    color: #fff;\n    background: linear-gradient(\n        135deg,\n        var(--primary),\n        var(--primary-dark)\n    );\n    border-radius: 18px;\n    box-shadow: 0 12px 25px rgba(217, 39, 46, 0.25);\n}\n\n.ats-payment-lock svg {\n    width: 27px;\n    height: 27px;\n    fill: currentColor;\n}\n\n.ats-payment-badge {\n    display: inline-block;\n    margin-bottom: 12px;\n    padding: 7px 15px;\n    color: var(--primary);\n    background: rgba(217, 39, 46, 0.08);\n    border-radius: 50px;\n    font-size: 13px;\n    font-weight: 700;\n}\n\n.ats-payment-heading h2 {\n    margin: 0 0 10px;\n    color: var(--text);\n    font-size: clamp(27px, 5vw, 40px);\n    font-weight: 800;\n    line-height: 1.3;\n}\n\n.ats-payment-heading p {\n    max-width: 490px;\n    margin: 0 auto;\n    color: var(--muted);\n    font-size: 15px;\n    line-height: 1.8;\n}\n\n\/* PayPal Form *\/\n.ats-payment-form {\n    width: 100%;\n}\n\n.ats-payment-form form {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    background: transparent !important;\n    border: 0 !important;\n    box-shadow: none !important;\n}\n\n.ats-payment-form form > div,\n.ats-payment-form form > p {\n    width: 100% !important;\n    margin: 0 0 20px !important;\n}\n\n.ats-payment-form label {\n    display: block !important;\n    margin: 0 0 8px !important;\n    color: var(--text) !important;\n    font-size: 14px !important;\n    font-weight: 700 !important;\n    line-height: 1.6 !important;\n    text-align: left !important;\n}\n\n.ats-payment-form input[type=\"text\"],\n.ats-payment-form input[type=\"email\"],\n.ats-payment-form input[type=\"number\"],\n.ats-payment-form input[type=\"tel\"],\n.ats-payment-form select,\n.ats-payment-form textarea {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    min-height: 53px !important;\n    margin: 0 !important;\n    padding: 12px 15px !important;\n    color: var(--text) !important;\n    background: #f8fafc !important;\n    border: 1px solid var(--border) !important;\n    border-radius: 11px !important;\n    outline: none !important;\n    box-shadow: none !important;\n    font-family: inherit !important;\n    font-size: 16px !important;\n    text-align: left !important;\n    transition: 0.25s ease !important;\n}\n\n.ats-payment-form textarea {\n    min-height: 110px !important;\n    resize: vertical;\n}\n\n.ats-payment-form input:focus,\n.ats-payment-form select:focus,\n.ats-payment-form textarea:focus {\n    background: #fff !important;\n    border-color: var(--primary) !important;\n    box-shadow: 0 0 0 4px rgba(217, 39, 46, 0.09) !important;\n}\n\n.ats-payment-form button:not(.paypal-button),\n.ats-payment-form input[type=\"submit\"] {\n    width: 100% !important;\n    min-height: 53px !important;\n    padding: 12px 20px !important;\n    color: #fff !important;\n    background: linear-gradient(\n        135deg,\n        var(--primary),\n        var(--primary-dark)\n    ) !important;\n    border: 0 !important;\n    border-radius: 11px !important;\n    font-family: inherit !important;\n    font-size: 16px !important;\n    font-weight: 700 !important;\n    cursor: pointer !important;\n}\n\n.ats-payment-form iframe,\n.ats-payment-form [id*=\"paypal\"],\n.ats-payment-form [class*=\"paypal\"] {\n    width: 100% !important;\n    max-width: 100% !important;\n}\n\n.ats-payment-security {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 18px;\n    margin-top: 25px;\n    padding-top: 20px;\n    color: var(--muted);\n    border-top: 1px solid var(--border);\n    font-size: 12px;\n}\n\n.ats-security-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.ats-security-item svg {\n    width: 16px;\n    height: 16px;\n    fill: #198754;\n}\n\n@media (max-width: 767px) {\n    .ats-direct-payment {\n        width: calc(100% - 20px);\n        margin: 30px auto;\n        padding: 25px 17px;\n        border-radius: 18px;\n    }\n\n    .ats-payment-heading {\n        margin-bottom: 24px;\n    }\n\n    .ats-payment-heading h2 {\n        font-size: 28px;\n    }\n\n    .ats-payment-heading p {\n        font-size: 14px;\n    }\n\n    .ats-payment-form input[type=\"text\"],\n    .ats-payment-form input[type=\"email\"],\n    .ats-payment-form input[type=\"number\"],\n    .ats-payment-form input[type=\"tel\"],\n    .ats-payment-form select {\n        min-height: 51px !important;\n        font-size: 16px !important;\n    }\n}\n\n@media (max-width: 380px) {\n    .ats-direct-payment {\n        width: calc(100% - 14px);\n        padding: 21px 13px;\n    }\n\n    .ats-payment-heading h2 {\n        font-size: 25px;\n    }\n}\n<\/style>\n\n<section class=\"ats-direct-payment\">\n\n    <div class=\"ats-payment-heading\">\n\n        <div class=\"ats-payment-lock\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M17 8V7a5 5 0 0 0-10 0v1H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2ZM9 7a3 3 0 0 1 6 0v1H9V7Zm4 9.73V18a1 1 0 0 1-2 0v-1.27a2 2 0 1 1 2 0Z\"><\/path>\n            <\/svg>\n        <\/div>\n\n        <span class=\"ats-payment-badge\">\n            Secure Online Payment\n        <\/span>\n\n        <h2>Complete Your Payment<\/h2>\n\n        <p>\n            Enter your invoice number, payment amount, and email address,\n            then choose your preferred payment method.\n        <\/p>\n\n    <\/div>\n\n    <div class=\"ats-payment-form\">\n            <div class=\"container text-center\" style=\"margin-top:30px;\">\n        <div class=\"row\">\n            <div class=\"col-md-3\"><\/div>\n            <div class=\"col-md-6\">\n                <!-- START CODE Attention! Do not modify this code; -->\n                <script>var fm = \"SAR\";var to = \"USD\";var tz = \"4\";var sz = \"1x1\";var lg = \"en\";var st = \"danger\";var lr = \"1\";var rd = \"0\";<\/script>\n                <a href=\"https:\/\/currencyrate.today\/converter-widget\" title=\"Currency Converter\" rel=\"noopener\">\n                    <script src=\"\/\/currencyrate.today\/converter\"><\/script>\n                <\/a>\n                <div style=\"font-size:.8em;\">\n                    <a href=\"https:\/\/currencyrate.today\" rel=\"noopener\">Currency Converter<\/a>\n                <\/div>\n                <!-- Attention! Do not modify this code; END CODE -->        \n            <\/div>\n            <div class=\"col-md-3\"><\/div>\n        <\/div>    \n    <\/div>\n\n    <div id=\"smart-button-container\">\n        <div style=\"text-align: center\">\n            <label for=\"description\">Invoice No.: <\/label>\n            <input type=\"text\" name=\"descriptionInput\" id=\"description\" maxlength=\"127\" value=\"\">\n        <\/div>\n        <p id=\"descriptionError\" style=\"visibility: hidden; color:red; text-align: center;\">Please enter a description<\/p>\n\n        <div style=\"text-align: center\">\n            <label for=\"amount\">The Amount: <\/label>\n            <input name=\"amountInput\" type=\"number\" id=\"amount\" value=\"\">\n            <span> USD<\/span>\n        <\/div>\n        <p id=\"priceLabelError\" style=\"visibility: hidden; color:red; text-align: center;\">Please enter a price<\/p>\n\n        <div id=\"invoiceidDiv\" style=\"text-align: center; display: none;\">\n            <label for=\"invoiceid\">Your Email: <\/label>\n            <input name=\"invoiceid\" maxlength=\"127\" type=\"text\" id=\"invoiceid\" value=\"\">\n        <\/div>\n        <p id=\"invoiceidError\" style=\"visibility: hidden; color:red; text-align: center;\">Please enter an Invoice ID<\/p>\n\n        <div style=\"text-align: center; margin-top: 0.625rem;\" id=\"paypal-button-container\"><\/div>\n    <\/div>\n\n    <script src=\"https:\/\/www.paypal.com\/sdk\/js?client-id=AT6IhPWh86hJkqJVmCZgdz5EjWFqsSZnIbPZE8IiniDT6SLWH3C1HJS4W6QY6We-PHxmXBysJTYfOc7s&currency=USD\" data-sdk-integration-source=\"button-factory\"><\/script>\n    <script>\n    function initPayPalButton() {\n        var description = document.querySelector('#smart-button-container #description');\n        var amount = document.querySelector('#smart-button-container #amount');\n        var descriptionError = document.querySelector('#smart-button-container #descriptionError');\n        var priceError = document.querySelector('#smart-button-container #priceLabelError');\n        var invoiceid = document.querySelector('#smart-button-container #invoiceid');\n        var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');\n        var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');\n\n        var elArr = [description, amount];\n\n        if (invoiceidDiv && invoiceidDiv.firstChild && invoiceidDiv.firstChild.innerHTML && invoiceidDiv.firstChild.innerHTML.length > 1) {\n            invoiceidDiv.style.display = \"block\";\n        }\n\n        var purchase_units = [];\n        purchase_units[0] = {};\n        purchase_units[0].amount = {};\n\n        function validate(event) {\n            return event.value.length > 0;\n        }\n\n        paypal.Buttons({\n            style: {\n                color: 'gold',\n                shape: 'pill',\n                label: 'checkout',\n                layout: 'vertical',\n            },\n\n            onInit: function (data, actions) {\n                actions.disable();\n\n                if(invoiceidDiv.style.display === \"block\") {\n                    elArr.push(invoiceid);\n                }\n\n                elArr.forEach(function (item) {\n                    if (item) {\n                        item.addEventListener('keyup', function (event) {\n                            var result = elArr.every(validate);\n                            if (result) {\n                                actions.enable();\n                            } else {\n                                actions.disable();\n                            }\n                        });\n                    }\n                });\n            },\n\n            onClick: function () {\n                if (description.value.length < 1) {\n                    descriptionError.style.visibility = \"visible\";\n                } else {\n                    descriptionError.style.visibility = \"hidden\";\n                }\n\n                if (amount.value.length < 1) {\n                    priceError.style.visibility = \"visible\";\n                } else {\n                    priceError.style.visibility = \"hidden\";\n                }\n\n                if (invoiceid.value.length < 1 && invoiceidDiv.style.display === \"block\") {\n                    invoiceidError.style.visibility = \"visible\";\n                } else {\n                    invoiceidError.style.visibility = \"hidden\";\n                }\n\n                purchase_units[0].description = description.value;\n                purchase_units[0].amount.value = amount.value;\n\n                if(invoiceid.value !== '') {\n                    purchase_units[0].invoice_id = invoiceid.value;\n                }\n            },\n\n            createOrder: function (data, actions) {\n                return actions.order.create({\n                    purchase_units: purchase_units,\n                });\n            },\n\n            onApprove: function (data, actions) {\n                return actions.order.capture().then(function (details) {\n                    alert('Transaction completed by ' + details.payer.name.given_name + '!');\n                });\n            },\n\n            onError: function (err) {\n                console.log(err);\n            }\n        }).render('#paypal-button-container');\n    }\n    initPayPalButton();\n    <\/script>\n    \n    <\/div>\n\n    <div class=\"ats-payment-security\">\n\n        <span class=\"ats-security-item\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M12 2 4 5v6c0 5.05 3.41 9.76 8 11 4.59-1.24 8-5.95 8-11V5l-8-3Zm-1 14-4-4 1.41-1.41L11 13.17l4.59-4.58L17 10l-6 6Z\"><\/path>\n            <\/svg>\n            Your Information Is Protected\n        <\/span>\n\n        <span class=\"ats-security-item\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M21 4H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 14H3v-6h18v6Zm0-10H3V6h18v2Z\"><\/path>\n            <\/svg>\n            Secure Payment via PayPal\n        <\/span>\n\n    <\/div>\n\n<\/section>\n&#8220;`\n","protected":false},"excerpt":{"rendered":"<p>&#8220;`html Secure Online Payment Complete Your Payment Enter your invoice number, payment amount, and email address, then choose your preferred payment method. Your Information Is Protected Secure Payment via PayPal &#8220;`<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-10077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/pages\/10077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/comments?post=10077"}],"version-history":[{"count":1,"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/pages\/10077\/revisions"}],"predecessor-version":[{"id":10078,"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/pages\/10077\/revisions\/10078"}],"wp:attachment":[{"href":"https:\/\/alsuntranslation-riyadh.com\/en\/wp-json\/wp\/v2\/media?parent=10077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}