diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CreateCustomerModal.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CreateCustomerModal.vue
index c3eb3b2..219270c 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CreateCustomerModal.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CreateCustomerModal.vue
@@ -45,6 +45,7 @@
      data() {
          return {
              showModal: false,
+             api: inject('api'),
              valid: false,
              customer: {
                  name: '',
@@ -72,25 +73,13 @@
          async submitForm() {
              console.log(this.customer)
              if (this.$refs.form.validate()) {
-                 try {
-                     const response = await fetch('/don_confiao/api/customers/', {
-                         method: 'POST',
-                         headers: {
-                             'Content-Type': 'application/json',
-                         },
-                         body: JSON.stringify(this.customer),
-                     });
-                     if (response.ok) {
-                         const data = await response.json();
-                         console.log('Cliente Guardado:', data);
-                         this.$emit('customerCreated', data);
-                         this.closeModal();
-                     } else {
-                         console.error('Error al Crear el Cliente:', response.statusText);
-                     }
-                 } catch (error) {
-                     console.error('Error de red:', error);
-                 }
+                 this.api.createCustomer(this.customer)
+                     .then(data => {
+                       console.log('Cliente Guardado:', data);
+                       this.$emit('customerCreated', data);
+                       this.closeModal();
+                     })
+                     .catch(error => console.error('Error:', error));
              }
          },
          resetForm() {
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
index 0747b8a..400e8a2 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
@@ -147,10 +147,11 @@
 <script>
   import CustomerForm from './CreateCustomerModal.vue';
   import CasherModal from './CasherModal.vue';
+  import { inject } from 'vue';
 
- export default {
-   name: 'DonConfiao',
-   components: {
+  export default {
+    name: 'DonConfiao',
+    components: {
      CustomerForm,
      CasherModal,
    },
@@ -159,6 +160,7 @@
    },
    data() {
      return {
+       api: inject('api'),
        valid: false,
        form_changed: false,
        show_alert_lines: false,
@@ -259,38 +261,35 @@
          this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
      },
      fetchClients() {
-       fetch('/don_confiao/api/customers/')
-         .then(response => response.json())
-         .then(data => {
-           this.clients = data;
-         })
-         .catch(error => {
-           console.error(error);
-         });
+       this.api.getCustomers()
+           .then(data => {
+             this.clients = data;
+           })
+           .catch(error => {
+             console.error(error);
+           });
      },
        handleNewCustomer(newCustomer){
            this.clients.push(newCustomer);
            this.purchase.customer = newCustomer.id;
        },
      fetchProducts() {
-       fetch('/don_confiao/api/products/')
-         .then(response => response.json())
-         .then(data => {
-           this.products = data;
-         })
-         .catch(error => {
-           console.error(error);
-         });
+       this.api.getProducts()
+           .then(data => {
+             this.products = data;
+           })
+           .catch(error => {
+             console.error(error);
+           });
      },
      fetchPaymentMethods() {
-       fetch('/don_confiao/payment_methods/all/select_format')
-         .then(response => response.json())
-         .then(data => {
-           this.payment_methods = data;
-         })
-         .catch(error => {
-           console.error(error);
-         });
+       this.api.getPaymentMethods()
+           .then(data => {
+             this.payment_methods = data;
+           })
+           .catch(error => {
+             console.error(error);
+           });
      },
      addLine() {
        this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
@@ -310,28 +309,16 @@
      },
      async submit() {
        this.$refs.purchase.validate();
-       if (this.valid) {
-           try {
-               const response = await fetch('/don_confiao/api/sales/', {
-                   method: 'POST',
-                   headers: {
-                       'Content-Type': 'application/json',
-                   },
-                   body: JSON.stringify(this.purchase),
-               });
-               if (response.ok) {
-                   const data = await response.json();
-                   console.log('Compra enviada:', data);
-                   this.$router.push({
-                       path: "/summary_purchase",
-                       query : {id: parseInt(data.id)}
-                   });
-               } else {
-                   console.error('Error al enviar la compra:', response.statusText);
-               }
-           } catch (error) {
-               console.error('Error de red:', error);
-           }
+         if (this.valid) {
+           this.api.createPurchase(this.purchase)
+               .then(data => {
+                 console.log('Compra enviada:', data);
+                 this.$router.push({
+                   path: "/summary_purchase",
+                   query : {id: parseInt(data.id)}
+                 });
+               })
+           .catch(error => console.error('Error al enviarl la compra:', error));
        } else {
          this.show_alert_purchase = true;
            setTimeout(() => {
@@ -347,7 +334,7 @@
      },
    },
      mounted() {
-         this.fetchClients();  // Llama a fetchClients al montar el componente
+         this.fetchClients();
      }
  };
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue
index 09b1891..d866707 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue
@@ -83,6 +83,7 @@
   </v-container>
 </template>
 <script>
+  import { inject } from 'vue';
   import CurrencyText from './CurrencyText.vue';
   import SummaryPurchaseModal from './SummaryPurchaseModal.vue';
 
@@ -96,6 +97,7 @@
     },
     data () {
       return {
+        api: inject('api'),
         valid: null,
         selectedPurchaseId: null,
         selectedTab: 'CASH',
@@ -171,43 +173,28 @@
         this.$refs.summaryModal.dialog = true;
       },
       fetchPurchases() {
-        const endpoint = '/don_confiao/purchases/for_reconciliation';
-        fetch(endpoint)
-          .then(response => response.json())
-          .then(data => {
-            this.summary.purchases = data;
-            this.reconciliation.cash_purchases = this.idsBymethod('CASH');
-            this.reconciliation.total_cash_purchases = this.totalByMethod('CASH');
-            this.processOtherMethods();
-          })
-          .catch(error => {
-            console.error(error);
-          });
+        this.api.getPurchasesForReconciliation()
+            .then(data => {
+              this.summary.purchases = data;
+              this.reconciliation.cash_purchases = this.idsBymethod('CASH');
+              this.reconciliation.total_cash_purchases = this.totalByMethod('CASH');
+              this.processOtherMethods();
+            })
+            .catch(error => {
+              console.error(error);
+            });
       },
       async submit() {
         this.$refs.taker.validate();
         if (this.valid) {
-          try {
-            const response = await fetch('/don_confiao/reconciliate_jar', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify(this.reconciliation),
-            });
-            if (response.ok) {
-              const data = await response.json();
-              console.log('Cuadre enviado:', data);
-              this.$router.push({path: "/"});
-            } else {
-              console.error('Error al enviar el cuadre', response.statusText);
-
-            }
-          } catch (error) {
-            console.error('Error de red:', error);
-          }
+          this.api.createReconciliationJar(this.reconciliation)
+              .then(data => {
+                console.log('Cuadre enviado:', data);
+                this.$router.push({path: "/"});
+              })
+              .catch(error => console.error('Error:', error));
         }
-      },
+      }
     },
   }
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
index d43fa84..07a37c2 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
@@ -47,6 +47,8 @@
 </template>
 
 <script>
+  import { inject } from 'vue';
+
   export default {
     name: 'SummaryPurchase',
     props: {
@@ -55,6 +57,7 @@
     },
     data () {
       return {
+        api: inject('api'),
         purchase: {},
         headers: [
           { title: 'Producto', value: 'product.name' },
@@ -73,8 +76,7 @@
     },
     methods: {
       fetchPurchase(purchaseId) {
-        fetch(`/don_confiao/resumen_compra_json/${purchaseId}`)
-          .then(response => response.json())
+        this.api.getSummaryPurchase(purchaseId)
           .then(data => {
             this.purchase = data;
           })
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js
index d31eee2..cab013c 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js
@@ -9,11 +9,17 @@ import { registerPlugins } from '@/plugins'
 
 // Components
 import App from './App.vue'
+import ApiImplementation from './services/api-implementation';
 
 // Composables
 import { createApp } from 'vue'
 
-const app = createApp(App)
+process.env.API_IMPLEMENTATION = 'django';
+let apiImplementation = new ApiImplementation();
+const api = apiImplementation.getApi();
+
+const app = createApp(App);
+app.provide('api', api);
 
 registerPlugins(app)
 
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api-implementation.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api-implementation.js
new file mode 100644
index 0000000..0bbbec6
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api-implementation.js
@@ -0,0 +1,21 @@
+import DjangoApi from './django-api';
+import Api from './api';
+
+class ApiImplementation {
+  constructor() {
+    const implementation = process.env.API_IMPLEMENTATION;
+    let apiImplementation;
+    if (implementation === 'django') {
+      apiImplementation = new DjangoApi();
+    } else {
+      throw new Error("API implementation don't configured");
+    }
+    this.api = new Api(apiImplementation);
+  }
+
+  getApi() {
+    return this.api;
+  }
+}
+
+export default ApiImplementation;
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
new file mode 100644
index 0000000..4f58d7a
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
@@ -0,0 +1,39 @@
+class Api {
+  constructor (apiImplementation) {
+    this.apiImplementation = apiImplementation;
+  }
+
+  getCustomers() {
+    return this.apiImplementation.getCustomers();
+  }
+
+  getProducts() {
+    return this.apiImplementation.getProducts();
+  }
+
+  getPaymentMethods() {
+    return this.apiImplementation.getPaymentMethods();
+  }
+
+  getSummaryPurchase(purchaseId) {
+    return this.apiImplementation.getSummaryPurchase(purchaseId);
+  }
+
+  getPurchasesForReconciliation() {
+    return this.apiImplementation.getPurchasesForReconciliation();
+  }
+
+  createPurchase(purchase) {
+    return this.apiImplementation.createPurchase(purchase);
+  }
+
+  createReconciliationJar(reconciliation) {
+    return this.apiImplementation.createReconciliationJar(reconciliation);
+  }
+
+  createCustomer(customer) {
+    return this.apiImplementation.createCustomer(customer);
+  }
+}
+
+export default Api;
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
new file mode 100644
index 0000000..472af2f
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
@@ -0,0 +1,82 @@
+class DjangoApi {
+  getCustomers() {
+    const url = '/don_confiao/api/customers/';
+    return this.getRequest(url);
+  }
+
+  getProducts() {
+    const url = '/don_confiao/api/products/';
+    return this.getRequest(url);
+  }
+
+  getPaymentMethods() {
+    const url = '/don_confiao/payment_methods/all/select_format';
+    return this.getRequest(url);
+  }
+
+  getSummaryPurchase(purchaseId) {
+    const url = `/don_confiao/resumen_compra_json/${purchaseId}`;
+    return this.getRequest(url);
+  }
+
+  getPurchasesForReconciliation() {
+    const url = '/don_confiao/purchases/for_reconciliation';
+    return this.getRequest(url);
+  }
+
+  createPurchase(purchase) {
+    const url = '/don_confiao/api/sales/';
+    return this.postRequest(url, purchase);
+  }
+
+  createReconciliationJar(reconciliation) {
+    const url = '/don_confiao/reconciliate_jar';
+    return this.postRequest(url, reconciliation);
+  }
+
+  createCustomer(customer) {
+    const url = '/don_confiao/api/customers/';
+    return this.postRequest(url, customer);
+  }
+
+  getRequest(url) {
+    return new Promise ((resolve, reject) => {
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          resolve(data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  postRequest(url, content) {
+    return new Promise((resolve, reject) => {
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(content)
+      })
+        .then(response => {
+          if (!response.ok) {
+            reject(new Error(`Error ${response.status}: ${response.statusText}`));
+          } else {
+            response.json().then(data => {
+              if (!data) {
+                reject(new Error('La respuesta no es un JSON válido'));
+              } else {
+                resolve(data);
+              }
+            });
+          }
+        })
+        .catch(error => reject(error));
+    });
+  }
+}
+
+  export default DjangoApi;