{"id":41543,"date":"2025-09-20T21:02:29","date_gmt":"2025-09-20T21:02:29","guid":{"rendered":"https:\/\/1stcda.co\/?page_id=41543"},"modified":"2025-09-20T21:32:57","modified_gmt":"2025-09-20T21:32:57","slug":"courses-checkout","status":"publish","type":"page","link":"https:\/\/www.1stcda.com\/es\/courses-checkout\/","title":{"rendered":"Cursos \u2013 Finalizar Compra"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"41543\" class=\"elementor elementor-41543\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a3082d e-con-full e-flex e-con e-parent\" data-id=\"5a3082d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b0c372 elementor-widget elementor-widget-shortcode\" data-id=\"1b0c372\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"drivescout-app\">\r\n            <div id=\"drivescout-checkout\">\n\n    <!-- checkout -->\n    <div class=\"container mx-auto flex flex-col sm:flex-row mt-0\">\n        <section class=\"w-full sm:w-1\/4 sm:mr-12\">\n            <!-- cart -->\n            <h4 class=\"text-2xl font-semibold text-gray-600 mb-8\">Resumen del pedido<\/h4>\n            <section id=\"drivescout-cart-wrapper\">\r\n  <p v-if=\"cart.isEmpty() && cart.isLoading() === false\">Tu carrito est\u00e1 vac\u00edo.<\/p>\r\n  <p v-if=\"cart.isLoading()\"><i class=\"fa fa-spinner fa-spin\"><\/i> Loading...<\/p>\r\n\r\n  <section v-cloak v-if=\"cart.isEmpty() === false && cart.isLoading() === false\">\r\n\r\n    <div class=\"cart\">\r\n      <div class=\"cart-item\" v-for=\"(product, index) in cart.data.products\">\r\n        <div class=\"block mb-auto\">\r\n          <p class=\"product-name\">{{ product.name() }}<\/p>\r\n          <p class=\"product-description\" v-if=\"product.description()\" v-html=\"product.description()\"><\/p>\r\n          <ul class=\"product-details\" v-if=\"product.sessiontypes().length > 0\">\r\n            <li v-for=\"sessiontype in product.sessiontypes()\">\r\n              {{ sessiontype.pivot.hours \/ 60 }} hours for {{ sessiontype.name }}\r\n            <\/li>\r\n          <\/ul>\r\n        <\/div>\r\n        <div class=\"block\">\r\n          <div class=\"mt-12 border-t grid grid-cols-2\">\r\n            <div class=\"p-4\">\r\n              <button class=\"remove-from-cart\" @click=\"cart.removeProduct(index)\" :href=\"cartUrl+'?action=remove-from-cart&product_index='+index\">Borrar\r\n              <\/button>\r\n            <\/div>\r\n            <div class=\"text-right p-4\">\r\n              <p class=\"product-price\">{{ product.priceInDollars() }}<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <hr \/>\r\n\r\n    <div class=\"ds_coupon-form-wrapper\">\r\n      <form method=\"post\" @submit.prevent=\"cart.applyCoupon(couponForm.coupon_code)\" :action=\"urls.applyCoupon\" action=\"\">\r\n        <label for=\"coupons\">\u00bfTienes un cup\u00f3n?<\/label>\r\n        <input name=\"coupon\" v-model=\"couponForm.coupon_code\" id=\"coupons\" type=\"text\" class=\"ds_form-control\" \/>\r\n        <div class=\"mt-4\">\r\n          <button class=\"py-2 px-4 text-center shadow font-semibold rounded border-0\" :disabled=\"couponForm.submitting === true\" style=\"background: #D9E2EC; color: #102A43;\" type=\"submit\">Aplicar cup\u00f3n\r\n          <\/button>\r\n        <\/div>\r\n      <input type=\"hidden\" name=\"trp-form-language\" value=\"es\"\/><\/form>\r\n    <\/div>\r\n\r\n    <div v-if=\"cart.hasCoupon()\" class=\"bg-white p-4 mt-4 mb-4\">\r\n      <strong>Applied Coupon:<\/strong><br \/>\r\n      <p class=\"mb-4\">{{ cart.data.coupon.label() }}<\/p>\r\n      <button class=\"py-2 px-4 text-center shadow font-semibold rounded border-0\" :disabled=\"cart.hasCoupon() === false\" style=\"background: #D9E2EC; color: #102A43;\" @click.prevent=\"cart.removeCoupon()\" type=\"submit\">Remove Coupon\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <hr \/>\r\n\r\n    <div class=\"text-right mt-8 mr-4\">\r\n      <strong class=\"block mb-2\" style=\"color: #9FB3C8\">Sub-total: {{ cart.data.subTotalInDollars }}<\/strong>\r\n      <div v-if=\"cart.hasCoupon()\" class=\"mb-4\">\r\n        Applied Coupon: <br \/>{{ cart.data.coupon.label() }}\r\n      <\/div>\r\n      <strong class=\"block mb-4\" style=\"color: #9FB3C8\" v-if=\"surchargeBilledSeparately\">Processing Fees: {{ surchargeAmountBilledInDollars }}\r\n        <i class=\"tooltip float-right cursor-pointer\" v-if=\"surchargeDetail !== ''\">\r\n          <svg class=\"h-4 w-4 ml-2 mt-1 pointer-cursor text-blue-400\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" \/>\r\n          <\/svg>\r\n          <span class=\"tooltip-text bg-blue-200 p-3 -mt-6 -ml-6 rounded\">{{ surchargeDetail }}<\/span>\r\n        <\/i>\r\n      <\/strong>\r\n      <strong class=\"block text-2xl\" style=\"color: #243B53\">Total Debido: {{ totalDue }}<\/strong>\r\n      <strong class=\"block text-2xl\" style=\"color: #243B53\">Total Facturado: {{ totalBilled }}<\/strong>\r\n    <\/div>\r\n\r\n  <\/section>\r\n<\/section>\r\n        <\/section>\n        <section class=\"w-full mt-4 sm:mt-0 sm:w-3\/4\">\n            \n            <div class=\"section-header\">\n                <button @click.prevent=\"sections.student_information.visible = !sections.student_information.visible\">\n                    \u00bfYa eres cliente? \u00a1Inicia sesi\u00f3n!\n                <\/button>\n            <\/div>\n\n            <section class=\"slide-panel bg-white transition duration-700 ease-in-out mb-8\" v-bind:class=\"{'slide-panel-open': sections.student_information.visible }\">\n                <section class=\"mb-8\">\n                  <form v-on:submit.prevent=\"login()\" autocomplete=\"off\" novalidate :action=\"urls.login\" method=\"post\" action=\"\">\n                    <div class=\"form-group\">\n                      <label for=\"studentUsername\">Nombre de usuario<\/label>\n                      <input name=\"student_username\" type=\"text\" class=\"placeholder-gray-800 placeholder-opacity-50 ds_form-control\" v-model=\"loginForm.username\" data-cy=\"student_username\" id=\"studentUsername\" autocomplete=\"new-student-username\">\n                    <\/div>\n                    <div class=\"form-group\">\n                      <label for=\"studentPassword\">Contrase\u00f1a<\/label>\n                      <input name=\"student_password\" type=\"password\" class=\"placeholder-gray-800 placeholder-opacity-50 ds_form-control\" v-model=\"loginForm.password\" data-cy=\"student_password\" id=\"studentPassword\" autocomplete=\"new-student-password\">\n                    <\/div>\n\n                    <button type=\"submit\" class=\"drivescout-checkout-button text-base mt-8\" data-cy=\"login_button\" :disabled=\"this.loginForm.isBusy === true\">\n                      <i class=\"fa fa-spinner fa-spin\" v-if=\"this.loginForm.isBusy\"><\/i>\n                      Iniciar Sesi\u00f3n\n                    <\/button>\n                  <input type=\"hidden\" name=\"trp-form-language\" value=\"es\"\/><\/form>\n\n                  <div v-if=\"loginForm.error.detail\" class=\"bg-red-100 border-l-4  font-bold border-red-500 text-red-700 p-4 mt-8 mb-8\" role=\"alert\">\n                      <h2 class=\"text-xl mb-4\">{{ loginForm.error.title }}<\/h2>\n                      <p>\n                        {{ loginForm.error.detail }}\n                      <\/p>\n                  <\/div>\n                <\/section>\n            <\/section>\n\n            <form v-on:submit.prevent=\"checkout()\"\n                  @keydown=\"form.errors.clear($event.target.name)\"\n                  autocomplete=\"off\"\n                  novalidate\n :action=\"urls.checkout\" method=\"post\" action=\"\">\n                \n                <input name=\"student_access_token\" type=\"hidden\" v-model=\"form.student.access_token\" data-cy=\"student_access_token\" id=\"studentAccessToken\" autocomplete=\"new-student-access_token\">\n\n                <div class=\"section-header\">\n                    <button @click.prevent=\"sections.student_information.visible = !sections.student_information.visible\">\n                        Informaci\u00f3n Del Estudiante\n                    <\/button>\n                <\/div>\n\n                <section class=\"slide-panel bg-white transition duration-700 ease-in-out mb-8\" v-bind:class=\"{'slide-panel-open': sections.student_information.visible }\">\n                    <section class=\"mb-8\">\n\n                        <div class=\"form-group\">\n                            <label for=\"studentEmail\">Correo electr\u00f3nico del estudiante<\/label>\n                            <input type=\"email\" class=\"ds_form-control\"\n                                   name=\"student_email\"\n                                   data-cy=\"student_email\"\n                                   v-model=\"form.student.email\"\n                                   id=\"studentEmail\"\n                                   autocomplete=\"new-student-email\">\n                            <span class=\"help is-danger\" v-if=\"this.form.errors.has('email')\"\n                                  v-text=\"this.form.errors.get('email')\"><\/span>\n                        <\/div>\n\n                        <div class=\"form-group\">\n                            <label for=\"studentUsername\">Nombre de usuario<\/label>\n                            <input name=\"student_username\" type=\"text\" class=\"ds_form-control\"\n                                v-model=\"form.student.username\"\n                                data-cy=\"new_student_username\"\n                                id=\"newStudentUsername\"\n                                autocomplete=\"new-student-username\">\n                            <span class=\"help is-danger\" v-if=\"this.form.errors.has('username')\"\n                                v-text=\"this.form.errors.get('username')\"><\/span>\n                        <\/div>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-4\">\n                            <div class=\"form-group\">\n                                <label for=\"firstname\">Nombre<\/label>\n                                <input type=\"text\" id=\"firstname\" class=\"ds_form-control\"\n                                       v-model=\"form.student.firstname\" name=\"firstname\"\n                                       data-cy=\"student_firstname\"\n                                       autocomplete=\"new-student-firstname\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('firstname')\"\n                                      v-text=\"this.form.errors.get('firstname')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"lastname\">Apellido<\/label>\n                                <input type=\"text\" id=\"lastname\" class=\"ds_form-control\"\n                                       v-model=\"form.student.lastname\" name=\"lastname\"\n                                       data-cy=\"student_lastname\"\n                                       autocomplete=\"new-student-lastname\">\n                                <span class=\"help is-danger\" v-if=\"this.form.errors.has('lastname')\"\n                                      v-text=\"this.form.errors.get('lastname')\"><\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-4\">\n                            <div class=\"form-group\">\n                                <label for=\"dob\">Fecha de nacimiento  (MM\/DD\/AAAA)<\/label>\n                                <input type=\"text\" id=\"dob\"\n                                       v-model=\"form.student.dob\"\n                                       v-mask=\"'##\/##\/####'\"\n                                       class=\"ds_form-control\"\n                                       data-cy=\"student_dob\"\n                                       name=\"dob\"\n                                       placeholder=\"__\/__\/____\"\n                                       autocomplete=\"new-student-dob\">\n                                <span class=\"help is-danger\" v-if=\"this.form.errors.has('dob')\"\n                                      v-text=\"this.form.errors.get('dob')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"phone\">Tel\u00e9fono<\/label>\n                                <input type=\"text\" id=\"phone\"\n                                       v-model=\"form.student.phone\"\n                                       v-mask=\"'(###) ###-####'\"\n                                       class=\"ds_form-control\" name=\"phone\"\n                                       data-cy=\"student_phone\"\n                                       autocomplete=\"new-student-phone\">\n                                <span class=\"help is-danger\" v-if=\"this.form.errors.has('phone')\"\n                                      v-text=\"this.form.errors.get('phone')\"><\/span>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"form-group\">\n                            <label for=\"driving_experience\">Experiencia al volante<\/label>\n                            <select name=\"driving_experience\"\n                                    v-model=\"form.student.driving_experience\"\n                                    data-cy=\"student_driving_experience\"\n                                    id=\"driving_experience\" class=\"ds_form-control\">\n                                <option value=\"None\">None<\/option>\n                                <option value=\"1-15 Hours\">1-15 Hours<\/option>\n                                <option value=\"16-30 Hours\">16-30 Hours<\/option>\n                                <option value=\"30 Hours\">30+ Hours<\/option>\n                            <\/select>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('driving_experience')\"\n                                  v-text=\"this.form.errors.get('driving_experience')\"><\/span>\n                        <\/div>\n                    <\/section>\n\n                    <h3 class=\"mb-8 font-semibold\">Direcci\u00f3n Del Estudiante<\/h3>\n\n                    <div class=\"form-group\">\n                        <label for=\"home_street\">Calle<\/label>\n                        <input type=\"text\" class=\"ds_form-control\"\n                               v-model=\"form.home_address.street\"\n                               name=\"student_street\" id=\"home_street\"\n                               data-cy=\"student_street\"\n                               autocomplete=\"new-student-street\"\/>\n                        <span class=\"help is-danger\"\n                              v-if=\"this.form.errors.has('home_street')\"\n                              v-text=\"this.form.errors.get('home_street')\"><\/span>\n                    <\/div>\n\n                    <section class=\"grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4 mb-8\">\n                        <div class=\"form-group\">\n                            <label for=\"home_city\">Ciudad<\/label>\n                            <input type=\"text\" class=\"ds_form-control\"\n                                   v-model=\"form.home_address.city\"\n                                   data-cy=\"student_city\"\n                                   name=\"home_city\" id=\"home_city\"\n                                   autocomplete=\"new-student-city\"\/>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('home_city')\"\n                                  v-text=\"this.form.errors.get('home_city')\"><\/span>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"home_state\">Estado<\/label>\n                            <select class=\"ds_form-control\"\n                                    v-model=\"form.home_address.state\"\n                                    data-cy=\"student_state\"\n                                    name=\"home_state\" id=\"home_state\"\n                                    autocomplete=\"new-student-state\">\n                                <option v-for=\"(state, abbreviated) in states\"\n                                        :value=\"abbreviated\">\n                                    {{ state }}\n                                <\/option>\n                            <\/select>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('home_state')\"\n                                  v-text=\"this.form.errors.get('home_state')\"><\/span>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"home_zip\">Zip<\/label>\n                            <input type=\"text\" class=\"ds_form-control\"\n                                   data-cy=\"student_zip\"\n                                   v-model=\"form.home_address.zip\"\n                                   v-mask=\"'#####'\"\n                                   name=\"home_zip\" id=\"home_zip\"\n                                   autocomplete=\"new-student-zip\"\/>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('home_zip')\"\n                                  v-text=\"this.form.errors.get('home_zip')\"><\/span>\n                        <\/div>\n                    <\/section>\n\n                    \n                    <div class=\"bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mb-8\" role=\"alert\">\n                        <label class=\"block text-gray-500 font-bold\">\n                            <input class=\"ds_checkbox\" v-model=\"doesNotHaveLearnersPermit\" type=\"checkbox\">\n                            <span>\n                                Haga clic aqu\u00ed si no tiene permiso.\n                            <\/span>\n                        <\/label>\n                    <\/div>\n\n                    <section class=\"mb-8\" v-show=\"doesNotHaveLearnersPermit === false\">\n                        <h3 class=\"mb-8 font-semibold\">Informaci\u00f3n Sobre Permisos<\/h3>\n\n                        <div class=\"form-group\">\n                            <label for=\"permit_number\">N\u00famero de permiso<\/label>\n                            <input type=\"text\" id=\"permit_number\"\n                                   v-model=\"form.permit.permit_number\"\n                                   data-cy=\"permit_number\"\n                                   class=\"ds_form-control\"\n                                   name=\"permit_number\"\n                                   autocomplete=\"new-permit-number\">\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('permit_number')\"\n                                  v-text=\"this.form.errors.get('permit_number')\"><\/span>\n                        <\/div>\n                        <section class=\"grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-4\">\n                            <div class=\"form-group\">\n                                <label for=\"permit_issue_date\">Fecha de emisi\u00f3n del permiso (MM\/DD\/AAAA)<\/label>\n                                <input type=\"text\" id=\"permit_issue_date\"\n                                       v-model=\"form.permit.issue_date\"\n                                       data-cy=\"permit_issue_date\"\n                                       v-mask=\"'##\/##\/####'\"\n                                       class=\"ds_form-control\"\n                                       name=\"permit_issue_date\"\n                                       placeholder=\"__\/__\/____\"\n                                       autocomplete=\"new-permit-issue-date\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('permit_issue_date')\"\n                                      v-text=\"this.form.errors.get('permit_issue_date')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"permit_expiration_date\">Fecha de vencimiento del permiso (MM\/DD\/AAAA)<\/label>\n                                <input type=\"text\" id=\"permit_expiration_date\"\n                                       v-model=\"form.permit.expiration_date\"\n                                       v-mask=\"'##\/##\/####'\"\n                                       class=\"ds_form-control\"\n                                       data-cy=\"permit_expiration_date\"\n                                       placeholder=\"__\/__\/____\"\n                                       name=\"permit_expiration_date\"\n                                       autocomplete=\"new-permit-expiration-date\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('permit_expiration_date')\"\n                                      v-text=\"this.form.errors.get('permit_expiration_date')\"><\/span>\n                            <\/div>\n                        <\/section>\n                    <\/section>\n\n                    <section class=\"guardian\"  v-if=\"studentAge() <= 21\">\n\n                        <h3 class=\"mb-4\">Informaci\u00f3n De Guardian <span\n                                    v-if=\"studentAge() >= 18 && studentAge() <= 21\" data-cy=\"guardian_optional_notice\">(optional)<\/span>\n                        <\/h3>\n\n                        <section class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                            <div class=\"form-group\">\n                                <label for=\"guardian_firstname\">Nombre<\/label>\n                                <input type=\"text\" id=\"guardian_firstname\"\n                                       v-model=\"form.guardian.firstname\"\n                                       data-cy=\"guardian_firstname\"\n                                       class=\"ds_form-control\" name=\"guardian_firstname\"\n                                       autocomplete=\"new-guardian-firstname\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('guardian_firstname')\"\n                                      v-text=\"this.form.errors.get('guardian_firstname')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"guardian_lastname\">Apellido<\/label>\n                                <input type=\"text\" id=\"guardian_lastname\"\n                                       v-model=\"form.guardian.lastname\"\n                                       data-cy=\"guardian_lastname\"\n                                       class=\"ds_form-control\" name=\"guardian_lastname\"\n                                       autocomplete=\"new-guardian-lastname\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('guardian_lastname')\"\n                                      v-text=\"this.form.errors.get('guardian_lastname')\"><\/span>\n                            <\/div>\n                        <\/section>\n\n                        <section class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                            <div class=\"form-group\">\n                                <label for=\"guardian_email\">Email<\/label>\n                                <input type=\"text\" id=\"guardian_email\"\n                                       v-model=\"form.guardian.email\"\n                                       data-cy=\"guardian_email\"\n                                       class=\"ds_form-control\" name=\"guardian_email\"\n                                       autocomplete=\"new-guardian-email\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('guardian_email')\"\n                                      v-text=\"this.form.errors.get('guardian_email')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group\">\n                                <label for=\"guardian_phone\">Tel\u00e9fono<\/label>\n                                <input type=\"text\" id=\"guardian_phone\"\n                                       v-model=\"form.guardian.phone\"\n                                       data-cy=\"guardian_phone\"\n                                       v-mask=\"'(###) ###-####'\"\n                                       class=\"ds_form-control\" name=\"guardian_phone\"\n                                       autocomplete=\"new-guardian-phone\">\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('guardian_phone')\"\n                                      v-text=\"this.form.errors.get('guardian_phone')\"><\/span>\n                            <\/div>\n                        <\/section>\n                    <\/section>\n                <\/section>\n\n\n                <div class=\"section-header mt-8\" v-if=\"shop.info.terms_of_service\">\n                    <button @click.prevent=\"sections.terms_of_service.visible = !sections.terms_of_service.visible\">\n                        T\u00e9rminos y Condiciones\n                    <\/button>\n                <\/div>\n\n                <section class=\"slide-panel bg-white slide-panel-open mb-8\" v-if=\"shop.info.terms_of_service\">\n                    <section v-html=\"shop.info.terms_of_service\">\n                    <\/section>\n\n                    <div class=\"mt-8 bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mb-8\" role=\"alert\">\n                        <label class=\"block text-gray-500 font-bold\">\n                            <input class=\"ds_checkbox\" data-cy=\"terms_of_service\" required v-model=\"form.terms_of_service\" type=\"checkbox\">\n                            <span>\n                              Al marcar esta casilla, aceptas los t\u00e9rminos anteriores.\n                            <\/span>\n                        <\/label>\n                    <\/div>\n                <\/section>\n\n                <section class=\"slide-panel bg-white slide-panel-open\" v-if=\"allowsPayLater && minimumDepositAmountRequired === 0 && displayPaymentOptions === false\">\n                    <button type=\"submit\"\n                            class=\"drivescout-checkout-button\"\n                            @click.prevent=\"buyNowPayLater()\"\n                            :disabled=\"this.form.isBusy() === true\">\n                        <i class=\"fa fa-spinner fa-spin\" v-if=\"this.form.isBusy()\"><\/i>\n                        Buy Now &amp; Pay Later <span v-if=\"allowsPayLater && minimumDepositAmountRequired > 0\">for {{ totalBilled }}<\/span>\n                    <\/button>\n\n                    <p class=\"text-center mt-8\">or<\/p>\n\n                    <button @click.prevent=\"enableFullPaymentOptions()\"\n                            class=\"drivescout-checkout-button mt-8\"\n                            :disabled=\"this.form.isBusy() === true\">\n                        Pay in Full Now\n                    <\/button>\n                <\/section>\n\n                <div class=\"section-header\" v-if=\"(allowsPayLater && minimumDepositAmountRequired > 0) || displayPaymentOptions === true || allowsPayLater === false\">\n                    <button class=\"block\"\n                            @click.prevent=\"sections.billing_information.visible = !sections.billing_information.visible\">\n                        Informaci\u00f3n De Pago\n                    <\/button>\n                <\/div>\n\n                <!-- billing info -->\n\n                <section class=\"slide-panel bg-white mb-8\" v-if=\"(allowsPayLater && minimumDepositAmountRequired > 0) || displayPaymentOptions === true || allowsPayLater === false\" v-bind:class=\"{'slide-panel-open': sections.billing_information.visible }\">\n                    <section class=\"billing-address\">\n                        <h3>Direcci\u00f3n De Facturaci\u00f3n<\/h3>\n                        <label style=\"margin-bottom: 1.5em;\"><input type=\"checkbox\" class=\"ds_checkbox\" @click=\"form.setBillingAddress()\">\u00bfEs la misma que la direcci\u00f3n particular?<\/label>\n                        <div class=\"form-group w-100\">\n                            <label for=\"billing_street\">Calle<\/label>\n                            <input type=\"text\" class=\"ds_form-control\"\n                                   v-model=\"form.billing_address.street\"\n                                   data-cy=\"billing_street\"\n                                   name=\"billing_street\" id=\"billing_street\"\n                                   autocomplete=\"new-billing-street\"\/>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('billing_street')\"\n                                  v-text=\"this.form.errors.get('billing_street')\"><\/span>\n                        <\/div>\n                        <section class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n                            <div class=\"form-group w-100\">\n                                <label for=\"billing_city\">Ciudad<\/label>\n                                <input type=\"text\" class=\"ds_form-control\"\n                                       v-model=\"form.billing_address.city\"\n                                       data-cy=\"billing_city\"\n                                       name=\"billing_city\" id=\"billing_city\"\n                                       autocomplete=\"new-billing-city\"\/>\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('billing_city')\"\n                                      v-text=\"this.form.errors.get('billing_city')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group w-100\">\n                                <label for=\"billing_state\">Estado<\/label>\n                                <select class=\"ds_form-control\"\n                                        v-model=\"form.billing_address.state\"\n                                        data-cy=\"billing_state\"\n                                        name=\"billing_state\" id=\"billing_state\"\n                                        autocomplete=\"new-billing-state\">\n                                    <option v-for=\"(state, abbreviated) in states\"\n                                            :value=\"abbreviated\">\n                                        {{ state }}\n                                    <\/option>\n                                <\/select>\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('billing_state')\"\n                                      v-text=\"this.form.errors.get('billing_state')\"><\/span>\n                            <\/div>\n                            <div class=\"form-group w-100\">\n                                <label for=\"billing_zip\">Zip<\/label>\n                                <input type=\"text\" class=\"ds_form-control\"\n                                       v-model=\"form.billing_address.zip\"\n                                       data-cy=\"billing_zip\"\n                                       v-mask=\"'#####'\"\n                                       name=\"billing_zip\" id=\"billing_zip\"\n                                       autocomplete=\"new-billing-zip\"\/>\n                                <span class=\"help is-danger\"\n                                      v-if=\"this.form.errors.has('billing_zip')\"\n                                      v-text=\"this.form.errors.get('billing_zip')\"><\/span>\n                            <\/div>\n                        <\/section>\n\n\n                    <\/section>\n                <\/section>\n\n                <div class=\"section-header\" v-if=\"(allowsPayLater && minimumDepositAmountRequired > 0) || displayPaymentOptions === true || allowsPayLater === false\">\n                    <button @click.prevent=\"sections.payment_information.visible = !sections.payment_information.visible\">\n                        Informaci\u00f3n De Tarjeta\n                    <\/button>\n                <\/div>\n\n                <section class=\"slide-panel bg-white\" v-if=\"(allowsPayLater && minimumDepositAmountRequired > 0) || displayPaymentOptions === true || allowsPayLater === false\"  v-bind:class=\"{'slide-panel-open': sections.payment_information.visible }\">\n\n                    <div class=\"form-group\">\n                        <label for=\"name_on_card\">Nombre en la tarjeta<\/label>\n                        <input type=\"text\" class=\"ds_form-control\"\n                               v-model=\"form.card.name_on_card\"\n                               data-cy=\"name_on_card\"\n                               name=\"name_on_card\" id=\"name_on_card\"\n                               autocomplete=\"new-card-name\"\/>\n                        <span class=\"help is-danger\"\n                              v-if=\"this.form.errors.has('name_on_card')\"\n                              v-text=\"this.form.errors.get('name_on_card')\"><\/span>\n                    <\/div>\n                    <div class=\"form-group\" v-if=\"allowsPayLater && minimumDepositAmountRequired > 0\">\n                        <label for=\"name_on_card\">Cantidad a pagar<\/label>\n                        <input type=\"number\" class=\"ds_form-control\"\n                               v-model=\"form.card.payment_amount\"\n                               data-cy=\"payment_amount\"\n                               name=\"payment_amount\" id=\"payment_amount\"\n                               autocomplete=\"payment-amount\"\/>\n                        <span class=\"help is-danger\"\n                              v-if=\"this.form.errors.has('payment_amount')\"\n                              v-text=\"this.form.errors.get('payment_amount')\"><\/span>\n                    <\/div>\n\n                    <div class=\"w-full\" v-if=\"allowsPayLater && minimumDepositAmountRequired > 0\">\n                        <div class=\"bg-blue-100 border-t-4 border-blue-500 rounded-b text-teal-900 px-4 py-3 shadow-md mb-12\"\n                             role=\"alert\">\n                            <div class=\"flex\">\n                                <div class=\"py-1\">\n                                    <svg class=\"fill-current h-6 w-6 text-blue-500 mr-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                                         viewbox=\"0 0 20 20\">\n                                        <path d=\"M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z\"\/>\n                                    <\/svg>\n                                <\/div>\n                                <p class=\"text-lg\">Debe pagar al menos ${{ minimumDepositAmountRequired \/ 100 }}. <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"card_number\">N\u00famero de tarjeta<\/label>\n                        <input type=\"text\" name=\"card_number\"\n                               v-model=\"form.card.number\"\n                               data-cy=\"card_number\"\n                               class=\"ds_form-control\" id=\"card_number\"\n                               autocomplete=\"new-card-number\"\/>\n                        <span class=\"help is-danger\"\n                              v-if=\"this.form.errors.has('card_number')\"\n                              v-text=\"this.form.errors.get('card_number')\"><\/span>\n                    <\/div>\n\n                    <section class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n                        <div class=\"form-group\">\n                            <label for=\"card_expiration_month\">Mes de vencimiento<\/label>\n                            <select name=\"card_expiration_month\"\n                                    class=\"ds_form-control\"\n                                    data-cy=\"card_expiration_month\"\n                                    v-model=\"form.card.expiration_month\"\n                                    id=\"card_expiration_month\" autocomplete=\"new-card-month\">\n                                <option value=\"01\">01<\/option>\n                                <option value=\"02\">02<\/option>\n                                <option value=\"03\">03<\/option>\n                                <option value=\"04\">04<\/option>\n                                <option value=\"05\">05<\/option>\n                                <option value=\"06\">06<\/option>\n                                <option value=\"07\">07<\/option>\n                                <option value=\"08\">08<\/option>\n                                <option value=\"09\">09<\/option>\n                                <option value=\"10\">10<\/option>\n                                <option value=\"11\">11<\/option>\n                                <option value=\"12\">12<\/option>\n                            <\/select>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('card_expiration_month')\"\n                                  v-text=\"this.form.errors.get('card_expiration_month')\"><\/span>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"card_expiration_year\">A\u00f1o de vencimiento<\/label>\n                            <select name=\"card_expiration_year\"\n                                   v-model=\"form.card.expiration_year\"\n                                   v-mask=\"'####'\"\n                                   data-cy=\"card_expiration_year\"\n                                   placeholder=\"____\"\n                                   class=\"ds_form-control\"\n                                   id=\"card_expiration_year\" autocomplete=\"new-card-year\"\/>\n                                                                           <option value=\"2026\">2026<\/option>\n                                                                            <option value=\"2027\">2027<\/option>\n                                                                            <option value=\"2028\">2028<\/option>\n                                                                            <option value=\"2029\">2029<\/option>\n                                                                            <option value=\"2030\">2030<\/option>\n                                                                            <option value=\"2031\">2031<\/option>\n                                                                            <option value=\"2032\">2032<\/option>\n                                                                            <option value=\"2033\">2033<\/option>\n                                                                            <option value=\"2034\">2034<\/option>\n                                                                            <option value=\"2035\">2035<\/option>\n                                                                            <option value=\"2036\">2036<\/option>\n                                                                <\/select>\n                            <span class=\"help is-danger\"\n                                  v-if=\"this.form.errors.has('card_expiration_year')\"\n                                  v-text=\"this.form.errors.get('card_expiration_year')\"><\/span>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"card_cvc\">CVC<\/label>\n                            <input type=\"text\" name=\"card_cvc\"\n                                   v-model=\"form.card.cvc\"\n                                   data-cy=\"card_cvc\"\n                                   class=\"ds_form-control\" id=\"card_cvc\"\n                                   autocomplete=\"new-card-code\"\/>\n                            <span class=\"help is-danger\" v-if=\"this.form.errors.has('card_cvc')\"\n                                  v-text=\"this.form.errors.get('card_cvc')\"><\/span>\n                        <\/div>\n\n                    <\/section>\n\n                <\/section>\n\n                <button type=\"submit\"\n                        v-if=\"(allowsPayLater && minimumDepositAmountRequired > 0) || displayPaymentOptions === true || allowsPayLater === false\"\n                        class=\"drivescout-checkout-button mt-8\"\n                        data-cy=\"checkout_button\"\n                        :disabled=\"this.form.isBusy() === true\">\n                    <i class=\"fa fa-spinner fa-spin\" v-if=\"this.form.isBusy()\"><\/i>\n                    Realizar pedido por valor de {{ totalBilled }}\n                <\/button>\n\n                              <div style=\"z-index:9999\" v-cloak data-cy=\"checkout_form_error_modal\"\n                   v-if=\"this.form.errors.any() && this.form.errors.modal.open\"\n                   class=\"ds_modal-overlay\"\n                   aria-labelledby=\"modal-title\"\n                   role=\"dialog\" aria-modal=\"true\">\n                <div class=\"ds_inner\">\n                  <!--\n                    Background overlay, show\/hide based on modal state.\n\n                    Entering: \"ease-out duration-300\"\n                      From: \"opacity-0\"\n                      To: \"opacity-100\"\n                    Leaving: \"ease-in duration-200\"\n                      From: \"opacity-100\"\n                      To: \"opacity-0\"\n                  -->\n                  <div class=\"ds_overlay-background\" aria-hidden=\"true\"><\/div>\n\n                  <!-- This element is to trick the browser into centering the modal contents. -->\n                  <span class=\"ds_center-modal-contents\" aria-hidden=\"true\">&#8203;<\/span>\n\n                  <!--\n                    Modal panel, show\/hide based on modal state.\n\n                    Entering: \"ease-out duration-300\"\n                      From: \"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"\n                      To: \"opacity-100 translate-y-0 sm:scale-100\"\n                    Leaving: \"ease-in duration-200\"\n                      From: \"opacity-100 translate-y-0 sm:scale-100\"\n                      To: \"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"\n                  -->\n                  <div class=\"ds_modal-content\">\n                    <div class=\"ds_modal-content-inner\">\n                      <div class=\"ds_icon\">\n                        <!-- Heroicon name: outline\/exclamation -->\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" \/>\n                        <\/svg>\n                      <\/div>\n                      <div class=\"ds_modal-body\">\n                        <h3 class=\"ds_modal-title\" id=\"modal-title\">\n                          Almost there!\n                        <\/h3>\n                        <p>You need to review some information<\/p>\n                        <div class=\"mt-2\">\n                          <ul>\n                            <li v-for=\"(error, title) in this.form.errors.errors\">{{error[0]}}<\/li>\n                          <\/ul>\n                        <\/div>\n                      <\/div>\n                    <\/div>\n                    <div class=\"ds_modal-footer\">\n                      <button class=\"ds_close-button\" type=\"button\" data-cy=\"close_checkout_form_error_modal\" @click.prevent=\"form.errors.modal.open = false\">\n                        Close\n                      <\/button>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n                <div class=\"rounded-md bg-red-500 p-4 mt-8\" v-if=\"error_message !== null\">\n                    <div class=\"flex\">\n                        <div class=\"flex-shrink-0\">\n                            <!-- Heroicon name: x-circle -->\n                            <svg class=\"h-5 w-5 text-red-200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"ml-3\">\n                            <h3 class=\"font-medium text-red-100\">\n                                {{ error_message }}\n                            <\/h3>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"es\"\/><\/form>\n        <\/section>\n    <\/div>\n\n<\/div>        <\/div>\r\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-41543","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/pages\/41543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/comments?post=41543"}],"version-history":[{"count":19,"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/pages\/41543\/revisions"}],"predecessor-version":[{"id":41589,"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/pages\/41543\/revisions\/41589"}],"wp:attachment":[{"href":"https:\/\/www.1stcda.com\/es\/wp-json\/wp\/v2\/media?parent=41543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}