{"id":5743,"date":"2025-12-01T14:06:07","date_gmt":"2025-12-01T14:06:07","guid":{"rendered":"https:\/\/albaytplastic.com\/?page_id=5743"},"modified":"2026-01-11T17:24:12","modified_gmt":"2026-01-11T17:24:12","slug":"afs-pay","status":"publish","type":"page","link":"https:\/\/albaytplastic.com\/ar\/afs-pay\/","title":{"rendered":"AFS PAY"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"5743\" class=\"elementor elementor-5743\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae2f2da e-flex e-con-boxed e-con e-parent\" data-id=\"ae2f2da\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-039b0be elementor-widget elementor-widget-html\" data-id=\"039b0be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"px-5\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">Complete Your Payment<\/h5>\n        <div class=\"text-right\">\n            <large class=\"\">Payments protected by<\/large>\n            <img decoding=\"async\" src=\"https:\/\/albaytplastic.com\/wp-content\/uploads\/2026\/01\/pngegg.png\" alt=\"Mastercard\"\n                style=\"height: 100px; margin-top: 5px;\">\n        <\/div>\n    <\/div>\n    <div id=\"hco-embedded\" style=\"width: 100%;\">\n        <div class=\"text-center py-5\" id=\"loading-indicator\">\n            <div class=\"spinner-border text-primary\" role=\"status\">\n                <span class=\"sr-only\">Loading...<\/span>\n            <\/div>\n            <p class=\"mt-3 text-muted\">Loading payment form...<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.2\/dist\/js\/bootstrap.min.js\"><\/script>\n<script src=\"https:\/\/afs.gateway.mastercard.com\/static\/checkout\/checkout.min.js\" \n        data-error=\"errorCallback\" \n        data-cancel=\"cancelCallback\"\n        data-complete=\"completeCallback\"\n        data-timeout=\"timeoutCallback\">\n<\/script>\n\n<script>\n    \/\/ Get base URL for callbacks\n    const baseUrl = window.location.origin;\n    \n    \/\/ Get URL parameters once at the top\n    const urlParams = new URLSearchParams(window.location.search);\n    const sessionId = urlParams.get('session_id');\n    const orderId = urlParams.get('order_id');\n    \n    console.log(\"Session ID from URL:\", sessionId);\n    console.log(\"Order ID from URL:\", orderId);\n    console.log(\"Base URL:\", baseUrl);\n\n    \/**\n     * Handle successful payment completion\n     *\/\n    function completeCallback(response) {\n        console.log('Payment completed');\n        console.log('Result Indicator:', response.resultIndicator);\n        console.log('Session Version:', response.sessionVersion);\n        \n        \/\/ Redirect to WooCommerce API callback handler for verification\n        const callbackUrl = baseUrl + '\/?wc-api=afs_gateway&order_id=' + orderId + '&resultIndicator=' + encodeURIComponent(response.resultIndicator);\n        console.log('Redirecting to:', callbackUrl);\n        window.location.href = callbackUrl;\n    }\n\n    \/**\n     * Handle payment errors during checkout initiation\n     *\/\n    function errorCallback(error) {\n        console.error('Payment error:', JSON.stringify(error));\n        \n        let userMessage = '';\n        let shouldRetry = false;\n        let technicalDetails = '';\n        \n        \/\/ Parse the error object and determine user-friendly message\n        if (error && error.cause) {\n            technicalDetails = error.explanation || error.cause;\n            \n            switch(error.cause) {\n                case 'INVALID_REQUEST':\n                    userMessage = 'There was a problem with your payment information. Please check your details and try again.';\n                    shouldRetry = true;\n                    break;\n                    \n                case 'SERVER_BUSY':\n                    userMessage = 'Our payment system is currently busy. Please wait a moment and try again.';\n                    shouldRetry = true;\n                    break;\n                    \n                case 'SERVER_FAILED':\n                    userMessage = 'A technical error occurred on our payment system. Please try again in a few moments.';\n                    shouldRetry = true;\n                    break;\n                    \n                case 'REQUEST_REJECTED':\n                    userMessage = 'Your payment request was rejected for security reasons. Please contact support if this continues.';\n                    shouldRetry = false;\n                    break;\n                    \n                default:\n                    userMessage = 'An unexpected error occurred while processing your payment.';\n                    shouldRetry = true;\n            }\n        } else if (error && error.error) {\n            \/\/ Handle different error formats\n            technicalDetails = error.error;\n            userMessage = 'Unable to process your payment at this time.';\n            shouldRetry = true;\n        } else {\n            userMessage = 'Unable to load the payment form. The session may have expired.';\n            shouldRetry = true;\n        }\n        \n        \/\/ Display error to user\n        displayPaymentError(userMessage, shouldRetry, technicalDetails, 'ERROR');\n    }\n\n    \/**\n     * Handle user cancellation\n     *\/\n    function cancelCallback() {\n        console.log('Payment cancelled by user');\n        displayPaymentError(\n            'You cancelled the payment process.',\n            true,\n            'User initiated cancellation',\n            'CANCELLED'\n        );\n    }\n\n    \/**\n     * Handle payment timeout\n     *\/\n    function timeoutCallback() {\n        console.log('Payment session timed out');\n        displayPaymentError(\n            'Your payment session has expired due to inactivity.',\n            true,\n            'Session timeout reached',\n            'TIMEOUT'\n        );\n    }\n\n    \/**\n     * Display error message to user with appropriate actions\n     *\/\n    function displayPaymentError(message, canRetry, technicalDetails, errorType) {\n        \/\/ Hide loading indicator\n        $('#loading-indicator').remove();\n        \n        \/\/ Determine icon based on error type\n        let iconClass = 'fa-exclamation-triangle';\n        let alertClass = 'alert-danger';\n        \n        if (errorType === 'CANCELLED') {\n            iconClass = 'fa-times-circle';\n            alertClass = 'alert-warning';\n        } else if (errorType === 'TIMEOUT') {\n            iconClass = 'fa-clock';\n            alertClass = 'alert-warning';\n        }\n        \n        \/\/ Get checkout URL - construct from base URL\n        const checkoutUrl = baseUrl + '\/checkout\/';\n        \n        \/\/ Create error message HTML\n        let errorHtml = `\n            <div class=\"alert ${alertClass} m-3\" role=\"alert\">\n                <h5 class=\"alert-heading\">\n                    <i class=\"fas ${iconClass}\"><\/i> ${errorType === 'CANCELLED' ? 'Payment Cancelled' : errorType === 'TIMEOUT' ? 'Session Expired' : 'Payment Error'}\n                <\/h5>\n                <p class=\"mb-2\"><strong>${message}<\/strong><\/p>\n                ${canRetry ? '<p class=\"mb-0\">Would you like to try again?<\/p>' : '<p class=\"mb-0\">Please return to checkout to try a different payment method.<\/p>'}\n                <hr>\n                <div class=\"mt-3\">\n                    ${canRetry ? '<button class=\"btn btn-primary mr-2\" onclick=\"retryPayment()\"><i class=\"fas fa-redo\"><\/i> Try Again<\/button>' : ''}\n                    <button class=\"btn btn-secondary\" onclick=\"returnToCheckout()\"><i class=\"fas fa-arrow-left\"><\/i> Return to Checkout<\/button>\n                <\/div>\n                ${technicalDetails ? `<details class=\"mt-3\"><summary class=\"text-muted\" style=\"cursor: pointer; font-size: 0.9em;\">Technical Details<\/summary><pre class=\"mt-2 p-2 bg-light\" style=\"font-size: 0.8em;\">${technicalDetails}<\/pre><\/details>` : ''}\n            <\/div>\n        `;\n        \n        \/\/ Show error in the payment container\n        document.getElementById(\"hco-embedded\").innerHTML = errorHtml;\n        \n        \/\/ Log full error details for debugging\n        logPaymentError({\n            type: errorType,\n            message: message,\n            technical: technicalDetails,\n            orderId: orderId,\n            sessionId: sessionId,\n            timestamp: new Date().toISOString()\n        });\n    }\n\n    \/**\n     * Retry payment by reloading the page\n     *\/\n    function retryPayment() {\n        \/\/ Show loading state\n        document.getElementById(\"hco-embedded\").innerHTML = `\n            <div class=\"text-center py-5\">\n                <div class=\"spinner-border text-primary\" role=\"status\">\n                    <span class=\"sr-only\">Loading...<\/span>\n                <\/div>\n                <p class=\"mt-3 text-muted\">Reloading payment form...<\/p>\n            <\/div>\n        `;\n        \n        \/\/ Reload the page to get a new session\n        setTimeout(function() {\n            window.location.reload();\n        }, 500);\n    }\n\n    \/**\n     * Return to WooCommerce checkout page\n     *\/\n    function returnToCheckout() {\n        const checkoutUrl = baseUrl + '\/checkout\/';\n        console.log('Returning to checkout:', checkoutUrl);\n        window.location.href = checkoutUrl;\n    }\n\n    \/**\n     * Log payment errors for debugging and monitoring\n     *\/\n    function logPaymentError(errorDetails) {\n        \/\/ Console log for immediate debugging\n        console.group('Payment Error Details');\n        console.log('Type:', errorDetails.type);\n        console.log('Message:', errorDetails.message);\n        console.log('Technical:', errorDetails.technical);\n        console.log('Order ID:', errorDetails.orderId);\n        console.log('Session ID:', errorDetails.sessionId);\n        console.log('Timestamp:', errorDetails.timestamp);\n        console.groupEnd();\n    }\n\n    \/**\n     * Initialize the Checkout when page loads\n     *\/\n    $(document).ready(function () {\n        \/\/ Validate required parameters\n        if (!sessionId) {\n            displayPaymentError(\n                'No payment session was found in the URL.',\n                false,\n                'Missing session_id parameter',\n                'ERROR'\n            );\n            console.error(\"Missing session_id parameter\");\n            return;\n        }\n        \n        if (!orderId) {\n            displayPaymentError(\n                'No order information was found.',\n                false,\n                'Missing order_id parameter',\n                'ERROR'\n            );\n            console.error(\"Missing order_id parameter\");\n            return;\n        }\n        \n        console.log(\"Configuring Checkout with session ID:\", sessionId);\n        \n        try {\n            \/\/ Configure the Checkout SDK\n            Checkout.configure({\n                session: {\n                    id: sessionId\n                }\n            });\n            \n            \/\/ Show the embedded payment page\n            Checkout.showEmbeddedPage('#hco-embedded');\n            \n            \/\/ Hide loading indicator once payment form loads\n            setTimeout(function () {\n                $('#loading-indicator').fadeOut(300);\n            }, 1000);\n            \n        } catch (error) {\n            console.error(\"Checkout configuration error:\", error);\n            displayPaymentError(\n                'Unable to load the payment form. This session may have expired or already been used.',\n                true,\n                error.message || error.toString(),\n                'ERROR'\n            );\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Complete Your Payment Payments protected by Loading&#8230; Loading payment form&#8230;<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5743","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/pages\/5743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/comments?post=5743"}],"version-history":[{"count":96,"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/pages\/5743\/revisions"}],"predecessor-version":[{"id":5893,"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/pages\/5743\/revisions\/5893"}],"wp:attachment":[{"href":"https:\/\/albaytplastic.com\/ar\/wp-json\/wp\/v2\/media?parent=5743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}