Forem: IDMTR

Spice up Your Terminal With a Todo Reminder Using Starship Prompt and iZiDo Bash Script

IDMTR — Sun, 03 Nov 2024 12:28:10 +0000

This tutorial demonstrates how to integrate a todo reminder into your terminal prompt using the Starship prompt and a Bash script named iZiDo. The setup allows you to manage and display your tasks directly within your terminal.

TL;DR https://idmtr.github.io/izido/

We'll cover:

Configuring a custom module in starship.toml
Creating the izido.sh Bash script for todo management
Using the script to update your prompt with task reminders
Setting up the script for both Bash and Zsh shells

Prerequisites

Starship Prompt installed and configured.
Basic knowledge of editing configuration files and running scripts.
A terminal emulator of your choice.
Bash or Zsh shell.

Step 1: Update Your `starship.toml` Configuration

Begin by modifying the starship.toml file to include a custom module that displays your todo messages in the prompt.

Locate Your `starship.toml`

The configuration file is typically located at ~/.config/starship.toml.

Modify the Configuration

Add the following content to your starship.toml:

# ~/.config/starship.toml

# Use custom format
format = '''
$custom.izido
$time
[│ ](#555a64)$git_branch
│$directory❯
'''

# Define a custom module named 'izido'
[custom.izido]
command = """
if [ -f ~/.config/show_izido ] && [ -f ~/.config/starship_izido.txt ]; then
    sayings=("Chop Wood, Carry Water."
             "Keep Calm and Code On."
             "Ship It, Take a Break."
             "Founder Mode.")
    index=$((RANDOM % ${#sayings[@]}))
    saying="${sayings[$index]}"
    echo "┌─❮ $saying"
    awk -F, 'BEGIN {OFS=""} $1=="pending" {
        icon = ($2=="high") ? "⌛ " : "📝 "
        if ($3 != "none") {
            print icon $4 " (Due: " $3 ")"
        } else {
            print icon $4 ""
        }
        count += 1
        if (count >= 3) exit
    }' ~/.config/starship_izido.txt 2>/dev/null
fi
"""
when = '''
test -f ~/.config/show_izido && test -f ~/.config/starship_izido.txt
'''
format = '''
[$output](#fff)
'''

# Time Module
[time]
disabled = false
format = '🕙 [$time]($style) '
time_format = '%T'
utc_time_offset = '+2'
time_range = '10:00:00-14:00:00'

# Character Module (Prompt Symbol)
[character]
success_symbol = "[➜](bold #0A84FF)"
error_symbol = "[➜](bold #FF3B30)"

# Directory Module
[directory]
truncation_length = 3
truncation_symbol = "…/"
style = "bold #34C759"

# Git Branch Module
[git_branch]
symbol = " "
style = "bold #ff70cd"
disabled = false

# Git Status Module
[git_status]
style = "bold #007AFF"
ahead = "⇡"
behind = "⇣"
diverged = "⇕"
renamed = "➦"
deleted = "✖"
staged = "✚"
untracked = "…"
modified = "✱"
conflicted = "!"

Explanation:

format: Defines the overall structure of your prompt, including the custom module $custom.izido.
[custom.izido]: Configures the custom module named izido.
- command: Executes a shell command to display a random saying and the top three pending todos from starship_izido.txt.
- when: Displays the module only if both show_izido and starship_izido.txt exist.
- format: Specifies how the output appears in the prompt.

Resulting Prompt Structure

First Line: Displays a random saying followed by up to three pending todos with icons.
Subsequent Lines: Show the current time, Git branch, and current directory.

Step 2: Create the `izido.sh` Bash Script to Manage Your Todos

Create a script named izido.sh to handle todo operations.

Create the Script File

Create a new file called izido.sh:

touch izido.sh

Add the Following Content to `izido.sh`:

#!/bin/bash

IZIDO_FILE="$HOME/.config/starship_izido.txt"

# Ensure the izido task list file exists
touch "$IZIDO_FILE"

function add_izido() {
    local priority="$1"
    local due_date="$2"
    shift 2
    local task="${*// /_}"
    echo "pending,$priority,$due_date,$task" >> "$IZIDO_FILE"
    echo "Added: $task with priority $priority and due date $due_date"
}

function list_todos() {
    local filter="$1"
    if [ ! -s "$IZIDO_FILE" ]; then
        echo "No todos found."
        return
    fi
    printf "%-5s %-10s %-10s %-12s %s\n" "ID" "Status" "Priority" "Due_Date" "Task"
    awk -v filter="$filter" -F, '{
        if (filter == "" || $1 == filter || $2 == filter) {
            id=NR
            status=$1
            priority=$2
            due_date=$3
            task=$4
            status_color = (status == "pending") ? "\033[33m" : "\033[32m"
            priority_color = (priority == "high") ? "\033[31m" : ((priority == "normal") ? "\033[34m" : "\033[36m")
            printf "%-5d %s%-10s\033[0m %s%-10s\033[0m %-12s %s\n", id, status_color, status, priority_color, priority, due_date, task
        }
    }' "$IZIDO_FILE"
}

function mark_done() {
    local id="$1"
    if [ -z "$id" ]; then
        echo "Please provide the ID of the task to mark as done."
        return
    fi
    sed -i "${id}s/^pending/done/" "$IZIDO_FILE"
    echo "Marked task $id as done."
}

function remove_todo() {
    local id="$1"
    if [ -z "$id" ]; then
        echo "Please provide the ID of the task to remove."
        return
    fi
    sed -i "${id}d" "$IZIDO_FILE"
    echo "Removed task $id."
}

function clear_todos() {
    > "$IZIDO_FILE"
    echo "Cleared all todos."
}

function izido_view() {
    if [ "$1" == "on" ]; then
        touch ~/.config/show_izido
        echo "iZiDo on."
    elif [ "$1" == "off" ]; then
        rm -f ~/.config/show_izido
        echo "iZiDo off."
    else
        echo "Usage: $0 view {on|off}"
    fi
}

case "$1" in
  add)
    shift
    if [ "$1" == "-p" ]; then
        priority="$2"
        shift 2
    else
        priority="normal"
    fi
    if [ "$1" == "-d" ]; then
        due_date="$2"
        shift 2
    else
        due_date="none"
    fi
    add_izido "$priority" "$due_date" "$@"
    ;;
  list)
    list_todos "$2"
    ;;
  done)
    mark_done "$2"
    ;;
  remove)
    remove_todo "$2"
    ;;
  clear)
    clear_todos
    ;;
  view)
    shift
    izido_view "$1"
    ;;
  *)
    echo "Usage: $0 {add [-p priority] [-d due_date] task|list|done ID|remove ID|clear|view {on|off}}"
    ;;
esac

Explanation:

Shebang (#!/bin/bash): Specifies that the script runs with Bash.
IZIDO_FILE: Path to the todo list file.
Functions:
- add_izido: Adds a new todo with optional priority and due date.
- list_todos: Lists all todos, optionally filtered by status or priority.
- mark_done: Marks a todo as done based on its ID.
- remove_todo: Removes a todo based on its ID.
- clear_todos: Clears all todos.
- izido_view: Toggles the visibility of the Izido module in the prompt.
Argument Handling: Uses a case statement to handle commands (add, list, done, remove, clear, view).

Make the Script Executable

chmod +x izido.sh

Step 3: Configure the Script for Your Shell

Ensure that the izido.sh script is accessible from your shell by adding it to your shell's initialization file.

For Bash Users

Move the Script to a Directory in Your PATH

It's common to place custom scripts in ~/bin or ~/.local/bin. If you choose ~/bin, ensure it's in your PATH.

   mkdir -p ~/bin
   mv izido.sh ~/bin/

Add the Directory to Your PATH (if not already included)

Add the following line to your ~/.bashrc:

   export PATH="$HOME/bin:$PATH"

Source the Script in Your ~/.bashrc (Optional)

If you want to use aliases for convenience, add them to your ~/.bashrc:

   alias izido='bash ~/bin/izido.sh'

Reload your ~/.bashrc:

   source ~/.bashrc

For Zsh Users

Move the Script to a Directory in Your PATH

Place the script in ~/bin or ~/.local/bin:

   mkdir -p ~/bin
   mv izido.sh ~/bin/

Add the Directory to Your PATH (if not already included)

Add the following line to your ~/.zshrc:

   export PATH="$HOME/bin:$PATH"

Source the Script in Your ~/.zshrc (Optional)

Add aliases for convenience:

   alias izido='bash ~/bin/izido.sh'

Reload your ~/.zshrc:

   source ~/.zshrc

Step 4: Using the Izido Script

Enable the Izido Module in Your Prompt

To display todo reminders in your prompt, enable the Izido module:

./izido.sh view on

Output:

iZiDo on.

Add a New Todo

Add a new todo with optional priority and due date:

./izido.sh add -p high -d 2024-11-03 "Post to Dev.to"

Output:

Added: Post to Dev.to with priority high and due date 2024-11-03

List All Todos

List all current todos:

./izido.sh list

Output:

ID    Status     Priority   Due_Date     Task
1     pending    high       2024-11-03    Post to Dev.to

Mark a Todo as Done

Mark a todo as done using its ID:

./izido.sh done 1

Output:

Marked task 1 as done.

Remove a Todo

Remove a todo using its ID:

./izido.sh remove 1

Output:

Removed task 1.

Clear All Todos

Remove all todos:

./izido.sh clear

Output:

Cleared all todos.

Disable the Izido Module in Your Prompt

To hide the todo reminders:

./izido.sh view off

Output:

iZiDo off.

Step 5: Configure Shell Initialization (Optional)

To automatically load iZiDo when you start your terminal, you can add the enable command to your shell's initialization file.

For Bash Users

Add the following line to your ~/.bashrc:

izido.sh view on

For Zsh Users

Add the following line to your ~/.zshrc:

izido.sh view on

Reload your shell configuration:

Bash:

  source ~/.bashrc

Zsh:

  source ~/.zshrc

Step 6: See It in Action

Before Setting a Todo

Your prompt may appear as follows:

🕙 14:30:00 
││ on main
│…/izido ❯

After Adding a Todo

After adding a todo:

./izido.sh add -p high -d 2024-11-03 "Post to Dev.to"

Your prompt updates to:

┌─❮ Chop Wood, Carry Water.
📝 Post to Dev.to (Due: 2024-11-03)
🕙 14:30:00 
││ on main
│…/izido ❯

Final Thoughts

Integrating a custom module into your starship.toml and utilizing the izido.sh Bash script allows for managing and displaying todo reminders directly within your terminal prompt. This setup provides a method to keep track of tasks without leaving the terminal environment.

Resources

Share Your Experience

I am new to all this, so quite curious how others have customized their terminal prompts? Please, share your methods and tools in the comments.

IDMTR

Building a Custom Shipping Calculator with Stripe and Netlify Functions for Multi-Currency (€/$), Quantity, and Location Support

IDMTR — Thu, 31 Oct 2024 15:44:24 +0000

Commit 3c90066

Before you read any further, just as an FYI, I learn and code on my own to build what we need to run our business. So, please take the following information as is. It's a real world example we used for our own 📙 yellow book about coworking. At the time we couldn't find a better solution, so I build the following for our eCommerce website.

Selling a single product online, like a book, can be straightforward until you encounter the complexities of international shipping rates, multiple currencies, and varying quantities—especially since Stripe Checkout allows for only one shipping rate by default. In this article, let's walk through how we built a custom shipping calculator using Netlify Functions and Stripe to handle these challenges. By the end, you'll have a working solution tailored for selling up to three copies of a book, with dynamic shipping costs based on the customer's currency (EUR/USD), quantity, and location.

While this example is very specific to our needs, you can tweak it to suit your own requirements. Please feel free to share your solutions, upgrades, or any improvements you make.

🚀 Prerequisites

Before we dive in, make sure you have the following:

A Netlify account with a deployed site.
A Stripe account with test and live API keys.
Basic understanding of HTML, JavaScript, and serverless functions.
Familiarity with environment variables.

📝 Overview

Let's create a seamless checkout experience that:

Determines shipping costs based on the customer's currency, number of items, and location.
Supports both EUR and USD currencies.
Handles different shipping rates for European and worldwide destinations.
Integrates seamlessly with Stripe Checkout.

Bellow I will cover both the frontend (HTML and JavaScript) and the backend (Netlify Function) components.

📁 Project Structure

Project should include the following folders and files:

/functions
  - create-checkout-session.js
/index.html
.env
netlify.toml
package.json

/functions: Directory for Netlify Functions.
create-checkout-session.js: The custom serverless function.
index.html: The frontend HTML file.
.env: File to store environment variables
netlify.toml: The configuration file for Netlify.
package.json: Lists dependencies like stripe.

🛠️ Setting Up the Backend (Netlify Function)

Create a new file in your /functions directory named create-checkout-session.js.

// functions/create-checkout-session.js

// Add Stripe secret key
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.handler = async (event) => {
  // Parse the order data sent from the frontend
  const order = JSON.parse(event.body);

  // Define country groups
  const euCountries = ['AL', 'AM', 'AT', ...]; // Add the EU countries you ship to
  const worldCountries = ['AE', 'AR', 'AU', ...]; // Add worldwide countries you ship to
  let allowedCountries = [];

  // Payment methods based on currency
  let paymentMethods = [];

  // Determine shipping rates and allowed countries
  if (order.currency === 'EUR') {
    paymentMethods = ['card', 'sepa_debit', 'ideal', 'bancontact', 'p24', 'eps', 'giropay', 'sofort'];

    if (order.shippingOption === 'europe-eur') {
      allowedCountries = euCountries;
      // Set shipping rate IDs for Europe in EUR
      order.shippingRate = process.env[`SHIPPING_RATE_EUR_EU_${order.items}`];
    } else if (order.shippingOption === 'world-eur') {
      allowedCountries = worldCountries;
      // Set shipping rate IDs for World in EUR
      order.shippingRate = process.env[`SHIPPING_RATE_EUR_W_${order.items}`];
    }
  } else if (order.currency === 'USD') {
    paymentMethods = ['card'];

    if (order.shippingOption === 'europe-usd') {
      allowedCountries = euCountries;
      // Set shipping rate IDs for Europe in USD
      order.shippingRate = process.env[`SHIPPING_RATE_USD_EU_${order.items}`];
    } else if (order.shippingOption === 'world-usd') {
      allowedCountries = worldCountries;
      // Set shipping rate IDs for World in USD
      order.shippingRate = process.env[`SHIPPING_RATE_USD_W_${order.items}`];
    }
  }

  // Create the Stripe Checkout session
  const session = await stripe.checkout.sessions.create({
    payment_method_types: paymentMethods,
    line_items: [
      {
        price: order.priceId, // The price ID of your product
        quantity: order.items,
      },
    ],
    mode: 'payment',
    billing_address_collection: 'auto',
    shipping_rates: [order.shippingRate],
    shipping_address_collection: {
      allowed_countries: allowedCountries,
    },
    success_url: `${process.env.URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.URL}/cancel`,
  });

  return {
    statusCode: 200,
    body: JSON.stringify({
      sessionId: session.id,
      publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    }),
  };
};

🔍 Code Breakdown

Importing Stripe

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

Initializes the Stripe SDK with your secret key.

Handling the Event

Pars the incoming order data from the frontend.

exports.handler = async (event) => {
  const order = JSON.parse(event.body);
  // Rest of the code...
};

Defining Country Groups

const euCountries = [/* ... */];
const worldCountries = [/* ... */];
let allowedCountries = [];

Lists of countries for EU and worldwide shipping.
allowedCountries will be set based on the shipping option.

Setting Payment Methods

Determine the available payment methods based on the currency.

let paymentMethods = [];

Determining Shipping Rates

if (order.currency === 'EUR') {
  paymentMethods = [/* ... */];

  if (order.shippingOption === 'europe-eur') {
    allowedCountries = euCountries;
    order.shippingRate = process.env[`SHIPPING_RATE_EUR_EU_${order.items}`];
  } else if (order.shippingOption === 'world-eur') {
    allowedCountries = worldCountries;
    order.shippingRate = process.env[`SHIPPING_RATE_EUR_W_${order.items}`];
  }
} else if (order.currency === 'USD') {
  // Similar logic for USD
}

Uses environment variables to set the correct shipping rate ID based on currency, region, and quantity.
Example environment variable: SHIPPING_RATE_EUR_EU_1 for 1 item in Europe with EUR currency.

Creating the Checkout Session

const session = await stripe.checkout.sessions.create({
  payment_method_types: paymentMethods,
  line_items: [/* ... */],
  mode: 'payment',
  billing_address_collection: 'auto',
  shipping_rates: [order.shippingRate],
  shipping_address_collection: {
    allowed_countries: allowedCountries,
  },
  success_url: `${process.env.URL}/success?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${process.env.URL}/cancel`,
});

Creates a new Stripe Checkout session with dynamic configurations.

🛠️ Setting Up the Frontend

Below is a shortened example of the HTML and JavaScript code that interacts with our Netlify Function.

📄 HTML Structure (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Book Pre-Order</title>
  <!-- Include any CSS or Meta tags here -->
</head>
<body>
  <!-- Book Purchase Section -->
  <section id="pricing">
    <div class="pricing-content">
      <!-- Currency Tabs -->
      <ul class="tabs-menu">
        <li id="active_currency_eur" class="current"><a href="#tab-1">Buy in 🇪🇺 EUR</a></li>
        <li id="active_currency"><a href="#tab-2">Buy in 🇺🇸 USD</a></li>
      </ul>

      <!-- EUR Tab Content -->
      <div id="tab-1" class="tab-content">
        <h3>1 Print Book</h3>
        <p>A beautiful, 350 pages book.</p>
        <p>Price: <span id="book-price-eur">€95</span></p>

        <!-- Number of Books -->
        <label for="num-books">Number of Books (Max 3)</label>
        <select name="num-books" id="num-books" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <!-- Shipping Destination -->
        <label for="shipping-amount-eur">Select Shipping Destination</label>
        <select name="shipping-amount" id="shipping-amount-eur" required>
          <optgroup label="Europe €14">
            <option value="europe-eur">Austria</option>
            <option value="europe-eur">Belgium</option>
            <!-- Add other European countries -->
          </optgroup>
          <optgroup label="Worldwide €22">
            <option value="world-eur">United States</option>
            <option value="world-eur">Canada</option>
            <!-- Add other worldwide countries -->
          </optgroup>
        </select>

        <!-- Checkout Button -->
        <button id="checkout-button-eur" type="button">PRE-ORDER</button>
      </div>

      <!-- USD Tab Content -->
      <div id="tab-2" class="tab-content">
        <h3>1 Print Book</h3>
        <p>A beautiful, 350 pages book.</p>
        <p>Price: <span id="book-price-usd">$99</span></p>

        <!-- Number of Books -->
        <label for="num-books-usd">Number of Books (Max 3)</label>
        <select name="num-books-usd" id="num-books-usd" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <!-- Shipping Destination -->
        <label for="shipping-amount-usd">Select Shipping Destination</label>
        <select name="shipping-amount" id="shipping-amount-usd" required>
          <optgroup label="Europe $16">
            <option value="europe-usd">Austria</option>
            <option value="europe-usd">Belgium</option>
            <!-- Add other European countries -->
          </optgroup>
          <optgroup label="Worldwide $22">
            <option value="world-usd">United States</option>
            <option value="world-usd">Canada</option>
            <!-- Add other worldwide countries -->
          </optgroup>
        </select>

        <!-- Checkout Button -->
        <button id="checkout-button-usd" type="button">PRE-ORDER</button>
      </div>
    </div>
  </section>

  <!-- Include Stripe.js -->
  <script src="https://js.stripe.com/v3/"></script>

  <!-- Include your JavaScript file -->
  <script src="script.js"></script>
</body>
</html>

🔍 HTML Breakdown

Currency Tabs: Allows users to select between EUR and USD pricing.
Number of Books: Users can select up to three books.
Shipping Destination: Dropdowns populated with countries, grouped by shipping rates.
Checkout Buttons: Initiates the checkout process when clicked.

🚀 JavaScript Logic (`script.js`)

// script.js

// Stripe Button Click Event
document.querySelectorAll(".stripe-btn").forEach(function (button) {
  button.addEventListener("click", function () {
    if (button.classList.contains("stripe-btn")) {
      button.innerHTML = '<p>Loading ... <i class="icon-cart"></i></p>';
    }
  });
});

// Currency Tabs to switch between EUR and USD
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".tabs-menu a").forEach(function (tabLink) {
    tabLink.addEventListener("click", function (event) {
      event.preventDefault();
      // Toggle active class on tab buttons
      tabLink.parentElement.classList.add("current");
      tabLink.parentElement
        .parentElement
        .querySelectorAll(".current")
        .forEach((sibling) => {
          if (sibling !== tabLink.parentElement) {
            sibling.classList.remove("current");
          }
        });

      // Display only active tab content
      const activeTab = tabLink.getAttribute("href");
      document.querySelectorAll(".tab-content").forEach(function (content) {
        if (`#${content.id}` === activeTab) {
          content.style.display = "block";
        } else {
          content.style.display = "none";
        }
      });
    });
  });
});


// Event listeners for the checkout buttons
document.getElementById('checkout-button-eur').addEventListener('click', checkoutStripe);
document.getElementById('checkout-button-usd').addEventListener('click', checkoutStripe);

async function checkoutStripe(event) {
  let currency, shippingOption, numBooks, priceId;

  // Determine which button was clicked
  if (event.target.id === 'checkout-button-eur') {
    currency = 'EUR';
    shippingOption = document.getElementById('shipping-amount-eur').value;
    numBooks = parseInt(document.getElementById('num-books').value);
    priceId = 'PRICE_ID_EUR'; // Replace with your EUR price ID
  } else {
    currency = 'USD';
    shippingOption = document.getElementById('shipping-amount-usd').value;
    numBooks = parseInt(document.getElementById('num-books-usd').value);
    priceId = 'PRICE_ID_USD'; // Replace with your USD price ID
  }

  // Prepare the order data
  const orderData = {
    currency: currency,
    shippingOption: shippingOption,
    items: numBooks,
    priceId: priceId,
  };

  // Make a POST request to the Netlify Function
  const response = await fetch('/.netlify/functions/create-checkout-session', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(orderData),
  }).then((res) => res.json());

  // Redirect to Stripe Checkout
  const stripe = Stripe(response.publishableKey);
  const { error } = await stripe.redirectToCheckout({
    sessionId: response.sessionId,
  });

  if (error) {
    console.error(error);
    // Display error message to the user
  }
}

🔍 JavaScript Breakdown

Event Listeners: Attach click events to the checkout buttons.
Determining Order Details: Based on the clicked button, extract the currency, shipping option, number of books, and price ID.
Preparing Order Data: Create an object containing all necessary order information.
Fetching the Checkout Session: Send a POST request to the Netlify Function with the order data.
Redirecting to Stripe Checkout: Use the session ID returned from the backend to redirect the user to Stripe Checkout.

🔑 Setting Environment Variables

Make sure to add your product and shipping prices on Stirpe Dashboard.

On Stripe:

On Netlify:

Create a .env file in the root of your project and add your environment variables(or do it on the Netlify UI as shown above Site configuration > Environment variables):

# Stripe API keys
STRIPE_SECRET_KEY=sk_test_...
STRIPE_PUBLISHABLE_KEY=pk_test_...

# Your Netlify site URL
URL=https://your-netlify-site.netlify.app

# Price IDs from Stripe
PRICE_ID_EUR=price_1JNada...vxR5U
PRICE_ID_USD=price_1JNada...Swqw6

# Shipping rate IDs (replace with your actual IDs from Stripe), in our function, depending on the chosen number of books (1-3) those are dynamicly replaced.
SHIPPING_RATE_EUR_EU_1=shr_12345
SHIPPING_RATE_EUR_EU_2=shr_23456
SHIPPING_RATE_EUR_EU_3=shr_34567
SHIPPING_RATE_EUR_W_1=shr_45678
SHIPPING_RATE_EUR_W_2=shr_56789
SHIPPING_RATE_EUR_W_3=shr_67890

SHIPPING_RATE_USD_EU_1=shr_78901
SHIPPING_RATE_USD_EU_2=shr_89012
SHIPPING_RATE_USD_EU_3=shr_90123
SHIPPING_RATE_USD_W_1=shr_01234
SHIPPING_RATE_USD_W_2=shr_12345
SHIPPING_RATE_USD_W_3=shr_23456

Replace the values with your actual Stripe keys and shipping rate IDs.
Make sure to create these shipping rates in your Stripe dashboard.

📝 Updating `netlify.toml`

Configure Netlify to use environment variables in your functions:

[build]
  functions = "functions/"

[functions]
  node_bundler = "esbuild"

📦 Installing Dependencies

Run the following command to install the Stripe SDK:

npm install stripe

🧪 Testing the Function

Start Netlify Dev Server

   netlify dev

Place an Order

Open your index.html file in the browser.
Select your options and click the "PRE-ORDER" button.
Ensure that the correct shipping rates and payment methods appear in the Stripe Checkout.

Test Different Scenarios

Switch between EUR and USD currencies.
Change the shipping options and item quantities.
Confirm that the allowed countries match your configurations.

🎉 Conclusion

Et voilà! You've set up a custom shipping calculator function that dynamically adjusts shipping rates based on currency, quantity, and location.

Feel free to adapt and expand upon this setup to suit your own products and shipping policies.

📚 Additional Resources

Note: This article is based on a real-world scenario for pre-ordering/selling a single book with up to three copies and demonstrates one way to handle shipping calculations involving currency, quantity, and location variables. There might be more efficient methods depending on your specific needs.

What makes a good hackathon?

IDMTR — Tue, 28 May 2019 21:05:03 +0000

When you go to a hackathon what things make or break the experience for you?

Forem: IDMTR

Spice up Your Terminal With a Todo Reminder Using Starship Prompt and iZiDo Bash Script

Prerequisites

Step 1: Update Your starship.toml Configuration

Locate Your starship.toml

Modify the Configuration

Explanation:

Resulting Prompt Structure

Step 2: Create the izido.sh Bash Script to Manage Your Todos

Create the Script File

Add the Following Content to izido.sh:

Explanation:

Make the Script Executable

Step 3: Configure the Script for Your Shell

For Bash Users

For Zsh Users

Step 4: Using the Izido Script

Enable the Izido Module in Your Prompt

Add a New Todo

List All Todos

Mark a Todo as Done

Remove a Todo

Clear All Todos

Disable the Izido Module in Your Prompt

Step 5: Configure Shell Initialization (Optional)

For Bash Users

For Zsh Users

Step 6: See It in Action

Before Setting a Todo

After Adding a Todo

Final Thoughts

Resources

Share Your Experience

Building a Custom Shipping Calculator with Stripe and Netlify Functions for Multi-Currency (€/$), Quantity, and Location Support

🚀 Prerequisites

📝 Overview

📁 Project Structure

🛠️ Setting Up the Backend (Netlify Function)

🔍 Code Breakdown

Importing Stripe

Handling the Event

Defining Country Groups

Setting Payment Methods

Determining Shipping Rates

Creating the Checkout Session

🛠️ Setting Up the Frontend

📄 HTML Structure (index.html)

🔍 HTML Breakdown

🚀 JavaScript Logic (script.js)

🔍 JavaScript Breakdown

🔑 Setting Environment Variables

📝 Updating netlify.toml

📦 Installing Dependencies

🧪 Testing the Function

🎉 Conclusion

📚 Additional Resources

What makes a good hackathon?

Step 1: Update Your `starship.toml` Configuration

Locate Your `starship.toml`

Step 2: Create the `izido.sh` Bash Script to Manage Your Todos

Add the Following Content to `izido.sh`:

📄 HTML Structure (`index.html`)

🚀 JavaScript Logic (`script.js`)

📝 Updating `netlify.toml`