Api Integration Development Tutorials, Guides & Insights

composer create-project --prefer-dist laravel/laravel example-app
            
        

Make sure to have php and composer installed on your machine.

fetch('https://jsonplaceholder.typicode.com/invalid-url')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });
            
        

In this case, if the URL is invalid or there’s a network issue, the error is caught, and a message is logged.

Create a Checkout.vue component in resources/js/components/Checkout.vue:

<template>
  <div>
    <h1>Checkout</h1>
    <div v-for="item in cart" :key="item.id">
      <h2>{{ item.name }}</h2>
      <p>Quantity: {{ item.quantity }}</p>
      <p>Total Price: {{ item.quantity * item.price }}</p>
    </div>
    <h3>Total: {{ cartTotal }}</h3>
    <button @click="placeOrder">Place Order</button>
  </div>
</template>

<script>
export default {
  computed: {
    cart() {
      return this.$store.getters.cartItems;
    },
    cartTotal() {
      return this.$store.getters.cartTotal;
    },
  },
  methods: {
    placeOrder() {
      axios.post('/api/orders', {
        user_id: this.$store.state.user.id, // Assuming user info is stored in Vuex
        items: this.cart,
        total_price: this.cartTotal,
      }).then(() => {
        this.$router.push('/orders');
      });
    },
  },
};
</script>
            
        

Add your NMI security key to your configuration file. In config/nmi.php, add:

   return [
       'security_key' => env('NMI_SECURITY_KEY', 'your-security-key-here'),
   ];
            
        

Let's start by building the UI components.

Create a new file lib/screens/weather_screen.dart and add the following code: