Phoenix App Setup

Introduction

Use this guide in the phoenix docs to Elixir, Erlang, Phoneix, NodeJS, and PostgreSQL. Thats alot, but trust me it’s worth it 🥇.

If you’re running macOS, I highly recommend Postgres.app to run postgres, and Postico as a nice GUI client. Both made by the same wonderful people, at EggerApps 😍.

Once you have everything setup, let’s run this command to create our application.

mix phx.new amazin --live

Choose yes to install dependencies and follow the instructions to start the app.

Once running, let’s open http://localhost:4000/ to see the phoenix welcome page 😎.

Phoenix has everything you need to deploy to production, including tailwind! There’s just a few more dependencies we need for our specific application:

1. Money: A currency formatter.
2. stripity_stripe: A client library for working with the stripe API.

Add them to your deps in mix.exs

def deps do
  [
    {:money, "~> 1.12"},
    {:stripity_stripe, "~> 3.0"},
  ]
end

I really like tailwind as a companion to phoenix-live-view because of it’s functional-composable nature. It makes it really easy to style our live views!

Then run —

mix deps.get

This part is a bit boring… but the payoff is worth it 🤞🏻 We need to add a couple pieces of configuration.

1. We need to configure stripity_stripe with our Stripe API key and webhook secret.
2. We need to configure the money package with a default currency.

You can grab the Stripe API secret key from the stripe developer page of your stripe account.

Take great care with the secret key, like the name says, it’s secret 🤫 Once you have your API keys, create a new file: config/dev.secret.exs.

Inside that config/dev.secret.exs file, you can now safely add the keys from stripe —

import Config

config :stripity_stripe, api_key: "YOUR_SECRET_KEY"

Add config/dev.secret.exs to your .gitignore —

# Ignore development secrets
/config/dev.secret.exs

In our dev configuration we are going to load that secret file we just created. Make sure to put this at the very bottom of config/dev.exs —

import_config "dev.secret.exs"

Now in the main configuration file we are going to give our default currency. I’m using USD, but you can use any currency you’d like. A full list can be found in the docs of Money.

config :money, default_currency: :USD

Now you should be able to start the app and communicate with stripe! Let’s test that out. Start an interactive session of your application with:

iex -S mix

Then inside iex, run —

iex(1)> Stripe.PaymentIntent.list

and you should see something like —

{:ok,
 %Stripe.List{
   data: [],
   has_more: false,
   object: "list",
   total_count: nil,
   url: "/v1/payment_intents"
 }}

And with that, we are all set up! Now the fun begins 😈

Finished application on github.