Skip to content

I Had a Good Meeting About Stripe Checkout With a Potential Client

September 18th, 2018

olavea

We talked about Stripe Checkout and lots of other stuff. I brought my largest sketchpad and we both sketched and wrote notes on it.

Planning a Stripe Checkout Project

We sat outside at my fav neighbourhood Café Vespa & Humla and planned a super secret project. Read more about Stripe Checkout here.

Stay tuned 😺

 

Ida Jackson og Ola Vea Stripe Checkout

How I Install Stripe Checkout in a landingpage from Carrd.co

September 15th, 2018

olavea

How I install Stripe Checkout in a landingpage from Carrd.co, 8 easy to follow screenshots.

 

1 Click “+” after “Choose a Starting Point” in carrd.co and after buying carrd Pro for $9 / year (yup, per year).

Install Stripe Checkout in carrd.co

 

 

2 Click “Widget”

Install Stripe Checkout in carrd.co

 

 

3 Change nothing, the Stripe Checkout comes automagically

Install Stripe Checkout in carrd.co

 

 

4 Write amount, choose currency, write your button label and click “require shipping address”.

Install Stripe Checkout in carrd.co

 

 

5 Translate the success and failure messages.

Install Stripe Checkout in carrd.co

 

 

6 Copy/paste your publishable key and your secret key from Stripe.

Install Stripe Checkout in carrd.co

 

 

7 Don’t use live keys like I just did. Use test keys.

Install Stripe Checkout in carrd.co

 

 

8 Click “View test keys”

Install Stripe Checkout in carrd.co

 

 

9 You are good to go out testing on your friends. It is free for them and free for you. 😺👍

Test the Stripe Checkout

I recommend testing the Stripe Checkout on real people. The Stripe Checkout is easy to use for customers and it is good for you to take a look at the test data. Test out different prices and different products on different people. Testing is good for you.

 

Set up a Stripe account to get Stripe Checkout

I will take some screenshot on how easy it is to set up a Stripe account.

 

Tutorial by the Great Gatsby.js Team

If you are curious what tutorial I have used in my screenshots it is from the great Gatsby.js team. Check out the tutorial here. Gatsby.js, blazing-fast static site generator for React. Follow them on twitter @gatsbyjs, UX researcher @shannonb_ux Lead dev @jlengstorf and the founder @kylemathews

 

Easy to use landingpages at Carrd.co

Follow the mysterious founder on twitter @ajlkn

 

Stripe is a global technology company that builds economic infrastructure for the internet

Follow them on twitter @stripe and the CEO @patrickc . Or read a little more about Stripe here:

The Cloud 100
The definitive ranking of the private companies to know in tech’s hottest sector. This list of breakout cloud companies ranges from bootstrapped giants to venture capital startup darlings

 

Ola function in Gatsbyjs plugin to Use Async Await

August 4th, 2018

olavea

I am helping on a Gatsbyjs plugin to pull in for example a photo from instagram with the instagram oembed api. I am working on a function.

Refactor fetchOembedProviders and fetchOembed to use async / await

Remove the use of .then() and use async/await instead on the fetchOembedProviders and fetchOembed functions in the helper.js file.

How To Use Async Await in a function?

To Use ‘await’ I need to mark the function with ‘async’ so that inside that function I can ‘await’ values. Says Wes Bes, at least that is what I am hearing from Wes Bos video 69 on es6 (buy the Wes Bos es6 video course here for $139)

 

I did not know where in the function to put the ‘async’ so I just tried out a couple of things. Here is one thing I tried, to wrap the function in an ‘ola’ function and let that ‘ola’ function be ‘async’. Then inside that ‘ola’ function I can ‘await’ values.

 

Gatsbyjs plugin

What if I wrap the function in an ‘ola’ function to Use Async Await?
If so:

  • where does the ‘async’ go?
  • where does the ‘await’ go?

Working on the Gatsbyjs Plugin In The Morning

August 2nd, 2018

olavea

Helping out Making a Gatsbyjs plugin

Some friends and me are making a plugin for photos and stuff in Gatsbyjs. The work I do is very basic, here I am testing out the ‘Read Me’ we have on github. You might know the friends, they are Benedicte Raae, Tom Erik Støwer and last but not least Martin Grimeland. The infamous MartinG.

Before starting:

I Checked My Version of the Code

Actually I didn’t. I went straight into the code on my own machine and tried to find ‘.then()’. I did a quick “Find” in the right file and when I couldn’t find it I Checked My Version of the Code.

 

Gatsbyjs Plugin Gatsbyjs Plugin Gatsbyjs Plugin

 

I changed my search term

Gatsbyjs Plugin

I changed my search term
from:

‘.then()’ to
‘.then(‘

Noooob mistake to search for both ‘()’ together, what if there was something between! Like for example (something).

Yeah people I spent my whole 24 minute breakfast code practice session looking around in different branches on github.com and looking in several files. Better luck after I have walked Lillian to ‘Frisk Bris’.

Better Luck Later

Lillian and I am going to take her Green Dragon Bike downhill to ‘Frisk Bris’. ‘Frisk Bris’ is like a kindergarten for kids 2-5 and every day of the work week the go on a short trip. Some days they hop on the bus and go on a long trip to the forests of Ammerud or the Viking Museum at Bygdøy.

Plugin for Photos and Stuff in Gatsbyjs

August 1st, 2018

olavea

Helping out Making a Gatsbyjs plugin

Some friends and me are making a plugin for photos and stuff in Gatsbyjs. The work I do is very basic, here I am testing out the ‘Read Me’ we have on github. You might know the friends, they are Benedicte Raae, Tom Erik Støwer and last but not least Martin Grimeland. The infamous MartinG.

Before starting:

I Checked My Development Environment

Gatsby.js plugin

In the screenshot above you see the Gatsbyjs tutorial part one.

 

You Should Install Gatsby CLI

If you don’t have it, I had it installed. Because Gatsby and me go waaaaay back. Like weeks and weeeeeks!

 

Gatsby.js plugin

Step 1: Initialize a Gatsby Starter Template

Use the Gatsby CLI to initialize a Gatsby starter template. gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog.

Gatsby.js plugin

 

Gatsby.js plugin

Step 2: Move the ‘cd blog’ directory

Gatsby.js plugin Gatsby.js plugin

I made a pull request on github.com 💪😺👍

 

Step 3: New Folder

Create a plugins folder mkdir plugins.

Step 4: Move Into Folder

Move into the plugins folder cd plugins.

Step 5: Clone Our Gatsbyjs Repo

Clone this repo `git clone git@github.com:lillylabs/gatsby-remark-oembed.git`

 

Gatsby.js plugin

Step 6: Add Some Code

Add the following to the plugins property of the gatsby-transformer-remark plugin in gatsby-config.js:

 {
   resolve: `gatsby-remark-oembed`
 },

Gatsbyjs Plugin Gatsbyjs Plugin

 

Step 7: Add link to Gatsbyjs

Add a oembed link to one of the markdown posts (pages) on a line with an empty line above and below.

 

Step 8: Serve Up Gatsbyjs

Serve up the page using gatsby develop.

 

Gatsbyjs Plugin

Something was wrong with my ‘npm’. So I wrote ‘install npm’ into the terminal.

Gatsbyjs Plugin

Step 9: Gatsbyjs Works, but I See No Transformation

Take a look at the post you added the oembed link to, and see it being transformed into something else.

 Gatsbyjs plugin