{"id":449,"date":"2020-03-21T17:14:25","date_gmt":"2020-03-21T17:14:25","guid":{"rendered":"https:\/\/www.avignon-prestigetour.com\/online-payment\/"},"modified":"2020-03-21T17:14:25","modified_gmt":"2020-03-21T17:14:25","slug":"online-payment","status":"publish","type":"page","link":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/","title":{"rendered":"Online payment"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_row column_structure=&#8221;1_2,1_2&#8243; _builder_version=&#8221;4.4.1&#8243; custom_margin=&#8221;|auto||auto|false|false&#8221; custom_padding=&#8221;0px||0px|||&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_text _builder_version=&#8221;4.4.1&#8243;]<\/p>\n<p>You can make a payment online either by bank transfer, by completing the form below (You will receive an email with all the necessary instructions) or by Paypal on the right.<\/p>\n<p>[\/et_pb_text][et_pb_code _builder_version=&#8221;4.4.1&#8243; hover_enabled=&#8221;0&#8243;]<div class=\"wpforms-container wpforms-container-full\" id=\"wpforms-151\"><form id=\"wpforms-form-151\" class=\"wpforms-validate wpforms-form\" data-formid=\"151\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/en\/wp-json\/wp\/v2\/pages\/449\" data-token=\"15203c2f59a57b28801adf082e8aec8b\"><noscript class=\"wpforms-error-noscript\">Please enable JavaScript in your browser to complete this form.<\/noscript><div class=\"wpforms-field-container\"><div id=\"wpforms-151-field_1-container\" class=\"wpforms-field wpforms-field-text wpforms-one-half wpforms-first\" data-field-id=\"1\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_1\">Nom <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"text\" id=\"wpforms-151-field_1\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][1]\" placeholder=\"Nom\" required><\/div><div id=\"wpforms-151-field_2-container\" class=\"wpforms-field wpforms-field-text wpforms-one-half\" data-field-id=\"2\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_2\">Pr\u00e9nom<\/label><input type=\"text\" id=\"wpforms-151-field_2\" class=\"wpforms-field-medium\" name=\"wpforms[fields][2]\" placeholder=\"Pr\u00e9nom\" ><\/div><div id=\"wpforms-151-field_3-container\" class=\"wpforms-field wpforms-field-email\" data-field-id=\"3\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_3\">E-mail <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"email\" id=\"wpforms-151-field_3\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][3]\" placeholder=\"E-mail\" spellcheck=\"false\" required><\/div><div id=\"wpforms-151-field_4-container\" class=\"wpforms-field wpforms-field-checkbox\" data-field-id=\"4\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_4\">Cases \u00e0 cocher <span class=\"wpforms-required-label\">*<\/span><\/label><ul id=\"wpforms-151-field_4\" class=\"wpforms-field-required\"><li class=\"choice-1 depth-1\"><input type=\"checkbox\" id=\"wpforms-151-field_4_1\" name=\"wpforms[fields][4][]\" value=\"Je souhaite recevoir les instructions pour effectuer un virement bancaire\" required ><label class=\"wpforms-field-label-inline\" for=\"wpforms-151-field_4_1\">Je souhaite recevoir les instructions pour effectuer un virement bancaire<\/label><\/li><\/ul><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-field wpforms-field-hp\"><label for=\"wpforms-151-field-hp\" class=\"wpforms-field-label\">Name<\/label><input type=\"text\" name=\"wpforms[hp]\" id=\"wpforms-151-field-hp\" class=\"wpforms-field-medium\"><\/div><div class=\"wpforms-recaptcha-container wpforms-is-recaptcha\" ><div class=\"g-recaptcha\" data-sitekey=\"6LdvjwgTAAAAAKfjN1U7gzk8FyPGEDfZOJGN7lA2\"><\/div><input type=\"text\" name=\"g-recaptcha-hidden\" class=\"wpforms-recaptcha-hidden\" style=\"position:absolute!important;clip:rect(0,0,0,0)!important;height:1px!important;width:1px!important;border:0!important;overflow:hidden!important;padding:0!important;margin:0!important;\" data-rule-recaptcha=\"1\"><\/div><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"151\"><input type=\"hidden\" name=\"wpforms[author]\" value=\"1\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-151\" class=\"wpforms-submit\" data-alt-text=\"Envoi...\" data-submit-text=\"Envoyer\" aria-live=\"assertive\" value=\"wpforms-submit\">Envoyer<\/button><\/div><\/form><\/div>  <!-- .wpforms-container -->[\/et_pb_code][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.4.1&#8243;][et_pb_code _builder_version=&#8221;4.4.1&#8243; text_orientation=&#8221;center&#8221;]<div class=\"wpapp_widget\"><div id=\"elements_wrapper_wpapp_paypal_button_0\"><div class=\"wpapp_payment_subject\"><span class=\"payment_subject\"><strong>Paypal<\/strong><\/span><\/div><select id=\"select_wpapp_paypal_button_0\" name=\"select_wpapp_paypal_button_0\" class=\"\"><\/select><div class=\"wpapp_other_amount_label\"><strong>Other Amount<\/strong><\/div><div class=\"wpapp_other_amount_input\"><input type=\"number\" min=\"1\" step=\"any\" name=\"wpapp_other_amt\" title=\"Other Amount\" value=\"\" placeholder=\"\" class=\"wpapp_other_amt_input\" style=\"max-width:80px;\" \/><\/div><div class=\"wpapp_ref_title_label\"><strong>Your Email Address:<\/strong><\/div><div class=\"wpapp_ref_value\"><input type=\"text\" name=\"wpapp_button_reference\" maxlength=\"60\" value=\"\" placeholder=\"\" class=\"wp_pp_button_reference\" \/><\/div><div style=\"margin-bottom:10px;\"><\/div><\/div>    <div class=\"wpapp-ppcp-button-wrapper\">\n\n    <!-- PayPal button container where the button will be rendered -->\n    <div id=\"wpapp_paypal_button_0\" style=\"width: 250px;\"><\/div>\n\n    <script type=\"text\/javascript\">\n        document.addEventListener( \"wpapp_paypal_sdk_loaded\", function() { \n            \/\/Anything that goes here will only be executed after the PayPal SDK is loaded.\n            console.log('PayPal JS SDK is loaded for WPAPP.');\n\n            \/**\n             * See documentation: https:\/\/developer.paypal.com\/sdk\/js\/reference\/\n             *\/\n            paypal.Buttons({\n                \/**\n                 * Optional styling for buttons.\n                 * \n                 * See documentation: https:\/\/developer.paypal.com\/sdk\/js\/reference\/#link-style\n                 *\/\n                style: {\n                    color: 'blue',\n                    shape: 'rect',\n                    height: 35,\n                    label: 'checkout',\n                    layout: 'vertical',\n                },\n\n                \/\/ Triggers when the button first renders.\n                onInit: onInitHandler,\n\n                \/\/ Triggers when the button is clicked.\n                onClick: onClickHandler,\n\n                \/\/ Setup the transaction.\n                createOrder: createOrderHandler,\n\n                \/\/ Handle the onApprove event.\n                onApprove: onApproveHandler,\n\n                \/\/ Handle unrecoverable errors.\n                onError: onErrorHandler,\n\n                \/\/ Handles onCancel event.\n                onCancel: onCancelHandler,\n\n            })\n            .render('#wpapp_paypal_button_0')\n            .catch((err) => {\n                console.error('PayPal Buttons failed to render');\n            });\n\n            function onInitHandler(data, actions) {\n                \/\/This function is called when the button first renders.\n            }\n\n            function onClickHandler(data, actions) {\n                \/\/This function is called when the button is clicked.\n            }\n\n            \n            \/**\n             * See documentation: https:\/\/developer.paypal.com\/sdk\/js\/reference\/#link-createorder\n             *\/\n            async function createOrderHandler() {\n                \/\/ Create the order in PayPal using the PayPal API.\n                \/\/ https:\/\/developer.paypal.com\/docs\/checkout\/standard\/integrate\/\n                \/\/ The server-side Create Order API is used to generate the Order. Then the Order-ID is returned.                    \n                console.log('Setting up the AJAX request for create-order call.');\n\n                \/\/ First, select the interacted button's wrapper div by its ID (so  we can target various elements within it)\n                const wrapper_div_interacted_button = document.getElementById('elements_wrapper_wpapp_paypal_button_0');\n                \/\/console.log(wrapper_div_interacted_button);\n\n                \/\/ Read the select element and get the selected option's value and text.\n                js_on_page_embed_button_id = 'wpapp_paypal_button_0';\n                var selectId = 'select_' + js_on_page_embed_button_id; \/\/ Construct the select ID\n                var selectElement = document.getElementById(selectId);\n                \/\/console.log(\"Select Element: \", selectElement);\n\n                \/\/Get the other amount field value.\n                var other_amount_input = wrapper_div_interacted_button.querySelector('.wpapp_other_amt_input');\n\n                \/\/Get the reference field value.\n                var pp_reference_field = wrapper_div_interacted_button.querySelector('.wp_pp_button_reference');\n\n                let pp_bn_data = {};\n                pp_bn_data.transient_name = '69f188c8478da_wpapp_paypal_button_0';\n                pp_bn_data.on_page_button_id = 'wpapp_paypal_button_0';\n                pp_bn_data.selected_val = selectElement.value;\/\/value of the selected option. (we can use it get the item name from the transient).\n                pp_bn_data.other_amount_val = other_amount_input ? other_amount_input.value : '';\n                pp_bn_data.pp_reference_field = pp_reference_field ? pp_reference_field.value : '';\n                console.log('WPAPP Button Data Below');\n                console.log(pp_bn_data);\n\n                \/\/Ajax action: <prefix>_pp_create_order \n                let post_data = 'action=wpapp_pp_create_order&data=' + JSON.stringify(pp_bn_data) + '&_wpnonce=d305e2f24d';\n                \/\/console.log('Post Data: ', post_data);\/\/Debugging purposes only.\n\n                try {\n                    \/\/ Using fetch for AJAX request. This is supported in all modern browsers.\n                    const response = await fetch(\"https:\/\/www.avignon-prestigetour.com\/wp-admin\/admin-ajax.php\", {\n                        method: \"post\",\n                        headers: {\n                            'Content-Type': 'application\/x-www-form-urlencoded'\n                        },\n                        body: post_data\n                    });\n\n                    const response_data = await response.json();\n\n                    if (response_data.order_id) {\n                        console.log('Create-order API call to PayPal completed successfully.');\n                        \/\/If we need to see the order details, uncomment the following line.\n                        \/\/const order_data = response_data.order_data;\n                        \/\/console.log('Order data: ' + JSON.stringify(order_data));\n                        return response_data.order_id;\n                    } else {\n                        const error_message = JSON.stringify(response_data);\n                        console.error('Error occurred during create-order call to PayPal. ' + error_message);\n                        throw new Error(error_message);\n                    }\n                } catch (error) {\n                    console.error(error);\n                    alert('Could not initiate PayPal Checkout...\\n\\n' + JSON.stringify(error));\n                }\n            }\n\n            async function onApproveHandler(data, actions) {\n                console.log('Successfully created a transaction.');\n\n                \/\/ Show the spinner while we process this transaction.\n                \/\/ First, select the button container by its ID.\n                const pp_button_container = document.getElementById('wpapp_paypal_button_0');\n                \/\/ Then, navigate to the parent element of the PPCP button container.\n                const parent_wrapper = pp_button_container.parentElement;\n                \/\/ Finally, within the parent wrapper, select the spinner container\n                const pp_button_spinner_container = parent_wrapper.querySelector('.wpapp-pp-button-spinner-container');\n                \/\/console.log('Button spinner container: ', pp_button_spinner_container);\n\n                pp_button_container.style.display = 'none'; \/\/Hide the buttons\n                pp_button_spinner_container.style.display = 'inline-block'; \/\/Show the spinner.\n\n                \/\/ Capture the order in PayPal using the PayPal API.\n                \/\/ https:\/\/developer.paypal.com\/docs\/checkout\/standard\/integrate\/\n                \/\/ The server-side capture-order API is used. Then the Capture-ID is returned.\n                console.log('Setting up the AJAX request for capture-order call.');\n                let pp_bn_data = {};\n                pp_bn_data.order_id = data.orderID;\n                pp_bn_data.on_page_button_id = 'wpapp_paypal_button_0';\n                pp_bn_data.transient_name = '69f188c8478da_wpapp_paypal_button_0';\n                \/\/pp_bn_data.custom_field = encodeURIComponent(custom_data);\/\/If you have any custom data to send to the server (it needs to be URI encoded so special characters are not lost.)\n\n                \/\/Ajax action: <prefix>_pp_capture_order\n                let post_data = 'action=wpapp_pp_capture_order&data=' + JSON.stringify(pp_bn_data) + '&_wpnonce=d305e2f24d';\n                try {\n                    const response = await fetch(\"https:\/\/www.avignon-prestigetour.com\/wp-admin\/admin-ajax.php\", {\n                        method: \"post\",\n                        headers: {\n                            'Content-Type': 'application\/x-www-form-urlencoded'\n                        },\n                        body: post_data\n                    });\n\n                    const response_data = await response.json();\n                    const txn_data = response_data.txn_data;\n                    const error_detail = txn_data?.details?.[0];\n                    const error_msg = response_data.error_msg;\/\/Our custom error message.\n                    \/\/ Three cases to handle:\n                    \/\/ (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()\n                    \/\/ (2) Other non-recoverable errors -> Show a failure message\n                    \/\/ (3) Successful transaction -> Show confirmation or thank you message\n\n                    if (response_data.capture_id) {\n                        \/\/ Successful transaction -> Show confirmation or thank you message\n                        console.log('Capture-order API call to PayPal completed successfully.');\n\n                        \/\/Redirect to the Thank you page URL if it is set.\n                        return_url = 'https:\/\/avignon-prestigetour.com';\n                        if( return_url ){\n                            \/\/redirect to the Thank you page URL.\n                            console.log('Redirecting to the Thank you page URL: ' + return_url);\n                            window.location.href = return_url;\n                            return;\n                        } else {\n                            \/\/No return URL is set. Just show a success message.\n                            console.log('No return URL is set in the settings. Showing a success message.');\n\n                            \/\/We are going to show the success message in the wpapp-ppcp-button-wrapper's container.\n                            txn_success_msg = 'Transaction completed successfully! Feel free to browse our site for another checkout.';\n                            \/\/ Select all elements with the class 'wpapp-ppcp-button-wrapper'\n                            var button_divs = document.querySelectorAll('.wpapp-ppcp-button-wrapper');\n\n                            \/\/ Loop through the NodeList and update each element\n                            button_divs.forEach(function(div, index) {\n                                div.innerHTML = '<div id=\"wpapp-btn-txn-success-msg-' + index + '\" class=\"wpapp-btn-txn-success-msg\">' + txn_success_msg + '<\/div>';\n                            });\n\n                            \/\/ Scroll to the success message container of the button we are interacting with.\n                            const interacted_button_container_element = document.getElementById(elements_wrapper_wpapp_paypal_button_0);\n                            if (interacted_button_container_element) {\n                                interacted_button_container_element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                            }\n                            return;\n                        }\n\n                    } else if (error_detail?.issue === \"INSTRUMENT_DECLINED\") {\n                        \/\/ Recoverable INSTRUMENT_DECLINED -> call actions.restart()\n                        console.log('Recoverable INSTRUMENT_DECLINED error. Calling actions.restart()');\n                        return actions.restart();\n                    } else if ( error_msg && error_msg.trim() !== '' ) {\n                        \/\/Our custom error message from the server.\n                        console.error('Error occurred during PayPal checkout process.');\n                        console.error( error_msg );\n                        alert( error_msg );\n                    } else {\n                        \/\/ Other non-recoverable errors -> Show a failure message\n                        console.error('Non-recoverable error occurred during PayPal checkout process.');\n                        console.error( error_detail );\n                        \/\/alert('Unexpected error occurred with the transaction. Enable debug logging to get more details.\\n\\n' + JSON.stringify(error_detail));\n                    }\n\n                    \/\/Return the button and the spinner back to their orignal display state.\n                    pp_button_container.style.display = 'block'; \/\/ Show the buttons\n                    pp_button_spinner_container.style.display = 'none'; \/\/ Hide the spinner\n\n                } catch (error) {\n                    console.error(error);\n                    alert('PayPal returned an error! Transaction could not be processed. Enable the debug logging feature to get more details...\\n\\n' + JSON.stringify(error));\n                }\n            }\n\n            function onErrorHandler(err) {\n                console.error('An error prevented the user from checking out with PayPal. ' + JSON.stringify(err));\n                alert( 'Error occurred during PayPal checkout process.\\n\\n' + JSON.stringify(err) );\n            }\n            \n            function onCancelHandler (data) {\n                console.log('Checkout operation cancelled by the customer.');\n                \/\/Return to the parent page which the button does by default.\n            }            \n\n        });\n    <\/script>\n\n    <style>\n        @keyframes wpapp-pp-button-spinner {\n            to {transform: rotate(360deg);}\n        }\n        .wpapp-pp-button-spinner {\n            margin: 0 auto;\n            text-indent: -9999px;\n            vertical-align: middle;\n            box-sizing: border-box;\n            position: relative;\n            width: 60px;\n            height: 60px;\n            border-radius: 50%;\n            border: 5px solid #ccc;\n            border-top-color: #0070ba;\n            animation: wpapp-pp-button-spinner .6s linear infinite;\n        }\n        .wpapp-pp-button-spinner-container {\n            width: 100%;\n            text-align: center;\n            margin-top:10px;\n            display: none;\n        }\n    <\/style>\n    <div class=\"wpapp-pp-button-spinner-container\">\n        <div class=\"wpapp-pp-button-spinner\"><\/div>\n    <\/div>    \n    <\/div><!-- end of button-wrapper -->\n    <\/div>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can make a payment online either by bank transfer, by completing the form below (You will receive an email with all the necessary instructions) or by Paypal on the right.<div class=\"wpforms-container wpforms-container-full\" id=\"wpforms-151\"><form id=\"wpforms-form-151\" class=\"wpforms-validate wpforms-form\" data-formid=\"151\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/en\/wp-json\/wp\/v2\/pages\/449\" data-token=\"15203c2f59a57b28801adf082e8aec8b\"><noscript class=\"wpforms-error-noscript\">Please enable JavaScript in your browser to complete this form.<\/noscript><div class=\"wpforms-field-container\"><div id=\"wpforms-151-field_1-container\" class=\"wpforms-field wpforms-field-text wpforms-one-half wpforms-first\" data-field-id=\"1\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_1\">Nom <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"text\" id=\"wpforms-151-field_1\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][1]\" placeholder=\"Nom\" required><\/div><div id=\"wpforms-151-field_2-container\" class=\"wpforms-field wpforms-field-text wpforms-one-half\" data-field-id=\"2\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_2\">Pr\u00e9nom<\/label><input type=\"text\" id=\"wpforms-151-field_2\" class=\"wpforms-field-medium\" name=\"wpforms[fields][2]\" placeholder=\"Pr\u00e9nom\" ><\/div><div id=\"wpforms-151-field_3-container\" class=\"wpforms-field wpforms-field-email\" data-field-id=\"3\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_3\">E-mail <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"email\" id=\"wpforms-151-field_3\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][3]\" placeholder=\"E-mail\" spellcheck=\"false\" required><\/div><div id=\"wpforms-151-field_4-container\" class=\"wpforms-field wpforms-field-checkbox\" data-field-id=\"4\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-151-field_4\">Cases \u00e0 cocher <span class=\"wpforms-required-label\">*<\/span><\/label><ul id=\"wpforms-151-field_4\" class=\"wpforms-field-required\"><li class=\"choice-1 depth-1\"><input type=\"checkbox\" id=\"wpforms-151-field_4_1\" name=\"wpforms[fields][4][]\" value=\"Je souhaite recevoir les instructions pour effectuer un virement bancaire\" required ><label class=\"wpforms-field-label-inline\" for=\"wpforms-151-field_4_1\">Je souhaite recevoir les instructions pour effectuer un virement bancaire<\/label><\/li><\/ul><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-field wpforms-field-hp\"><label for=\"wpforms-151-field-hp\" class=\"wpforms-field-label\">Email<\/label><input type=\"text\" name=\"wpforms[hp]\" id=\"wpforms-151-field-hp\" class=\"wpforms-field-medium\"><\/div><div class=\"wpforms-recaptcha-container wpforms-is-recaptcha\" ><div class=\"g-recaptcha\" data-sitekey=\"6LdvjwgTAAAAAKfjN1U7gzk8FyPGEDfZOJGN7lA2\"><\/div><input type=\"text\" name=\"g-recaptcha-hidden\" class=\"wpforms-recaptcha-hidden\" style=\"position:absolute!important;clip:rect(0,0,0,0)!important;height:1px!important;width:1px!important;border:0!important;overflow:hidden!important;padding:0!important;margin:0!important;\" data-rule-recaptcha=\"1\"><\/div><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"151\"><input type=\"hidden\" name=\"wpforms[author]\" value=\"1\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-151\" class=\"wpforms-submit\" data-alt-text=\"Envoi...\" data-submit-text=\"Envoyer\" aria-live=\"assertive\" value=\"wpforms-submit\">Envoyer<\/button><\/div><\/form><\/div>  <!-- .wpforms-container --><div class=\"wpapp_widget\"><div id=\"elements_wrapper_wpapp_paypal_button_1\"><div class=\"wpapp_payment_subject\"><span class=\"payment_subject\"><strong>Paypal<\/strong><\/span><\/div><select id=\"select_wpapp_paypal_button_1\" name=\"select_wpapp_paypal_button_1\" class=\"\"><\/select><div class=\"wpapp_other_amount_label\"><strong>Other Amount<\/strong><\/div><div class=\"wpapp_other_amount_input\"><input type=\"number\" min=\"1\" step=\"any\" name=\"wpapp_other_amt\" title=\"Other Amount\" value=\"\" placeholder=\"\" class=\"wpapp_other_amt_input\" style=\"max-width:80px;\" \/><\/div><div class=\"wpapp_ref_title_label\"><strong>Your Email Address:<\/strong><\/div><div class=\"wpapp_ref_value\"><input type=\"text\" name=\"wpapp_button_reference\" maxlength=\"60\" value=\"\" placeholder=\"\" class=\"wp_pp_button_reference\" \/><\/div><div style=\"margin-bottom:10px;\"><\/div><\/div>    <div class=\"wpapp-ppcp-button-wrapper\">\n\n    <!-- PayPal button container where the button will be rendered -->\n    <div id=\"wpapp_paypal_button_1\" style=\"width: 250px;\"><\/div>\n\n    <script type=\"text\/javascript\">\n        document.addEventListener( \"wpapp_paypal_sdk_loaded\", function() { \n            \/\/Anything that goes here will only be executed after the PayPal SDK is loaded.\n            console.log('PayPal JS SDK is loaded for WPAPP.');\n\n            \/**\n             * See documentation: https:\/\/developer.paypal.com\/sdk\/js\/reference\/\n             *\/\n            paypal.Buttons({\n                \/**\n                 * Optional styling for buttons.\n                 * \n                 * See documentation: https:\/\/developer.paypal.com\/sdk\/js\/reference\/#link-style\n                 *\/\n                style: {\n                    color: 'blue',\n                    shape: 'rect',\n                    height: 35,\n                    label: 'checkout',\n                    layout: 'vertical',\n                },\n\n                \/\/ Triggers when the button first renders.\n                onInit: onInitHandler,\n\n                \/\/ Triggers when the button is clicked.\n                onClick: onClickHandler,\n\n                \/\/ Setup the transaction.\n                createOrder: createOrderHandler,\n\n                \/\/ Handle the onApprove event.\n                onApprove: onApproveHandler,\n\n                \/\/ Handle unrecoverable errors.\n                onError: onErrorHandler,\n\n                \/\/ Handles onCancel event.\n                onCancel: onCancelHandler,\n\n            })\n            .render('#wpapp_paypal_button_1')\n            .catch((err) => {\n                console.error('PayPal Buttons failed to render');\n            });\n\n            function onInitHandler(data, actions) {\n                \/\/This function is called when the button first renders.\n            }\n\n            function onClickHandler(data, actions) {\n                \/\/This function is called when the button is clicked.\n            }\n\n            \n            \/**\n             * See documentation: https:\/\/developer.paypal.com\/sdk\/js\/reference\/#link-createorder\n             *\/\n            async function createOrderHandler() {\n                \/\/ Create the order in PayPal using the PayPal API.\n                \/\/ https:\/\/developer.paypal.com\/docs\/checkout\/standard\/integrate\/\n                \/\/ The server-side Create Order API is used to generate the Order. Then the Order-ID is returned.                    \n                console.log('Setting up the AJAX request for create-order call.');\n\n                \/\/ First, select the interacted button's wrapper div by its ID (so  we can target various elements within it)\n                const wrapper_div_interacted_button = document.getElementById('elements_wrapper_wpapp_paypal_button_1');\n                \/\/console.log(wrapper_div_interacted_button);\n\n                \/\/ Read the select element and get the selected option's value and text.\n                js_on_page_embed_button_id = 'wpapp_paypal_button_1';\n                var selectId = 'select_' + js_on_page_embed_button_id; \/\/ Construct the select ID\n                var selectElement = document.getElementById(selectId);\n                \/\/console.log(\"Select Element: \", selectElement);\n\n                \/\/Get the other amount field value.\n                var other_amount_input = wrapper_div_interacted_button.querySelector('.wpapp_other_amt_input');\n\n                \/\/Get the reference field value.\n                var pp_reference_field = wrapper_div_interacted_button.querySelector('.wp_pp_button_reference');\n\n                let pp_bn_data = {};\n                pp_bn_data.transient_name = '69f188c8478da_wpapp_paypal_button_1';\n                pp_bn_data.on_page_button_id = 'wpapp_paypal_button_1';\n                pp_bn_data.selected_val = selectElement.value;\/\/value of the selected option. (we can use it get the item name from the transient).\n                pp_bn_data.other_amount_val = other_amount_input ? other_amount_input.value : '';\n                pp_bn_data.pp_reference_field = pp_reference_field ? pp_reference_field.value : '';\n                console.log('WPAPP Button Data Below');\n                console.log(pp_bn_data);\n\n                \/\/Ajax action: <prefix>_pp_create_order \n                let post_data = 'action=wpapp_pp_create_order&data=' + JSON.stringify(pp_bn_data) + '&_wpnonce=84a7077a65';\n                \/\/console.log('Post Data: ', post_data);\/\/Debugging purposes only.\n\n                try {\n                    \/\/ Using fetch for AJAX request. This is supported in all modern browsers.\n                    const response = await fetch(\"https:\/\/www.avignon-prestigetour.com\/wp-admin\/admin-ajax.php\", {\n                        method: \"post\",\n                        headers: {\n                            'Content-Type': 'application\/x-www-form-urlencoded'\n                        },\n                        body: post_data\n                    });\n\n                    const response_data = await response.json();\n\n                    if (response_data.order_id) {\n                        console.log('Create-order API call to PayPal completed successfully.');\n                        \/\/If we need to see the order details, uncomment the following line.\n                        \/\/const order_data = response_data.order_data;\n                        \/\/console.log('Order data: ' + JSON.stringify(order_data));\n                        return response_data.order_id;\n                    } else {\n                        const error_message = JSON.stringify(response_data);\n                        console.error('Error occurred during create-order call to PayPal. ' + error_message);\n                        throw new Error(error_message);\n                    }\n                } catch (error) {\n                    console.error(error);\n                    alert('Could not initiate PayPal Checkout...\\n\\n' + JSON.stringify(error));\n                }\n            }\n\n            async function onApproveHandler(data, actions) {\n                console.log('Successfully created a transaction.');\n\n                \/\/ Show the spinner while we process this transaction.\n                \/\/ First, select the button container by its ID.\n                const pp_button_container = document.getElementById('wpapp_paypal_button_1');\n                \/\/ Then, navigate to the parent element of the PPCP button container.\n                const parent_wrapper = pp_button_container.parentElement;\n                \/\/ Finally, within the parent wrapper, select the spinner container\n                const pp_button_spinner_container = parent_wrapper.querySelector('.wpapp-pp-button-spinner-container');\n                \/\/console.log('Button spinner container: ', pp_button_spinner_container);\n\n                pp_button_container.style.display = 'none'; \/\/Hide the buttons\n                pp_button_spinner_container.style.display = 'inline-block'; \/\/Show the spinner.\n\n                \/\/ Capture the order in PayPal using the PayPal API.\n                \/\/ https:\/\/developer.paypal.com\/docs\/checkout\/standard\/integrate\/\n                \/\/ The server-side capture-order API is used. Then the Capture-ID is returned.\n                console.log('Setting up the AJAX request for capture-order call.');\n                let pp_bn_data = {};\n                pp_bn_data.order_id = data.orderID;\n                pp_bn_data.on_page_button_id = 'wpapp_paypal_button_1';\n                pp_bn_data.transient_name = '69f188c8478da_wpapp_paypal_button_1';\n                \/\/pp_bn_data.custom_field = encodeURIComponent(custom_data);\/\/If you have any custom data to send to the server (it needs to be URI encoded so special characters are not lost.)\n\n                \/\/Ajax action: <prefix>_pp_capture_order\n                let post_data = 'action=wpapp_pp_capture_order&data=' + JSON.stringify(pp_bn_data) + '&_wpnonce=84a7077a65';\n                try {\n                    const response = await fetch(\"https:\/\/www.avignon-prestigetour.com\/wp-admin\/admin-ajax.php\", {\n                        method: \"post\",\n                        headers: {\n                            'Content-Type': 'application\/x-www-form-urlencoded'\n                        },\n                        body: post_data\n                    });\n\n                    const response_data = await response.json();\n                    const txn_data = response_data.txn_data;\n                    const error_detail = txn_data?.details?.[0];\n                    const error_msg = response_data.error_msg;\/\/Our custom error message.\n                    \/\/ Three cases to handle:\n                    \/\/ (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()\n                    \/\/ (2) Other non-recoverable errors -> Show a failure message\n                    \/\/ (3) Successful transaction -> Show confirmation or thank you message\n\n                    if (response_data.capture_id) {\n                        \/\/ Successful transaction -> Show confirmation or thank you message\n                        console.log('Capture-order API call to PayPal completed successfully.');\n\n                        \/\/Redirect to the Thank you page URL if it is set.\n                        return_url = 'https:\/\/avignon-prestigetour.com';\n                        if( return_url ){\n                            \/\/redirect to the Thank you page URL.\n                            console.log('Redirecting to the Thank you page URL: ' + return_url);\n                            window.location.href = return_url;\n                            return;\n                        } else {\n                            \/\/No return URL is set. Just show a success message.\n                            console.log('No return URL is set in the settings. Showing a success message.');\n\n                            \/\/We are going to show the success message in the wpapp-ppcp-button-wrapper's container.\n                            txn_success_msg = 'Transaction completed successfully! Feel free to browse our site for another checkout.';\n                            \/\/ Select all elements with the class 'wpapp-ppcp-button-wrapper'\n                            var button_divs = document.querySelectorAll('.wpapp-ppcp-button-wrapper');\n\n                            \/\/ Loop through the NodeList and update each element\n                            button_divs.forEach(function(div, index) {\n                                div.innerHTML = '<div id=\"wpapp-btn-txn-success-msg-' + index + '\" class=\"wpapp-btn-txn-success-msg\">' + txn_success_msg + '<\/div>';\n                            });\n\n                            \/\/ Scroll to the success message container of the button we are interacting with.\n                            const interacted_button_container_element = document.getElementById(elements_wrapper_wpapp_paypal_button_1);\n                            if (interacted_button_container_element) {\n                                interacted_button_container_element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                            }\n                            return;\n                        }\n\n                    } else if (error_detail?.issue === \"INSTRUMENT_DECLINED\") {\n                        \/\/ Recoverable INSTRUMENT_DECLINED -> call actions.restart()\n                        console.log('Recoverable INSTRUMENT_DECLINED error. Calling actions.restart()');\n                        return actions.restart();\n                    } else if ( error_msg && error_msg.trim() !== '' ) {\n                        \/\/Our custom error message from the server.\n                        console.error('Error occurred during PayPal checkout process.');\n                        console.error( error_msg );\n                        alert( error_msg );\n                    } else {\n                        \/\/ Other non-recoverable errors -> Show a failure message\n                        console.error('Non-recoverable error occurred during PayPal checkout process.');\n                        console.error( error_detail );\n                        \/\/alert('Unexpected error occurred with the transaction. Enable debug logging to get more details.\\n\\n' + JSON.stringify(error_detail));\n                    }\n\n                    \/\/Return the button and the spinner back to their orignal display state.\n                    pp_button_container.style.display = 'block'; \/\/ Show the buttons\n                    pp_button_spinner_container.style.display = 'none'; \/\/ Hide the spinner\n\n                } catch (error) {\n                    console.error(error);\n                    alert('PayPal returned an error! Transaction could not be processed. Enable the debug logging feature to get more details...\\n\\n' + JSON.stringify(error));\n                }\n            }\n\n            function onErrorHandler(err) {\n                console.error('An error prevented the user from checking out with PayPal. ' + JSON.stringify(err));\n                alert( 'Error occurred during PayPal checkout process.\\n\\n' + JSON.stringify(err) );\n            }\n            \n            function onCancelHandler (data) {\n                console.log('Checkout operation cancelled by the customer.');\n                \/\/Return to the parent page which the button does by default.\n            }            \n\n        });\n    <\/script>\n\n    <style>\n        @keyframes wpapp-pp-button-spinner {\n            to {transform: rotate(360deg);}\n        }\n        .wpapp-pp-button-spinner {\n            margin: 0 auto;\n            text-indent: -9999px;\n            vertical-align: middle;\n            box-sizing: border-box;\n            position: relative;\n            width: 60px;\n            height: 60px;\n            border-radius: 50%;\n            border: 5px solid #ccc;\n            border-top-color: #0070ba;\n            animation: wpapp-pp-button-spinner .6s linear infinite;\n        }\n        .wpapp-pp-button-spinner-container {\n            width: 100%;\n            text-align: center;\n            margin-top:10px;\n            display: none;\n        }\n    <\/style>\n    <div class=\"wpapp-pp-button-spinner-container\">\n        <div class=\"wpapp-pp-button-spinner\"><\/div>\n    <\/div>    \n    <\/div><!-- end of button-wrapper -->\n    <\/div><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"class_list":["post-449","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.7 (Yoast SEO v26.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Online payment | Avignon Prestige Tour<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Online payment\" \/>\n<meta property=\"og:description\" content=\"You can make a payment online either by bank transfer, by completing the form below (You will receive an email with all the necessary instructions) or by Paypal on the right.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/\" \/>\n<meta property=\"og:site_name\" content=\"Avignon Prestige Tour\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Avignon-Prestige-Tour-1416656515220685\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/\",\"url\":\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/\",\"name\":\"Online payment | Avignon Prestige Tour\",\"isPartOf\":{\"@id\":\"https:\/\/www.avignon-prestigetour.com\/#website\"},\"datePublished\":\"2020-03-21T17:14:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.avignon-prestigetour.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Online payment\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.avignon-prestigetour.com\/#website\",\"url\":\"https:\/\/www.avignon-prestigetour.com\/\",\"name\":\"Avignon Prestige Tour\",\"description\":\"Bienvenue en PROVENCE et Savourez ce Moment ...\",\"publisher\":{\"@id\":\"https:\/\/www.avignon-prestigetour.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.avignon-prestigetour.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.avignon-prestigetour.com\/#organization\",\"name\":\"Avignon Prestige Tour\",\"url\":\"https:\/\/www.avignon-prestigetour.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.avignon-prestigetour.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.avignon-prestigetour.com\/wp-content\/uploads\/2020\/03\/avp-logo.svg\",\"contentUrl\":\"https:\/\/www.avignon-prestigetour.com\/wp-content\/uploads\/2020\/03\/avp-logo.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"Avignon Prestige Tour\"},\"image\":{\"@id\":\"https:\/\/www.avignon-prestigetour.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Avignon-Prestige-Tour-1416656515220685\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Online payment | Avignon Prestige Tour","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/","og_locale":"en_US","og_type":"article","og_title":"Online payment","og_description":"You can make a payment online either by bank transfer, by completing the form below (You will receive an email with all the necessary instructions) or by Paypal on the right.","og_url":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/","og_site_name":"Avignon Prestige Tour","article_publisher":"https:\/\/www.facebook.com\/Avignon-Prestige-Tour-1416656515220685","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/","url":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/","name":"Online payment | Avignon Prestige Tour","isPartOf":{"@id":"https:\/\/www.avignon-prestigetour.com\/#website"},"datePublished":"2020-03-21T17:14:25+00:00","breadcrumb":{"@id":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.avignon-prestigetour.com\/en\/online-payment\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.avignon-prestigetour.com\/en\/"},{"@type":"ListItem","position":2,"name":"Online payment"}]},{"@type":"WebSite","@id":"https:\/\/www.avignon-prestigetour.com\/#website","url":"https:\/\/www.avignon-prestigetour.com\/","name":"Avignon Prestige Tour","description":"Bienvenue en PROVENCE et Savourez ce Moment ...","publisher":{"@id":"https:\/\/www.avignon-prestigetour.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.avignon-prestigetour.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.avignon-prestigetour.com\/#organization","name":"Avignon Prestige Tour","url":"https:\/\/www.avignon-prestigetour.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.avignon-prestigetour.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.avignon-prestigetour.com\/wp-content\/uploads\/2020\/03\/avp-logo.svg","contentUrl":"https:\/\/www.avignon-prestigetour.com\/wp-content\/uploads\/2020\/03\/avp-logo.svg","width":"1024","height":"1024","caption":"Avignon Prestige Tour"},"image":{"@id":"https:\/\/www.avignon-prestigetour.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Avignon-Prestige-Tour-1416656515220685"]}]}},"_links":{"self":[{"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/pages\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/comments?post=449"}],"version-history":[{"count":1,"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/pages\/449\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/pages\/449\/revisions\/450"}],"wp:attachment":[{"href":"https:\/\/www.avignon-prestigetour.com\/en\/wp-json\/wp\/v2\/media?parent=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}