Forem: Fidel API

What Do Exotic Programming Languages and Single-origin Coffee Beans Have in Common?

Jorge Díaz — Thu, 24 Jun 2021 12:01:18 +0000

This blog post started when I wanted to combine two of the things I love: playing around with different programming languages and brewing my own coffee with different beans from all around the world. Then, that got me thinking: how do some of the most interesting programming languages I've used relate to some of the most delicious and peculiar beans I've had the chance to taste?

Mind you, I don't consider myself to be an expert on either of the two. I can, however, share enough knowledge today so that you can learn something new! And, who knows, maybe you’ll be inspired enough to try out a new language or coffee variety.

Without further ado, make yourself a coffee, take a seat and enjoy my coffee/programming language pairings!

Ada and Venezuelan coffee: Utterly great - almost perfect - and incredibly difficult to find

I'll start things by coming clean: Ada is my favourite programming language. And I'm originally from Venezuela. So there's going to be some bias here. However, I'm pretty sure anyone who’s tried Ada can admit that it's a hell of a language! And Venezuela has always been pretty well known for its amazing coffee and cocoa beans, so hopefully, I'm not too detached from the truth anyway.

What makes them so great, then? When it comes to Ada, one has to first understand what it was made for: highly secure and reliable systems. Which explains many of the things surrounding the language; a very strict type system that's also incredibly expressive, it possesses a weird array and string types that force you to always define their size so that the compiler can guarantee that there's not going to be an overflow. Plus, its syntax, while seemingly verbose at first, is very well suited for readability (something that makes a lot of sense, given that we spend way more time reading software than writing it).

All in all, Ada is a very well-thought-out programming language that makes way too much sense most of the time and thus, in my opinion, lends itself quite well for learning programming concepts, since it's a language that aids you a lot in your thinking process.

Unfortunately, though, it's garnered a bad rap since the very beginning for its relation with the US Department of Defence and being a closed language with a paid compiler. Nowadays, you can download a free version of it, but it’s still not widely used. Many issues you'll find while developing will not be as simple to solve as doing a Google search or looking on Stack Overflow.

As for Venezuelan coffee: if you can imagine how good coffee should taste like, then you pretty much know why it's so highly regarded. Because of the country’s currently “fragile” state, it's not as readily available in your everyday roaster coffee shop. Same as with Ada, if you get your hands on it, please try it. You won't regret it!

with Ada.Text_IO; use Ada.Text_IO;

procedure Drinking_Venezuelan_Coffee is
    type Level_Type is range 0 .. 100;
    type Coffee_Origin_Type is (Venezuela, Kenya, Rwanda, Sumatra);

    type Coffee_Mug is record
        Level : Level_Type;
        Coffee_Origin : Coffee_Origin_Type;
    end record;

    procedure Fill_Mug (M : in out Coffee_Mug) is
    begin
        case M.Level is
            when 0 .. 99 => 
                M.Level := Level_Type'Last;
                Put_line ("Mug filled!");
            when others => 
                Put_Line ("Mug is already full!");
        end case;
    end Fill_Mug;

    My_Mug : Coffee_Mug := (Level => 0, Coffee_Origin => Venezuela);
begin
    Fill_Mug (My_Mug);
end Drinking_Venezuelan_Coffee;

Pony and Kenyan coffee: Down-to-earth and inconspicuous, but full of flavour

What I like a lot about Kenyan coffee is that it's a very grounded coffee. You can almost taste the earth with every sip of it. If you don't get what I mean, imagine the amazing smell of earth just before it rains. Yep, Kenyan coffee tastes that good!

That same feeling is the one I get whenever I do something with the Pony language. Pony is a very welcoming programming language because it doesn't try to be more than it is. And yet, what it has to offer is quite powerful and unique. For starters, Pony is an actor based language. If you are familiar with Erlang or using channels, you'll get the gist of it. But if not, think of every actor as a living object (or process) that communicates with other actors by sending and receiving messages. This already makes Pony quite suitable for concurrent systems and programs, but there's more: Pony is also a capabilities based programming language, in which everything has a set of rules that tells you what you can and cannot do with it. For instance, a variable with the Value capability is read-only, which means that you can safely share it between your actors. A variable with the Reference capability is mutable, which means that you can't pass it around. There are of course many more of them, but hopefully you got the gist of it. All of this comes packaged in a nice syntax that reminds me of Python, which is always a nice language to read.

Did it sound compelling? I hope it did! And if you decide to try Pony, please ask a friendly barista to make you a cup of Kenyan coffee to go along with it. You can have it however you like, but I recommend it black and without sugar.

actor Customer
  let name: String
  var _coffee: String = ""

  new create(name': String) =>
    name = name'

  be ask_for_coffee(b: Barista) =>
    b.prepare_coffee(this, name)

  be receive_coffee (coffee': String) =>
    _coffee = coffee'

actor Barista
  let available_coffee: String
  let _out: OutStream

  new create(available_coffee': String, out: OutStream) =>
    available_coffee = available_coffee'
    _out = out

  be prepare_coffee(c: Customer, name: String) =>
      _out.print("One " + available_coffee + " coffee for " + name)
      c.receive_coffee(available_coffee)

actor Main
  new create(env: Env) =>

  var barista = Barista("Kenyan", env.out)
  var customer = Customer("Jane")

  customer.ask_for_coffee(barista)

Reason and Rwandan coffee: Familiar on the outside, amazingly exciting on the inside

If there's something that Reason and Rwandan coffee have in common, is that they both look like something else at first glance. When it comes to Rwandan coffee it just looks like, well, any other coffee, but when you try it… uff, it's like no coffee you've ever had!

As for Reason, from a syntax point of view, it's eerily similar to JavaScript. This happens for a good reason (pun intended): it's a language mostly directed at JavaScript developers. Reducing "grammar friction" is one of its objectives. However, under that first superficial layer of familiarity lies a different language in many, many ways.
First off, Reason, unlike JavaScript, is powered by OCaml. You could say that it's a syntax layer on top of OCaml. At its core, it has the kind of strong and rich type system that JavaScript could only dream of (I still love you, JavaScript, just not in the same way!). With Reason, you'll be able to construct better software that's easier to rely on. In addition to that, you can compile to both JavaScript and OCaml, giving you access to two very mature ecosystems at once. Oh, and if you needed one more reason (yes, pun intended… again) to try it, two words: pattern matching. Think of it as a sort of switch statement that lets you match the shape of your data instead of just doing it by an explicit value. Trust me, once you use a language with pattern matching, you'll miss it whenever you're using one that doesn't!

If you feel like trying out something new but don't feel like going too far from your comfort zone, be it other kinds of coffee or programming languages with C style syntax, then maybe you should consider checking out Reason or Rwandan coffee, you can't go wrong with either one!

let workingHours = 8;
let workStartsAt = 9;
let myPreferredDrink = "Rwandan coffee";

let translateTime = (hour) => 
  hour < 13 
  ? string_of_int(hour) ++ "AM" 
  : string_of_int(hour - 12) ++ "PM";

let whatToDo = (firstHour, currentHour, drink) => {
  let timeOfDay = firstHour + currentHour;
  let atTime = (predicate) => 
      "At " ++ translateTime(timeOfDay) ++ predicate ++ "!";

  switch (timeOfDay, timeOfDay mod 2) {
  | (_, 0) => atTime(" drink more " ++ drink) 
  | (13, _) => atTime(": Lunch break")
  | _ => atTime(" drink " ++ drink)
  };
};

for (hour in 0 to workingHours) {
  Js.log(whatToDo(workStartsAt, hour, myPreferredDrink))
};

Idris and Sumatran coffee: Strange, hard to grasp and filled with incredible depth

When it comes to programming languages that I enjoy playing around with, a certain group of so-called functional programming languages is at the top. One of the most popular in that group is Haskell, from which Idris takes a lot of cues.

One of the core tenants of a functional programming language is that functions are first class citizens. You can treat them as you would any other value, which allows for pretty powerful things like returning functions or passing them around as arguments to other functions. They also tend to feature very strong type systems. However, one other thing that makes languages such as Idris so special is their declarative syntax style, which looks more as if you were describing things instead of the more intuitive command-like style (do this, then that) of writing imperative style code.

Sumatran coffee is also a very special kind of coffee because of the way in which it's processed, as well as the kind of climate where it grows. This makes it so that Sumatran coffee tastes quite different from what you would expect coffee to taste like. It tastes almost foreign to someone more used to the kind of "regular" coffee you would find at your average café. In the same way, Idris or Haskell look almost foreign to someone used to more imperative programming languages like C or Java.

Yet, besides all that, Idris most distinctive feature is not that it's a functional programming language per se, but rather something more unique: dependent types. You can enhance a type by providing a value together with it. A good example for this would be the concat function, which would be typed something like List n t -> List m t -> List (n + m) t. The first argument will be a list of n elements, the second a list of m elements and the result will be a list with n + m elements. How cool is that?! With dependent types, you gain a whole new level of control over what to expect from your code. In my book, that’s always good.

Whenever you're ready to try something different and exciting, be it Idris, Sumatran coffee or (even better) both: be prepared and enjoy the ride!

isSumatranCoffee : String -> Bool
isSumatranCoffee "Sumatran" = True
isSumatranCoffee _ = False

drinkOrPass : String -> String
drinkOrPass coffee = case isSumatranCoffee coffee of
  True => "I'll have some of that Sumatran coffee, please!"
  False => "No thanks, I’d rather have something else"

main : IO ()
main = putStrLn (drinkOrPass "Sumatran")

There are of course many other programming languages and coffee beans that are worth talking about. Like Nicaraguan coffee with its acidic notes, the aromatic wonder that Ethiopian coffee is, the esoteric 8th with its stack-based syntax or Clojure (which is a cool language (based on Lisp (which means (it uses lots of parentheses)))).

Hopefully, I got to pique your curiosity on at least one of the combos that I paired above. Few things are as fun as trying new programming languages. Combine that with a cup of coffee made with freshly roasted beans, and you're all set!

How to Build a Card-Linked Application With Node.js, React and the Fidel Web SDK

Alex Lakatos 🥑 — Mon, 24 May 2021 13:08:50 +0000

Fidel makes it simple to add card-linking capabilities to any application. The process involves setting up a program, along with the participating brands and locations. And then registering or helping your users register their cards on the Fidel platform. Once they are live, Fidel receives transactions from participating locations and will pass them along to your application using webhooks. You can register your webhook URLs in the Fidel Dashboard and start receiving the transaction data.

What Are We Building?

There are two main steps in the process, and this tutorial is going to walk you through building an application with a card-linking feature.

The first requirement is to register user cards on the Fidel platform. Fidel provides SDKs to use within your applications to help you register cards simply and securely. This tutorial will show you how to use the Fidel Web SDK in a React application to register cards.

The second part of the card-linking process is the flow of transaction data from participating locations whenever a user makes a purchase with a registered card. For delivering the flow of transactions to your application, the Fidel platform uses webhooks. This tutorial is going to walk you through setting up a Node.js server that listens for transaction data, register it with the Fidel platform using ngrok, and start receiving transactions. You'll also use the server to send the transactions to the React client after receiving them, so you can display them in the UI.

Prerequisites

Before you begin, make sure you've got a few things:

A Fidel Account. You can create one via the Fidel Dashboard if you don't already have one!
Node.js v12.22.1 or higher installed.
A ngrok account.
ngrok installed and set up.

Build the Client Application to Link Cards

You'll first build a React client to use the Fidel Web SDK and give your application the ability to link cards to your Fidel program.

Create React Application

Let's go ahead and create a new React application using create-react-app. After you've generated a new project called fidel-card-linking-tutorial, run it using the generated npm start.

$ npx create-react-app fidel-card-linking-tutorial
$ cd fidel-card-linking-tutorial
$ npm start

You should have a blank new React application running in your browser on port 3000. The generated files should look similar to this:

.
├── README.md
├── package.json
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

2 directories, 17 files

Add Tailwind CSS

You'll want to create a nice-looking application, and for that, a CSS framework is probably the simplest to use option. Let's go ahead and add TailwindCSS to the empty React application. Add a line in the <head> section of the /public/index.html file:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Add Empty Layout

After you've included Tailwind into the empty project, let's remove the boilerplate code in the /src/App.js file and replace it with an empty application shell. It's already set up to have a header and a table to display the transaction data you'll get from Fidel.

import { ReactComponent as Logo } from "./assets/logo.svg";

function App() {
  const headers = ["Amount", "Cashback", "Scheme", "Card", "Brand", "Location", "Status", "Date↓"]

  return (
    <div className="App h-full">
      <div className="h-full overflow-x-hidden">
        <nav className="bg-white shadow">
          <div className="flex flex-col container mx-auto md:flex-row md:items-center md:justify-between">
            <div className="flex justify-between items-center">
              <div className="flex justify-between items-center">
                <a href="https://fidel.uk/docs" className="w-full">
                  <Logo style={{ width: "90px", height: "60px" }} />
                </a>
                <button
                  className="ml-10 w-full bg-blue-700 hover:bg-blue-900 text-white py-2 px-4 rounded">
                  Add Card
                  </button>
              </div>
            </div>
            <div className="md:flex flex-col md:flex-row md:-mx-4">
              <a
                href="https://fidel.uk/docs/web-sdk"
                className="my-1 hover:text-gray-800 text-blue-700 md:mx-4 md:my-0"
              >
                Documentation ↗
              </a>
            </div>
          </div>
        </nav>

        <div className="px-6 py-2 py-8">
          <div className="flex justify-between container mx-auto">
            <div className="w-full">
              <div className="flex items-center justify-between">
                <h1 className="text-xl text-gray-700 md:text-2xl">
                  Transactions
                </h1>
              </div>
              <div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 py-2 lg:-mx-8 pr-10 lg:px-8">

                <div className="align-middle">
                  <table className="min-w-full">
                    <thead>
                      <tr>
                        {headers.map(header => (
                          <th className="px-6 py-2 py-3 text-left text-gray-400 font-light text-sm">{header}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody className="bg-white">
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div >
  );
}

export default App;

Add Logo Components

You've probably noticed your application is failing to compile now. And that's because you haven't yet added the logo component that's being used in the empty application shell above. To do that, create a new assets folder inside the /src directory, and create an empty logo.svg file. Now

$ mkdir src/assets
$ touch src/assets/logo.svg

Your application is still going to fail to compile, but with a new error. And that's because the empty SVG file should actually be a valid SVG. Replace the contents of /src/assets/logo.svg with the Fidel logo:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="802px" height="407.6px" viewBox="0 0 802 407.6" style="enable-background:new 0 0 802 407.6;" xml:space="preserve">
<style type="text/css">
</style>
<g>
  <g>
    <path class="st0" d="M101.3,286.7h45v-65.3h30.8l17.9-36.2h-48.7v-27.5H195v-36.2h-93.7V286.7z M231.7,286.7h45.5V121.5h-45.5
      V286.7z M422.7,141.4c-7.8-6.7-17.1-11.8-27.7-15.2c-10.6-3.4-22.1-5.2-34-5.2h-42.9v165.7H361c14.8,0,27.9-2.2,38.9-6.6
      c10.9-4.3,20-10.4,27.1-17.9c7.1-7.6,12.4-16.5,15.9-26.6c3.5-10.3,5.3-21.3,5.3-32.9c0-13.6-2.3-25.7-6.9-35.9
      C436.7,156.5,430.4,148,422.7,141.4z M392.9,236.9c-6.9,7.9-16.9,11.9-29.7,11.9h-3.6v-90h3.6c26.2,0,40,15.6,40,45.1
      C403.2,218,399.7,229.1,392.9,236.9z M482.3,286.7H576v-37.9h-48.7v-27.4H576v-36.2h-48.7v-27.5H576v-36.2h-93.7V286.7z
       M660.9,248.8V121.5h-44.9v165.2h84.8v-37.9H660.9z"/>
  </g>
</g>
</svg>

Add the Fidel Web SDK

Now that your application compiles successfully, you'll see an empty table layout with a button above that prompts you to "Add Card". At this stage, the button doesn't do anything, so you'll need to add that capability to the React application. This is where the Fidel Web SDK comes in handy. We'll add the SDK to the application, so we can start registering cards on the Fidel Platform.

First, at the top of your /src/App.js file, import useEffect from React.

import { useEffect } from "react";

The Fidel Web SDK is a JavaScript file hosted at https://resources.fidel.uk/sdk/js/v2/fidel.js. The required attributes for functioning correctly are the Fidel SDK Key, the Program Id and the company name.

You can find the SDK Key in the "Account" section of the Fidel Dashboard. For the purpose of this tutorial, use the Test SDK Key. It should start with pk_test_. The Program Id can be found in the "Program" section of the Dashboard. The Demo Program that comes with each new account has a contextual menu that you can use to copy the program ID. For the company name, you can use anything you want. For the purposes of this tutorial, use something generic like "Fidel Card-Linking Application".

To add the SDK to your application, use an effect that runs only once at startup to create a <script> tag with the Fidel SDK, add the required attributes to it, and then append it to the document body. In the App() function of the /src/App.js file, add the effect:

function App() {
  const headers = ["Amount", "Cashback", "Scheme", "Card", "Brand", "Location", "Status", "Date↓"]

  useEffect(() => {
    document.getElementById("fidel-form")?.remove();

    const sdkScript = document.createElement("script");
    sdkScript.src = "https://resources.fidel.uk/sdk/js/v2/fidel.js";
    sdkScript.id = "fidel-form";

    const attributes = {
      "data-auto-open": "false",
      "data-key": process.env.REACT_APP_FIDEL_SDK_KEY,
      "data-program-id": process.env.REACT_APP_FIDEL_PROGRAM_ID,
      "data-company-name": "Fidel Card-Linking Application",
    };

    Object.keys(attributes).forEach((key) =>
      sdkScript.setAttribute(key, attributes[key])
    );

    document.body.appendChild(sdkScript);
  }, []);

  return (
    ...
  )
}

export default App;

Because you've set auto-open to false in the SDK attributes, the SDK overlay will only show if called, with Fidel?.openForm(). Add a onClick handler to the "Add Card" button to open the SDK overlay when clicked.

<button
  onClick={() => window.Fidel?.openForm()}
  className="ml-10 w-full bg-blue-700 hover:bg-blue-900 text-white py-2 px-4 rounded">
  Add Card
</button>

Create Environment File

You might have noticed the example code didn't hardcode the values of the SDK key and program id but rather used environment variables. The generated React application already has support for environment variables. To use them, you need to create an .env file.

$ touch .env

Add variables to it, and fill out the values for your SDK key and program Id in REACT_APP_FIDEL_SDK_KEY and REACT_APP_FIDEL_PROGRAM_ID.

PORT=3001
REACT_APP_SERVER=http://127.0.0.1:3000
REACT_APP_FIDEL_SDK_KEY=
REACT_APP_FIDEL_PROGRAM_ID=

Because you've added the PORT environment variable, your application will now run on port 3001 and leave port 3000 open for the server we'll build in a minute. You'll need to restart your application withnpm start. Your application should compile successfully and run at "http://localhost:3001/". If you click the "Add Card" button, a model should pop up with a form to link a card.

Test Card Numbers

Because you're using the Test SDK key in your application, you won't be able to link a real card in the SDK. There are a few options for test card numbers available in the documentation. You can add a test Visa card, for example, by using the card number 4444 0000 0000 4001 and set an expiration date in the future, with a participating country of issue from the dropdown.

Congratulation, you have successfully added the ability to register cards to your React application and used it to link your first card on the Fidel platform!

Server Listening For Webhook Events

To start receiving transactions from your linked card, you'll need to register webhooks in the Fidel Dashboard. Before you can register them, you'll need to build them. Create a new server.js file at the root of your fidel-card-linking-tutorial folder.

$ touch server.js

Let's go ahead and implement a fairly standard Node.js server, using express, that listens on port 3000. First, install the dependencies with $ npm install express cors and then add some boilerplate code to the server.js file.

import express from 'express'
import { createServer } from 'http'
import cors from 'cors';

const PORT = 3000

const { json } = express;

const app = express()

app.use(json())
app.use(cors())

const server = createServer(app)

server.listen(PORT, () => {
    console.log(`Server listening at http://localhost:${PORT}`)
})

The Fidel platform can register a multitude of webhooks, so let's add a generic catch-all route /api/webhooks/:type that deals with webhooks and sends back a 200 OK response. If your webhook doesn't return a 200 status, the Fidel platform retries sending the webhook until it receives a 200 status.

app.post('/api/webhooks/:type', (req, res, next) => {

    res.status(200).end()
})

If you try to run the server as is right now, you'll get an error saying you "Cannot use import statement outside a module". And that's because you're using modern import statements in your Node.js code. You'll need to update the package.json with a new line to support imports.

"type": "module"

It would also be helpful if you could run both the React client and the Node.js server with the same command. Update the start script inside package.json to run the server and the client at the same time. You'll need to run npm start again after you're done.

"scripts": {
    "start": "node server.js & react-scripts start",
  },

Register Webhooks with Fidel

Now that you have created a server listening for webhooks, it's time to register those webhooks on the Fidel platform. Your webhooks need to be publicly accessible on the Internet for Fidel to be able to access them. Sadly, localhost is not publicly accessible, so you'll need to use ngrok to make it so.

There are a few other options here. Usually, with production code, you'll have it deployed somewhere with a URL. Or you'll have a load balancer in front of your code, and that will be publicly accessible. But for exposing local code, there aren't many options that don't involve a deployment. This is where ngrok comes in handy. It's a tunnelling software that creates a connection between a public URL they host, like https://someRandomId.ngrok.io, and a port on your local machine.

Because the server is running on port 3000, you'll start ngrok on that port with the http option. You'll get back a random-looking URL that is publicly accessible on the Internet, and you can use it as the base of your webhook URLs. For example, https://a709be896425.ngrok.io.

After you've got a ngrok URL, you can go ahead and register a couple of webhooks in the Fidel Dashboard. For the purposes of this tutorial, register the transaction.auth webhook on the "Demo Program" to https://a709be896425.ngrok.io/api/webhooks/transaction.auth. Follow the same URL convention for registering the transaction.clearing and transaction.refund webhooks as well.

Congratulations, you've registered your first webhooks with Fidel. You can start receiving transaction data!

Socket.io to Glue It All Together

You've probably noticed your server can receive transaction data from Fidel, but it doesn't do anything with that data. That's because what you do with that data depends heavily on your application use case. For the purpose of this tutorial, let's send that transaction data from the server to the React client, so you can display it in the UI.

Because the data comes from a webhook, your server doesn't have a lot of control over when it receives the data. Hence, your client can't keep asking for data that isn't there. Because of the event-driven nature of webhooks, long polling is not a great mechanism to pass data. There are a few options, mainly HTTP/2 Server Push, Node.js streams or Web Sockets. You can use something like socket.io, which combines WebSockets with long polling to ensure maximum browser compatibility while you pass the transaction data from the server to the client. And you'll use just that for this tutorial. Let's go ahead and install the dependencies with $ npm install socket.io socket.io-client.

Add Socket.io to the Server

You'll need to add the socket mechanism to the server first. Import the Server from socket.io at the top of your server.js file.

import { Server } from 'socket.io'

Before the webhook route is defined, instantiate a new socket Server, and log to the console every time a client connects to the socket. Update the webhook route handler to emit on the socket every time there is new transaction data coming from Fidel.

const io = new Server(server, {
    cors: {
        origin: "http://localhost:3001",
        methods: ["GET", "POST"]
    }
})

io.on('connection', (socket) => {
    console.log('a client connected')
})

app.post('/api/webhooks/:type', (req, res, next) => {
    io.emit(req.params.type, req.body)

    res.status(200).end()
})

Now that the server is completed restart it with npm start.

Add Socket.io to the Client

You'll need to add socket.io to the client as well, in order to receive the transaction data and display it. At the top of your /src/App.js file, import socketIOClient from socket.io-client and useState from react.

import { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";

After you've imported the socket in your /src/App.js, you need to create a new socketIOClient in an effect. And register a listener that sets the transactions state on any incoming data.

function App() {
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    const socket = socketIOClient(process.env.REACT_APP_SERVER);

    socket.onAny((type, transaction) => {
      setTransactions([{ type, transaction }, ...transactions]);
    });

    return () => socket.disconnect();
  });
  return (
    ...
  )
}

Create Transaction Component

Now that we've got the data coming into the React client, let's create a Transaction component that displays it. First, create a components folder inside the src folder, and create an empty Transaction.js file in it.

$ mkdir src/components
$ touch src/components/Transaction.js

A transaction has a type and information about the currency, amount, card scheme, card number, store brand, name and location, and date of creation. Let's create a component that displays all that data to match the empty table we used in the initial empty shell for our application.

import React from "react";

import { formatCard } from "../utils";

import { ReactComponent as Amex } from "../assets/amex-icon.svg";
import { ReactComponent as Visa } from "../assets/visa-icon.svg";
import { ReactComponent as Mastercard } from "../assets/mastercard-icon.svg";

import TransactionStatus from "./TransactionStatus";

const Transaction = ({ transaction, type, transactions }) => {
    return (
        <tr>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">
        <div className="flex items-center justify-between">
          <span className="text-gray-400">{transaction?.currency}</span> 
          <span>{transaction?.amount}</span>
        </div>
      </td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">
        <span className="text-gray-400">--</span>
      </td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">
        {(transaction?.card?.scheme.toUpperCase() === "AMEX") && (<Amex />)}
        {(transaction?.card?.scheme.toUpperCase() === "VISA") && (<Visa />)}
        {(transaction?.card?.scheme.toUpperCase() === "MASTERCARD") && (<Mastercard />)}
      </td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm text-gray-400">{formatCard(transaction?.card)}</td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">{transaction?.brand?.name}</td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">{transaction?.location?.address}</td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">
        <TransactionStatus status={type} />
      </td>
      <td className="px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm">{new Date(transaction?.created).toLocaleString()}</td>
    </tr>
    );
};

export default Transaction;

For the application to compile, you'll need to create a few of the things we already used in the Transaction component. Start with the TransactionStatus component in the same folder as the Transaction component.

$ touch src/components/TransactionStatus.js

A transaction can have three statuses: authorized, cleared and refunded. The information is contained in the transaction type being passed from the server in the socket. Let's use that data to have a different coloured pill for the status and make it instantly recognizable in the UI.

import React from "react";

const TransactionStatus = ({ status }) => (
  <div>
    {(status === "transaction.auth") && (
      <span className="relative inline-block px-3 py-1 font-semibold text-yellow-500">
        <span aria-hidden className="absolute inset-0 bg-yellow-200 opacity-50 rounded-full"></span>
        <span className="relative text-xs">Auth</span>
      </span>
    )}
    {(status === "transaction.clearing") && (
      <span className="relative inline-block px-3 py-1 font-semibold text-green-500">
        <span aria-hidden className="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
        <span className="relative text-xs">Cleared</span>
      </span>
    )}
    {(status === "transaction.refund") && (
      <span className="relative inline-block px-3 py-1 font-semibold text-red-500">
        <span aria-hidden className="absolute inset-0 bg-red-200 opacity-50 rounded-full"></span>
        <span className="relative text-xs">Refund</span>
      </span>
    )}
  </div>
);

export default TransactionStatus;

You'll also need to create the icons for the three card networks in the assets folder as SVGs, the same as you did for the Fidel logo.

First, create the Amex icon.

$ touch src/assets/amex-icon.svg

<svg width="34" height="8" viewBox="0 0 34 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M30.8291 0L29.0156 2.53729L27.2136 0H25L27.951 3.99979L25.0099 8H27.1602L28.9735 5.42863L30.7864 8H33L30.0379 3.96571L32.9789 0H30.8291Z" fill="#2D6EB6"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 0V8H25V6.38813H20.8003V4.77733H24.9038V3.17724H20.8003V1.62323H25V0H19Z" fill="#2D6EB6"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.895 0L13.5001 5.66873L12.0946 0H9V8H10.7101V2.53765L10.6678 0.37783L12.7028 8H14.2976L16.3322 0.423478L16.2905 2.52586V8H18V0H14.895Z" fill="#2D6EB6"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29308 0L0 8H1.96474L2.61245 6.28552H6.26715L6.92556 8H9L5.71824 0H3.29308ZM3.87452 2.98299L4.43455 1.48624L4.99396 2.98299L5.6744 4.75448H3.2052L3.87452 2.98299Z" fill="#2D6EB6"/>
</svg>

Second, create the Mastercard icon.

$ touch src/assets/mastercard-icon.svg

<svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.64941 11.4892H13.32V1.3754H7.64941V11.4892Z" fill="#F75B1B"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.01018 6.43222C8.01018 4.38046 8.97821 2.5532 10.4854 1.37531C9.38287 0.513856 7.99213 0 6.48032 0C2.90126 0 0 2.87996 0 6.43222C0 9.98447 2.90126 12.8644 6.48032 12.8644C7.99213 12.8644 9.38287 12.3506 10.4854 11.4891C8.97821 10.3113 8.01018 8.48397 8.01018 6.43222Z" fill="#E20025"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.769 10.4177V10.1683H20.7032L20.6278 10.34L20.5524 10.1683H20.4866V10.4177H20.5327V10.2294L20.6035 10.3919H20.6517L20.7225 10.229V10.4177H20.769ZM20.353 10.4177V10.2106H20.4372V10.1686H20.2228V10.2106H20.3069V10.4177H20.353ZM20.9713 6.43179C20.9713 9.98447 18.07 12.864 14.491 12.864C12.9792 12.864 11.5884 12.3501 10.4863 11.4887C11.9935 10.3113 12.9612 8.48361 12.9612 6.43179C12.9612 4.38003 11.9935 2.55278 10.4863 1.37489C11.5884 0.513856 12.9792 0 14.491 0C18.07 0 20.9713 2.87954 20.9713 6.43179Z" fill="#F0A029"/>
</svg>

And third, the Visa icon.

$ touch src/assets/visa-icon.svg

<svg width="29" height="10" viewBox="0 0 29 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7771 3.18797C14.762 4.57733 15.9235 5.35133 16.7987 5.81318C17.6979 6.28578 17.9996 6.5891 17.9962 7.01173C17.9894 7.65913 17.2786 7.94439 16.614 7.95551C15.4534 7.97511 14.7796 7.61668 14.2427 7.34624L13.8247 9.45988C14.3637 9.72733 15.3597 9.96058 16.3923 9.9723C18.8181 9.9723 20.4043 8.67787 20.412 6.67207C20.4222 4.12684 17.1548 3.98636 17.1772 2.84902C17.1846 2.50327 17.4892 2.13551 18.1565 2.04106C18.4871 1.99479 19.3995 1.95869 20.4328 2.47278L20.8385 0.427536C20.2826 0.209585 19.5682 0 18.6783 0C16.3964 0 14.79 1.31105 14.7771 3.18797ZM24.7395 0.176346C24.296 0.176346 23.9223 0.454791 23.7566 0.883759L20.2919 9.82142H22.716L23.1977 8.38041H26.1596L26.4386 9.82142H28.574L26.71 0.176346H24.7395ZM25.0777 2.78243L25.7772 6.40391H23.8622L25.0777 2.78243ZM11.8397 0.176346L9.92964 9.82142H12.2386L14.148 0.176346H11.8397ZM8.42354 0.176346L6.02029 6.74094L5.04824 1.15945C4.93439 0.536328 4.48377 0.176346 3.98336 0.176346H0.054434L0 0.455986C0.80632 0.645602 1.72283 0.951192 2.2779 1.27686C2.61777 1.47628 2.71458 1.65024 2.82632 2.12404L4.66732 9.82142H7.10774L10.8486 0.176346H8.42354Z" fill="url(#paint0_linear)"/>
    <defs>
        <linearGradient id="paint0_linear" x1="28.574" y1="0.259826" x2="0" y2="0.259826" gradientUnits="userSpaceOnUse">
            <stop stop-color="#21489F"/>
            <stop offset="1" stop-color="#261A5E"/>
        </linearGradient>
    </defs>
</svg>

The only piece missing is a little utils function to format the card number in the UI. Create a utils folder inside the src folder, and then an index.js file inside.

$ mkdir src/utils
$ touch src/utils/index.js

Fidel uses a tokenization mechanism for the card numbers and doesn't store the entire card number. You'll receive the first six, and last four numbers from the card number, and the six in between are missing. You'll replace those with asterisks and then split the long card number every other 4 characters to display. In the index.js file, create a formatCard method that contains the logic.

export function formatCard(card) {
  return `${card?.firstNumbers}******${card?.lastNumbers}`
    .match(/.{4}/g)
    .join(" ");
}

Now that you've created all the missing pieces for the Transaction component go ahead and add it to your main application. At the top of the /src/App.js file, import the Transaction component.

import Transaction from "./components/Transaction";

Inside the render function, there is currently an empty <tbody> tag. Replace it to iterate over the transactions data, and map a Transaction component for each entry.

<tbody className="bg-white">
  {transactions.map(({ transaction, type }, idx) => (
    <Transaction key={idx} transaction={transaction} type={type} transactions={transactions} />
  ))}
</tbody>

Congratulations, you can now display incoming transactions from Fidel!

Simulate Transactions

Because you're using a Test Fidel key, and because you're using test cards, you won't receive live transactions. There are different ways you can simulate test transactions on the Fidel platform thought to test this tutorial. One of the simplest ones is to use the API Playground in the Fidel Dashboard. Go in there and use the transactions /create endpoint to create a few different transactions. If you create one with a positive amount, followed by one with a similar but negative amount, it will be matched as a refunded transaction. This way, you'll get to experience all three transaction statuses in the UI. Because you've set up the webhook endpoints already, all transactions you create are passed from Fidel to your ngrok URL, to your local server and then to your React client via socket.io. You should see them showing up in the UI, similar to this.

I hope you've had a great time following along this tutorial, and you've learnt the basics of building your first card-linked application on the Fidel platform, using the Fidel Web SDK, Node.js, React and socket.io. If you want to take a look at the code, it's available on GitHub!

The Books and Podcasts We Love - That You Should Too 📚

TomKFidel — Fri, 26 Mar 2021 10:50:08 +0000

“In the case of good books, the point is not to see how many of them you can get through, but rather how many can get through to you.”

So true. How about ‘You are what you read’ - which I just made up. Here at Fidel, we love our books and podcasts. As a fintech company, we exist in an industry that constantly twists and turns as new innovations arise and keeping up with those developments is essential.

Being able to actively learn new skills to grow as a professional in this changing industry is so important to us we ended up arranging subscriptions to Audible and Udemy for the whole Fidel team, too.

Therefore, when I asked everyone for some suggestions on what they’re reading and listening to, our #goodreads slack channel ‘blew up’ as the kids say. My post went viral.

From the science behind happiness to the quiet art of sleeping, here are ten of our favorite books and podcasts - and why we came to love them.

1 | Why We Sleep by Matthew Walker

In a nutshell | Why the quality of your sleep could shape your entire life.

Why it’s great | If you’re curious about science and health, it's a very easy read that explains why we sleep, the health benefits that come with it, and what can happen if we don't prioritise it. Using real data, it also gives very realistic, practical advice on how to improve your sleep patterns. I personally loved that you’re taken on a journey of explanation about why certain cultures and systems are wrong in not prioritising something so important

2 | Make Time: How to Focus on What Matters Every Day by Jake Knapp and John Zeratsky

In a nutshell | How to make those 24 hours truly count.

Why it’s great | What I liked the most was that it gave me courage to try out some of their amazing tips, albeit not in the most radical ways recommended in the book.

Here are some of the things I actually did after reading this book:

I bought a simple analogue wristwatch - to stop checking the time on my phone
Turned off almost all push notifications
Deleted ‘time-waster’ apps like Facebook, Twitter, Instagram, BBC news and others
Cleared the first 2 screens of my phone from any apps
Started using a usage-timer
Took more “silent” and “no-screen” walks
Started scheduling time in my calendar for the most important priorities

3 | The Culture Map by Erin Meyer

In a nutshell | A Brazilian engineering team at a steel company tries to convince their US-based colleagues to adopt a new process created in their Latin American offices.

Why it’s great | As someone that has experienced many different cultures and has felt so-called "culture shock" many times, it was very entertaining and informative to read ‘The Culture Map.’ You can gain insights from someone that dedicates herself to informing companies about how to better navigate and manage people from different cultures. The book does not attempt to generalize and is also aware of the fact that people are different, even those from the same cultural sphere, but still captures the universal impact culture has on us all.

4 | Clean Code A Handbook of Agile Software Craftsmanship by Robert Cecil Martin

In a nutshell | Even bad code can work sometimes. But when that code isn’t clean, it can weigh heavily on a developer companies’ ambitions.

Why it’s great | Regarding the book Clean Code, by Uncle Bob (as he’s known), for me, it’s a must read for any software developer that wants to improve their skill. As programming is both a creative and structured endeavour, Clean Code targets the latter by defining and explaining all the best practices you should follow to write "clean code". This means code that is well organized, easy to build, simple to understand and ultimately maintainable. It is proven that this so-called "clean code" is what allows software organizations to survive in the long-run as the software evolves and developers rotate. Individually, it also teaches you pragmatic skills that you can use to build better software.

5 | Creativity, inc. by Ed Catmull

In a nutshell | Fail as fast as you can.

Why it’s great | President of Walt Disney Animation Studios, Ed Catmull, advises on how to promote creativity based on Pixar’s own journey. It’s interesting to walk through the creative-thinking process behind the creation of famous movies like ToyStory, Up, Wall-E and Finding Nemo. One of my favourite excerpts was the following; “He [Ed] thinks of failure like learning to ride a bike; it isn’t conceivable that you would learn to do this without making mistakes—without toppling over a few times. If you apply this mindset to everything new you attempt, you can begin to subvert the negative connotations associated with making mistakes.”

6 | Atomic Habits by James Clear

In a nutshell | How to change your life, one tiny step at a time.

Why it’s great | This is easily one of my favourite books of all time. I feel like I already followed a lot of the principles, so it worked as inspiration, but also validation. It’s written in a very down-to-earth and realistic style that could really empower anyone, regardless of their context, to make better decisions and be more set up for success. For anyone who is a big fan of routine or is looking for more in their life, this is an excellent read.

7 | The Happiness Lab Podcast

In a nutshell | ‘The Happiness Lab’ was created by the same woman who created the ‘Science of Happiness’ course at Yale, helping showcase science-backed ways of becoming happier.

Why it’s great | I find it helpful, not only in my personal life, but also for making better product decisions for our customers. There is one episode on the burden of choice that tends to push me to constantly strive towards the simplest solution for our customers.

8 | Invisible Women by Caroline Criado Pérez

In a nutshell | How the world we live is designed with men in mind, in more ways than you might think.

Why it’s great | Invisible Women was an eye-opener to me. Data is one of our most powerful tools and it was quite scary to find out through the book how little data we have about women in many industries, from healthcare to public transportation. I liked to believe that in the developed world we're very close to closing the gap, and while it's true that we're getting closer, this book makes it clear that there's still much to be done.

9 | Factfulness by Hans Rosling

In a nutshell | Why we perceive a much poorer, scarier and unhealthy world - and why we’re pretty much all wrong.

Why it’s great | ‘Factfulness’ helps me think critically about how I build my opinions. While a product requires a bit of intuition, I find it helpful to ground myself in facts. Factfulness shows the ten instincts we have that steer us away from using information properly. I’ve found it helpful to know these ten human instincts so I can catch myself when I drift towards them.

10 | Indie Hackers Podcast

In a nutshell | Indie Hackers is a podcast featuring discussions on diverse online and tech-related business ideas and projects, but most importantly, as they are depicted and analyzed through their plans, strategies and processes.

Why it’s great | The show explores many different tech-related stories. For example, how certain companies go from zero to millions of subscribers, how certain services reinvented traditional processes, or even mistakes made that lead to failures of profitable businesses. Moreover, it’s hosted by the creators themselves in a laid-back style, which makes it fun and easy listening.

💡 You can view our full reading list here, covering a range of topics that inspired us and helped us become the team of unique individuals who, together, make Fidel. You can subscribe to our blog here to never miss a beat.

The Post-Pandemic World is More Agile

Janis — Wed, 10 Mar 2021 12:22:28 +0000

The global pandemic might have just taught us all some of the basics of the Agile Manifesto.

The values and principles enshrined in the Agile Manifesto 20 years ago have become more relevant today than ever. As Agile has been preaching all along - we're now actually more prone to responding to change rather than following a plan. We're putting individuals and interactions over processes or tools. We're motivating individuals by giving them the environment and support they need and trust them to get the job done. Let’s look at some of these in more detail, as they are some of the famous values and principles behind the Agile Manifesto.

Responding to change over following a plan

Forget “The Plan”. In the post-Covid world, it's all about responding to change over following “The Plan”. What's your timeframe of certainty today? How far ahead are you willing to plan? By current measures, even our governments are only confident about the next one to four weeks. It took more than two decades for Scrum Masters to preach this way of thinking. Now it's the default state of mind without the added effort of Scrum Masters.

With that said - planning is not forgotten. Eisenhower's saying that “plans are useless, but planning is indispensable” - has been reborn in the global pandemic context. Like many companies, Fidel has adopted the OKRs (Objectives and Key Results) framework for annual strategic planning. In fact, we did it for the first time in 2020 - right in the middle of the pandemic. Looking back at the OKRs of the Engineering and Product teams, it’s clear that the discussion around the objectives and their key results is valid. It fine-tuned our mindset and we've continued to refine the OKR planning framework in 2021.

Last year's experience added a touch of reality to our strategic planning. Our Engineering and Product key results experienced multiple thunderstorms, exacerbated by the pandemic. We had to refocus - enabling our existing customer base and providing custom solutions to some of our big strategic partners. In a nutshell, our key results were regularly changing in response to our customers’ shifting needs in light of the global pandemic.

Changing the key results during the year might not sound like a textbook approach. The global health crisis helped everyone to look at these decisions from a more grounded, down-to-earth and rational standpoint. We saw that remaining focussed on irrelevant key results was a greater risk than responding to change by adjusting our key results in flight. Equally, this has been the way for building great products by Agile teams - responding to change rather than following a plan. However, reality has helped us to scale this approach to the strategic planning level of Fidel.

Individuals and interactions over processes and tools

In response to the global lockdown, most industries have experimented and adopted some brand of online communication and collaboration tool. It doesn’t really matter which one, it’s always about enhancing interaction rather than the specific combination of processes or tools you’re using.

For example, we started to run the traditional Scrum events shortly before the lockdowns kicked in. However, their importance as a binding structure became apparent as the year progressed - people needed structure in their ‘work-from-home’ life. Structure provides predictability, which is subconsciously linked with the feeling of security and safety.

Our engineers know that after the current Sprint, there'll always be a Next Sprint. They know when we'll have a dedicated time to close this Sprint, discuss lessons learnt, and plan the next Sprint; engineers also know that the scope for the 2 weeks of the Sprint will be largely fixed; finally, everyone knows that we'll have a chance to discuss any obstacles for reaching the Sprint Goal during the Daily Standup calls. This predictability creates peace of mind - a feeling that one's work life is steady and structured. A feeling we all crave during these times.

Growing the company by 100% during the global pandemic has meant that we've had to add more interactions on top of the Agile structures - just to learn more about each other. I started to run short quizzes (two truths and a lie) before each Retrospective to help us learn more about each other. Many of our product teams started to run weekly coffee calls (20-30 min) with a single rule that you're not allowed to talk about work on that call. We set up a monthly engineering call to discuss the latest happenings, where they might be relevant to other Fidel teams.

Since many people at Fidel were hired during lockdown - most of us had never met in person. Therefore, additional opportunities to interact were important. On top of the weekly company-wide meetings, we introduced self-run Zoom fitness classes, game nights and a happy hour. Oh yes - we did fear death-by-too-many-meetings, so we agreed on a ‘no-meetings-Tuesday’ for product teams. Now, Tuesdays are reserved for focussed work without ANY calls.

Provide a supportive environment and trust

What do you do as a manager when all your employees are working from home? You learn to trust them. You have no other option but to completely trust them if you want to keep the lights on. You want to motivate them, support them in creating the online and offline environment they need to get the job done - entirely virtually.

Early on in the pandemic, Fidel supported employees in improving their work environment at home. We allowed everyone to bring any of their office equipment home, as well as a generous allowance to purchase any additional equipment for a productive work environment.

However, by now, we all learned that it's not just about the physical environment that is important for long-lasting high performance. It's also about psychological wellbeing and time to decompress and relax. Our CEO Dev spent significant time sharing his personal experiences managing his mental health. All the company received a subscription to the Headspace app. On the week of World Mental Health Day, we even took a mandatory day off for the entire company to rest busy minds.

More Agile Not Less

It's too early to talk about a post-Agile world. Before the global pandemic, we had a rather poor recognition of Agile values and principles outside the Engineering world. However, now it looks like 20 years of warming up - preparing the grounds for wider recognition of Agile values and principles.

The global pandemic has created conditions for a fantastic stress test to the resilience of Agile values, principles and structures. Agile not only passed this test but proved that it's more relevant to the wider audience than we had ever imagined. My hope is that the world’s desire to come back to “normal” after the global pandemic might just mean that we come to a “more Agile world” as the new default instead.

P.S. Tune into the Post Agile Panel on the next Aginext London 2021 conference on 17 March to hear other practitioners and me discuss Agile’s future.

How a Good Onboarding is Improving the Developer Experience

Alex Lakatos 🥑 — Wed, 09 Dec 2020 11:16:00 +0000

You've probably noticed the new and shiny Fidel Dashboard we released recently. There were a few reasons we came up with a whole new dashboard experience, and Katherine goes over all those reasons in her blog post. One of those reasons was that new users had trouble quickly unlocking the power of Fidel. When using our API, the "Aha!" moment comes when you see your first test transaction. But getting there wasn't the easiest of journeys for everyone.

We pride ourselves on how easy the Fidel API is to work with and often get feedback on the ease of the integration. That being said, before someone even starts integrating with the API, they tend to explore our dashboard to help them understand how Fidel works.

With our old dashboard, we lost users in the middle of their onboarding because we had no onboarding experience in the Dashboard. We had hoped they would find their way around, but we should’ve been better hosts. Let me walk you through it.

The first thing a user needs to do is create a Program. But, the old dashboard landed people on the Transactions page. And while that is a valid action for all accounts that have gone through the setup steps, because that's where most people need to land, it was proving confusing for first-time users. Let's assume first time users managed to create a Program. They would try to add a Location to that program, but that wasn't possible before first creating a Brand. They needed to figure than one out on their own, and then come back and create a Location. Let's assume some users managed to do that, and create a Location.

Now, you'd imagine you can create one of those fabled test transactions. You couldn't create one on the Transactions tab, you needed to explore around the Dashboard and land on the API Playground tab. And there, you have a menu entry to create your first transaction. In the UI, you'll notice you needed a Program, a Location and a Card.

Wait a minute, we didn't talk about Cards yet. That's because users haven’t added any yet. So users needed to add a Card before they could make a test transaction. On the Dashboard though, we didn't mention that users could only use test card numbers, or what those numbers were for the three card networks: Visa, Mastercard and Amex. Users had to poke around the Fidel Documentation to figure out what those test card numbers were, and then add a test Card. You could add a card both with the UI (which uses the Fidel Web SDK), or in the API playground. After you'd have done all that, congratulations, you could finally create your first test transaction.

As you can imagine, this wasn't an easy discovery journey, and we had quite a few people dropping off at various steps in this user journey. And we couldn't really blame them. Some of them were highly motivated, so they reached out to Support. For those users, we either had to do a bit of handholding or send them to our various blog posts or documentation explaining these steps. The blog posts and the documentation help you get set up using the API without using the Dashboard for most of those steps. While that was proving successful, it was also proving time-consuming for our small team.

We've decided to take all that we learned from those hand-holding sessions and put them into an automated onboarding process that shows up first thing for all new users. Here's a video of it. We'll go through the steps we took, and why in a minute.

We've decided to take a few steps to alleviate these problems:

Instead of having everyone create the same setup data on their own, we are now doing that for every new account. Now every new account gets enough demo data so they can make their first transaction: a demo Program, a demo Brand, 3 Locations in the UK and a Visa test Card. There's also one Auth Transaction in there. We've actually added the new demo data while we were developing the new dashboard, and we saw a slight increase in the number of users that were getting to their first transaction in the old Dashboard.
The second step we took was to add a tour for first-time users on the new dashboard that walks people through the data and explains that:
- Programs are containers, where you add brands, locations and link payment cards.
- Brands are the parent object of Locations and require consent from an authorized merchant to track Transactions in their locations.
- Locations are geolocation data points and you can simply add them to a Program.
- Cards are linked to a Program, and you can conveniently use our SDKs to link cards in your apps.

After the onboarding flow tells you all about the setup blocks and the particularities of running in test mode versus live mode, it drops you off in the new API Playground, where you can make your first test transaction. We've redesigned the API playground as part of the developer experience as well, giving it a more modern look and feel.

The last bit of the onboarding flow is also doing a bit of off-boarding, letting people know they can access more resources for working with the API in the Documentation, on the API reference pages, and on the blog!

Adding this onboarding flow has improved our average “Time to First Transaction” from days to minutes. And because our users are developers, this has been one of the best things we have done to improve the developer experience.

We've got some more things planned, and I don't want to spoil the surprise, so stay tuned for our next little DX chat. In the meantime, feel free to reach out on Twitter or in the Fidel Developer Community forum.

A Fresh Take on the Fidel Dashboard

kdegnen — Wed, 25 Nov 2020 15:02:00 +0000

In January of 2020, Fidel was a very different company.

We were a small team of 36 employees, working mostly in our offices in London and Lisbon. We’d just returned from a holiday gathering in our London office, where we talked about the future, celebrated 2019, and focused on what we wanted to accomplish in the coming year. While a lot of those plans changed with the coming of Covid-19, one project remained - we wanted to revamp our user dashboard.

For those of you new to the Fidel experience, you may not have much insight into working with our old dashboard. We certainly do. Our team works with the dashboard day in, day out, as much - if not more - than our users. It soon became clear our old dashboard was preventing a lot of our clients from scaling their programs successfully. It also wasn’t helping new users get to know Fidel and how we can help. So we made a plan to revamp the Dashboard from top to bottom.

They always say the first step to change is understanding where you need to improve, so we set off on a journey of discovery. With the help of our amazing customer team, we talked with our clients to understand their pain points. What made their jobs more difficult? What would help them move faster? Most importantly, how can Fidel help them innovate better?

Through this journey, we were able to better understand how our current customers are using our product. We also have users who use the dashboard to explore and discover what Fidel has to offer. For these users, we took a more quantitative approach to understand their user journey - looking at the activation funnel to help us understand where people were dropping off.

With this discovery under our belt, a few trends surfaced in the quantitative and qualitative data we were looking at:

Merchant onboarding was slow and opaque. When we started this project, the time from giving Fidel merchant data to having real-time transactions flowing through for a location could be weeks. And worse, there was no communication on our end of how long this would take, which could leave our users hanging… for quite some time. In the cases where we couldn’t find a location’s merchant ID (aka the MID), users were forced to reach out to Support to get help. Basically, we weren’t following through on our own internal values of transparency.
Users of our Offers platform couldn’t easily access offer data. Since we’ve launched our Offers API, we’ve made great strides in allowing our customers to use Fidel to qualify transactions based on specific parameters of an offer. However, in the old dashboard, it was difficult to see if a transaction had qualified for an offer and which offer it had qualified for. This made offer management quite difficult for our users.

New users had trouble quickly unlocking the power of Fidel. With our old dashboard, we lost users who signed up for a test account in the middle of their onboarding. And that’s because we had no onboarding experience in the Dashboard. We had hoped they would find their way around, but we should’ve been better hosts. Users had trouble understanding how the Fidel API all fit together, and therefore, how to best utilize all the functionality Fidel had to offer.

When we first started this project, we thought we would make a few changes to features that would help improve on these pain points. However, as we went down that path, we realized that in order to have the impact we wanted, this was going to need a bigger overhaul. We also decided to migrate our dashboard from Angular to React, but we’ll save those details for another blog post. Given this, we gave ourselves permission to think a bit more freely about how might we solve our users’ problems.

This freedom sparked creativity, and we ended up including a ton of features, UX / UI improvements, and more in the new dashboard. To solve the problems we talked about earlier, we:

Updated the merchant onboarding process to be faster. We looked at various ways that we could make the merchant onboarding process faster. We automated a few workflows that were previously done manually by our Customer team. During our conversations with our users, we also heard how frustrating it was to only be able to sync one batch of locations at a time. In the new dashboard, not only can users send locations to sync as frequently as they like, they also can automatically sync new locations. So far, this has brought our time to onboard a new merchant location down to a few days.
Increased the transparency around merchant onboarding. Hearing that location sync felt a bit like a big black box, we wanted to help users feel more in control of their own destiny. We now have a countdown with an estimated number of days until the location will be synced. In the case when a location fails, we now allow users to submit a MID to help move the investigation along more quickly.

Improved visibility of qualified transactions. We updated our transactions table to seamlessly integrate with offers. Now, when a user is running an offer on their program, they’ll be able to see qualified transactions, the offer they qualified for, and any other offer details in a single view.

Made things more secure. Multiple employees at each of our clients tend to work on their Fidel account in the dashboard. To help improve the security of each account, we’ve introduced new user management features. There are now two levels of permissions within each account - Admin and Developer. Admins have full control over their team’s Fidel settings, from billing to security. Developers can work in the account, but do not have access to some of the more sensitive settings within the account. The best part is, each person can have their own login information!

Did a bit of handholding. We wanted to do more for our new users, including giving them an onboarding tour. It shows them exactly how Fidel works, and hopefully sparks some creativity on how it could work for them! We now show users how to create a brand and location, add a card, and run a test transaction in our new playground to help them get to success more quickly. We’ve also added test data for new users, creating a demo program, brand and locations. It helps them get to the point where they can make their first real-time transaction faster.

Made the whole thing a heck of a lot prettier and easier to navigate. This one goes unsaid in its importance. At Fidel, we strive to make developers’ lives easier, and this includes in their experience with our dashboard. We restructured our navigation, updated our UI, and added a bunch of new, user-focused features.

After doing all this work, we were really eager to release it to the masses. However, we realized how critical our dashboard is to many peoples’ workflows, so we decided to be a bit more careful and do a staged release. We first developed a dog-fooding feature that allowed our employees to use the dashboard for their day-to-day tasks. Feedback was critical for fast iteration, so we implemented a widget to help us quickly gather insights and see trends. Through this, we realized we had a few things to improve before sharing with clients (namely that no one could figure out how to get to their account settings - an important thing!). After weeks of testing with our employees, we were able to release to a group of beta users.

We want to extend a huge thank you to everyone who participated - these users gave us the feedback we needed to get the dashboard to where we are today: ready for launch to all of you.

Almost the entire company - now 55 strong - touched a piece of this dashboard as we brought it to life. We’re excited to keep building upon this experience and making it even better for our users. Our only ask of you is that you check out our feedback widget; it’s a major factor in helping us continuously improve. We’re proud to prioritize our users, and our mission is to help them be as successful as possible - this new dashboard brings us another critical step closer to that goal.

How Fidel Is Converting to Agile From the Bottom-Up

Janis — Wed, 28 Oct 2020 12:48:17 +0000

“We need more process at Fidel”, said Andre, Fidel's co-founder and CTO, when we first met about a year ago.

Having witnessed three major Agile transformations in some of the most prominent Nordic banks - i.e. now knowing what NOT to do - Fidel was an opportunity to get it right. For once I would not need to beg to convert siloed departments into small and nimble cross-functional product teams that are focussed on delivering value to customers fast. Joining Fidel was an opportunity for me to combine the best there is about Agile ways of working (WoW) with the unique culture of an ambitious company - all from the bottom-up. Naturally, - I was up for the challenge.

It helped a lot to find out that the ten engineers at Fidel - when I first started there - were already quite experienced. Perhaps that was the reason behind Andre’s sense that "we need more process". You see, ten engineers isn't a lot, but even then there were some warning signs that things weren’t operating smoothly.

Firstly, the product roadmap was not aligned with the team structure, so many of the planned products had no people working towards them. Second, the engineers had split themselves into the traditional frontend and backend teams, mixing only occasionally. Hidden work was slowing down the most senior members of the engineering team (everyone knew which developers could fix anything and fast). Professional task and information management tools were not in place. The only product owner we had was Andre, who was becoming increasingly busy with strategic projects. The perception was that engineers work on the technical stuff rather than contributing to creating the value we deliver to our customers.

From the reaction I provoked after suggesting some fundamental improvements, I quickly learned that introducing new things at Fidel should all be done bottom-up. This was in stark contrast with the large corporations where Agile WoW are usually pollinated by management consultants who sell buzzwords (e.g. "Spotify Model") to the top management. Then it either grows into a full-blown Godzilla Agile transformation (e.g. introducing SAFe) or trickles down into some diluted version of Agile without changing any actual thinking or, more importantly, our processes.

Getting Started

OK, so, no top-down approach - but where do we start? I started with a half-day ideation workshop during our 2019 Christmas get-together in London. This was an opportunity for all engineers to figure out the biggest pain points and in many cases even their own possible solutions to their problems. This was bottom-up Agile transformation. And yes, I was excited.

In a very simplified speedboat retrospective, we first identified five fundamental areas where improvements are needed:

Backlog management and setting of priorities
Effective teamwork
Improving planning & predictability
Showing our work to others and engaging stakeholders
Continuous improvements

Then, engineers worked in pairs by applying elements from the open space model to ideate on these pain points. We ended up with tons of ideas which we were able to distil, discuss and prioritise in concrete agreements and actions. Some of the agreements were easily implemented, for example:

Reflect all work in backlogs (make work visible)
Move only prioritised work into Sprints
Don't work on tasks that don't contribute to the sprint goal

We also agreed on what we need to do in the longer term - such as:

Decide on the definition of ‘done’ and definition of ‘ready’
Introduce Jira & Confluence
Re-organise into product teams
Agree on estimation techniques
Create a buddy system
Organise regular re-factoring weeks and others

Fast forward to now - we have all this and much more. Fidel has four full-blown product teams working in Scrum, guided by three hyper-charged product owners. We have well integrated the new process management tools and there is a stable velocity across the teams giving us confidence of two new product deliveries this year.

Most importantly - we've preserved the high spirits and desire to reinvent ourselves for the continuous betterment of our collaboration at Fidel.

Good Habits

Even now, I still introduce future improvements in the same original way: bottom-up. We start with a little workshop for all engineers where I explain the best practices that are out there; sometimes engineers trial them a bit to get the taste of what the new process means in practice (e.g. relative vs absolute estimation technique). This is always followed by a discussion with the objective to decide which pieces of the "best practice" we adopt and in what way. Usually, it's the "best practice" with a characteristic (blue?) Fidel flourish added on top. For example, we're committed about having some Scrum events such as Sprint Reviews, Retrospectives and Sprint Planning. However, we try to limit the time for these events to two hours altogether; it's part of a wider goal to minimise time spent in meetings (hence, we also have ‘no-meetings Tuesdays’ across product teams).

You could call it ‘Agile + common sense’. That’s because Agile and Scrum are just tools, not rules, so we use the tools to support the best outcomes for us. At the end of the day, what matters is that we work better and people are happier. I am proud to say that, at Fidel, we’re able to work towards that goal every day.

Adding the Fidel Android SDK to Your Kotlin Android Application

Doug Sillars — Thu, 20 Aug 2020 12:50:43 +0000

Fidel's real-time transaction monitoring allows you to monitor your customers' purchasing patterns. The first step, is of course, for customers to opt-in their credit cards for tracking at your locations. Dealing with card numbers opens up a requirement of "PCI Compliance." This is the Payment Card Industry Security Standard and requires regular security checks to ensure your systems are adequately protected.

If your systems are not PCI compliant, or you'd rather not worry about handling card numbers for real-time transactions, you can use Fidel's PCI compliant SDKs to link the cards. Thus absolving you of any security requirements for the process. Our documentation walks through the steps to add our SDK to a Java-based Android app, so in this post, we'll use Kotlin to accomplish the same.

Kotlin Android App

To add the SDK to an application, we'll build a basic "Hello World" Android app.

In Android Studio, start a new project:

Create an empty Activity from the templates:

Finally, name your application, choose Kotlin as your language, and use API 19 or higher (or use legacy support libraries to support older versions of Android).

Android Studio will chug for a bit but will create the working "Hello World" application for you.

Running the 'Hello World' app on your phone.

If you are new to Android development, you'll need to setup ADB debugging on your phone, and connect your phone to your computer. You can then click the "run" button in Android Studio to start the Hello World app:

The app will soon start up on your phone:

Adding in the Fidel SDK

Adding the Fidel SDK is easy: while the instructions in the documentation are for Java - Android Studio converts the code into Kotlin for you.

Let's walk through all of the steps we need to walk through to add the Fidel Card linking SDK to our sample app. Following the documentation, we need to:

Add maven { url 'https://jitpack.io' } to our repositories section of our build.grade file.
Add implementation 'com.github.FidelLimited:android-sdk:1.3.1' to the App build.gradle dependencies.
Since you've updated your dependencies - sync your project.
Now we can begin adding in our code to the MainActivity (and update the apiKey with your public key and the appropriate programId). You can find all this information in your Fidel Dashboard.

Fidel.apiKey = "pk_test_6e94da6f-145a-47db-b56b-f1314e74aa2e"
Fidel.programId = "f8d6890e-145d-46ea-b66f-afacfd954580"

Now we add the Company name, privacy policy and deletion instructions. I also added the country parameter in this step:

Fidel.companyName = "Star Wars Quotes" // default: "Company Name".
Fidel.privacyURL = "https://media.giphy.com/media/4560Nv2656Gv0Lvp9F/giphy.gif"
// Maximum 60 characters, default: "going to your account settings."
Fidel.deleteInstructions = "https://media.giphy.com/media/DrDePYcSohIFG/giphy.gif" 
Fidel.country = Fidel.Country.UNITED_KINGDOM;

Paste in the result card response:

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (requestCode == Fidel.FIDEL_LINK_CARD_REQUEST_CODE) {
        if (data != null && data.hasExtra(Fidel.FIDEL_LINK_CARD_RESULT_CARD)) {
            val card = data.getParcelableExtra<Parcelable>(Fidel.FIDEL_LINK_CARD_RESULT_CARD) as LinkResult?
            Log.d("d", "CARD ID = " + card!!.id)
        }
    }
}

Finally, make sure to present the Fidel activity:

Fidel.present(this@MainActivity)

That is all there is to it - your app is now ready to run!

Card Linking on Android

There are 2 techniques to link your card with the Android SDK:

The traditional way of entering the long card number/expiration date/CCV. Note also that if you have cards stored in Google Pay - your phone will attempt to autofill this for you. This is convenient for your customers, but real cards will fail in the Fidel test environment:

Entering a test number will sync with the Fidel backend:

The Android SDK also has an optical card reader. By giving the application permission to use the camera:

The library in use does not appear to work for test cards found in a Google image search, but it does work with real cards.

Conclusion

With just a few lines of code, you can add the Fidel Android SDK to your application to allow your customers fast and easy sign up into your card linking service. Because the card numbers never touch your system, and the Fidel SDK is entirely PCI compliant, there are no security risks to you or your customers.

Let us know how you are using the Android SDK in your app over in the community forum.

Creating a Card Linking Program with the Fidel APIs

Doug Sillars — Tue, 04 Aug 2020 06:41:47 +0000

We’ve come a long way in the world of payments. The process has become faster and faster, to the point where we’re now talking about service delivery in real-time, occurring almost instantaneously after the users’ action.

It’s a remarkable leap, but the phrase ‘real-time’ has also begun to become something of a buzzword, lost in its overuse and over-simplification. What does it really mean? How does a ‘real-time’ process work?

Take the Fidel transaction API as an example. Incredibly useful, easy to integrate - a powerful, real-time transaction-tracking tool.

In a nutshell, it means that every card enrolled on a program has every transaction (at specific locations) logged in real time. From that, the program owner gains better understanding and context as to how customers shop with their brand - both online and in-person.

A transaction API ties the customers’ credit card to their account, eliminating the need for “bonus cards,” random QR codes, barcodes or loose coupons. It just happens automatically whenever a transaction is made.

As the API is improved and developed, the uses and possibilities are, essentially, endless.

Loyalty card transaction APIs are closely related, where cards that are enrolled in the loyalty card scheme have all transactions immediately entered into the scheme. Our documentation walks you through how to build a loyalty card scheme with the UI in our developer dashboard. However, 95% of creating a loyalty program can be done directly with the Fidel APIs right in your app (or from the terminal).

In this post, we’ll walk through the steps to take to create a loyalty card scheme using just Fidel API calls. For simplicity, we’ll use cURL to make all of the API calls. Or, you could use any other HTTP client to do the same. We may, or may not, also explain a lot of this with Star Wars references. Just’ cos.

Loyalty Program Basics

Each loyalty program contains cards, which act as a proxy for your users. They also contain brands that have specific locations (think of your favourite coffee chain, and every place you can go to pick up a latte). When a transaction occurs - it is affiliated with the card and location. Both of which feed back into the program.

When building a loyalty program, we run the process in reverse - creating a program before adding a brand and locations. Then customers can begin adding cards, and Fidel will record the transactions. Webhooks can be used to monitor the process.

Starting out: Creating an Account and Copying Your API Key

It’s super easy to get started using the Fidel API. You just need to sign up for a free account and grab your API key. (This is technically a visit to the dashboard, but we’re not building anything yet!) To get your key, use the user menu at the top right to find your account page. Free accounts have full access to the Fidel APIs in our test environment, so you’ll want your Secret Test Key to run the API commands in this post.

Creating a Program

Ok - now you’ve got your account and API key - let’s make our first API call - to create a program.
For ease of use, we’ll use cURL to make our API calls. If you have any questions about the APIs, just take a look at the API Reference.

Creating a program involves a POST connection to Fidel with our API Key and the name of the program you’d like to create.

In this case, I’m going to name my Program “Star Wars Quotes.”

curl -X POST https://api.fidel.uk/v1/programs -H 'content-type: application/json'  -H 'fidel-key: sk_test_f0005329-6324-49e5-86c6-429030a9a493'  -d '{"name": "Star Wars Quotes"}'

There are 2 headers added, one indicating JSON, and the other with my test API Key. The body of the post is the simple JSON with my program name. We immediately get a response:

{
  "items": [
    {
      "accountId": "fec57ce7-d161-4c8f-8da0-1ebf841f4739",
      "live": false,
      "name": "Star Wars Quotes",
      "syncStats": {
        "status": "completed"
      },
      "updated": "2020-06-04T12:05:38.169Z",
      "created": "2020-06-04T12:05:38.169Z",
      "id": "b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0",
      "active": true,
      "activeDate": "2020-06-04T12:05:38.169Z",
      "sync": false
    }
  ],
  "resource": "/v1/programs",
  "status": 201,
  "execution": 18.983461
}

Important values here: the accountId is your user account id at Fidel. The id is the programId - which we will use to reference this program in future API calls.

https://media.giphy.com/media/3ornjPaUwr60cYjXuE/giphy.gif

Creating our Brand

Brands are independent of Programs and can be reused between different programs.

For this post, we’ll create a brand called “I’ve got a bad feeling about this”. Since this line is used in every Star Wars Movie - this is clearly a strong brand for my “Star Wars Quote” program. But it could be used in an Indiana Jones Program, Big Bang Theory, or any other show where this line has been used.

Again - all I need is the name of my Brand, my API key, and if I want - a link to the Brand Logo. Note that there is not currently a way to add an icon after this step, so this is your only chance! As you might expect, the endpoint is /brands:

curl -X POST  https://api.fidel.uk/v1/brands  -H 'content-type: application/json'   -H 'fidel-key: sk_test_f0005329-6324-49e5-86c6-429030a9a493'  -d '{
    "name": "I’ve got a Bad Feeling about this",
    "logoURL": "https://m.media-amazon.com/images/M/MV5BYzA0MmMxZjQtYzcwZC00MGM3LThkNjEtYTAyNTBlZjI1NWUzXkEyXkFqcGdeQXVyMzI5ODg0OTE@._V1_SY1000_SX1000_AL_.jpg"  }'

Submitting this - success! We have created the brand! Great, kid! Don’t get cocky.

{
  "items": [
    {
      "accountId": "fec57ce7-d161-4c8f-8da0-1ebf841f4739",
      "consent": true,
      "live": false,
      "logoURL": "https://m.media-amazon.com/images/M/MV5BYzA0MmMxZjQtYzcwZC00MGM3LThkNjEtYTAyNTBlZjI1NWUzXkEyXkFqcGdeQXVyMzI5ODg0OTE@._V1_SY1000_SX1000_AL_.jpg",
      "name": "I’ve got a Bad Feeling about this",
      "updated": "2020-06-04T12:22:21.945Z",
      "created": "2020-06-04T12:22:21.945Z",
      "id": "4aef8401-7014-4ac5-88d7-664a179c40f3"
    }
  ],
  "resource": "/v1/brands",
  "status": 201,
  "execution": 29.559367
}

Locations

Each program will be redeemable at various locations where the Program is operating under the specified brand. In this case, we’ll add a few locations (using just the locations from Episodes 4-6 where someone said “I’ve got a bad feeling about this”:

Luke Skywalker: Death Star, USE FRC
Han Solo: Death Star Trash Compactor, TRA SH
Leia Organa; Asteroid Monster MYN OCK
C3PO: Jabba’s Palace TAT OIN
Han Solo Ewok Village END OR

If you look carefully, the endpoint uses the ProgramId in the URL string, and the BrandId is presented as a parameter in the JSON:

 curl -X POST   https://api.fidel.uk/v1/programs/b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0/locations   -H 'content-type: application/json'   -H 'fidel-key: sk_test_f0005329-6324-49e5-86c6-429030a9a493'   -d '{
    "address": "Luke Skywalker",
    "brandId": "4aef8401-7014-4ac5-88d7-664a179c40f3",
    "city": "Death Star",
    "countryCode": "GBR",
    "postcode": "USE FRC"}'

NOTE: If you are adding locations in production and have a MerchantID (MID) for these locations from the card schemes, adding the MID here can speed up the confirmation of your locations. In the test environment, your locations are automatically verified and approved. In the live environment, these need to be verified by the card schemes, using the Location Sync process. And yes, this is, for now, a manual process that must be done in the Fidel dashboard.

Since we are in test, I did not add a merchantID, but the location was added successfully:

{
  "items": [
    {
      "accountId": "fec57ce7-d161-4c8f-8da0-1ebf841f4739",
      "address": "Luke Skywalker",
      "brandId": "4aef8401-7014-4ac5-88d7-664a179c40f3",
      "city": "Death Star",
      "countryCode": "GBR",
      "currency": "GBP",
      "live": false,
      "postcode": "USEFRC",
      "programId": "b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0",
      "geolocation": {
        "latitude": 51.5138332,
        "longitude": -0.1318224
      },
      "preonboard": false,
      "timezone": "Europe/London",
      "updated": "2020-06-04T12:35:23.518Z",
      "created": "2020-06-04T12:35:23.518Z",
      "id": "96eee5fc-704a-4854-9715-e42efce0c379",
      "amex": {
        "clearing": false,
        "auth": false,
        "authTransactionId": null,
        "clearingTransactionId": null,
        "status": "active"
      },
      "mastercard": {
        "clearing": false,
        "auth": false,
        "authTransactionId": null,
        "clearingTransactionId": null,
        "status": "active"
      },
      "visa": {
        "clearing": false,
        "auth": false,
        "authTransactionId": null,
        "clearingTransactionId": null,
        "status": "active"
      },
      "activeDate": "2020-06-04T12:35:23.518Z",
      "active": true
    }
  ],
  "resource": "/v1/programs/b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0/locations",
  "status": 201,
  "execution": 101.214404
}

For the sake of this post length, trust that I did the same with the other four locations. We have now created our Fidel Card loyalty program using (mostly) just the API.

Adding Cards

For customers to enrol in the card-linked loyalty program, they must register their cards. Fidel has a PCI compliant Web SDK (and mobile SDKs) that collect the card information from your customers. Which means you never have to worry about properly handling the card numbers - you never see the cards! For an example of our Web SDK, you can see a working example in our previous post on using Webhooks.

For simplicity in this post, we will just use the add Card API. We can use test card numbers to register cards into our Program.

NOTE: The add card API is used in the WebSDK (and visible in the website source), you must use your public key for this API call.

curl -X POST https://api.fidel.uk/v1/programs/b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0/cards -H 'content-type: application/json'  -H 'Fidel-Key: pk_test_0367fe38-cdc7-41a2-9d4c-74a1854c171e' -d '{"number": "4444000000004222", "expMonth": 10, "expYear": 2021, "countryCode": "GBR","termsOfUse": true}'

And we see that the card is successfully added:

{
  "items": [
    {
      "accountId": "fec57ce7-d161-4c8f-8da0-1ebf841f4739",
      "countryCode": "GBR",
      "expDate": "2021-10-31T23:59:59.999Z",
      "expMonth": 10,
      "expYear": 2021,
      "firstNumbers": "444400",
      "lastNumbers": "4222",
      "live": false,
      "programId": "b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0",
      "scheme": "visa",
      "type": "visa",
      "updated": "2020-06-04T13:05:05.420Z",
      "created": "2020-06-04T13:05:05.420Z",
      "id": "6e03470d-a441-45a4-851e-883b51f28b26"
    }
  ],
  "resource": "/v1/programs/b4b6d68f-a05a-4cc5-8b9f-f6e82cd988d0/cards",
  "status": 201,
  "execution": 35.621642
}

Transactions

For testing purposes, there is a Transactions API, where a cardId and an amount can be sent to a specific program. I’ll leave that here as an exercise for you. Feel free to use my locationId from above. I have a very good feeling about this one - you should see your transaction posting successfully in no time.

Conclusion

Creating a card linking program is very easy to do, using the Fidel Dashboard, or using our API. In this post, we’ve walked through all the steps to create a card linking program with our APIs. After testing with our API, we know you’ll be itching to get into production and create your own card linking program.

If you have any questions, please feel free to reach out to our community at https://community.fidel.uk.

How to Receive Webhook Events With Netlify Functions and JavaScript

Alex Lakatos 🥑 — Mon, 27 Jul 2020 08:22:48 +0000

If you're building event-driven applications, you've probably considered building them in a Serverless platform. It's really well suited for having small functions, running when there's an incoming event, processing the data, and then going dormant. Instead of building your own event loop that sits idle in between events, you're offloading all that logic to a serverless provider. Being a lazy developer, I'm a fan of writing as little code as possible 😅.

It won't come as a shock that most of my webhooks are running on serverless instead of on my local machine, or on a VM I have to maintain somewhere. We've recently been using Netlify here at Fidel for our documentation previews, so I thought I'd give Netlify Functions a try. In this blog post, I'm going to use them with JavaScript to receive webhook events from an API.

What Are Webhooks?

Before we begin, let's do a little refresher on what webhooks really are. If you think about APIs as black boxes that allow you to call them up once in a while, webhooks are the mechanism they use to call you back when they've got stuff to tell you. When you want to ask an API to do things for your application, you make an HTTP request to the API endpoint, and send some data. When an API wants to send some data to your application, without you having to ask for it every second (also known as polling), they make an HTTP request to your webhook URL.

Now that we know what webhooks are, let's look at a few things you'll need to follow along this journey of receiving webhook events with Netlify Functions and JavaScript.

Prerequisites

Creating a Netlify Function

Set Up Netlify CLI

I'm going to use the Netlify CLI to create and deploy a Function. In case you don't have it installed, now would be a good time to do so.

npm install netlify-cli -g

After you've installed the CLI, you'll also need to authenticate it with your Netlify account.

netlify login

This will open a browser window, asking for permission to access Netlify on your behalf. Go ahead and authorize that.

We'll also need to create a netlify.toml file in the root of your project folder, and we'll enable functions there.

[build]
  functions = "functions"
  publish = "dist"

Create a Netlify Function

Now that we're all set up with Netlify, we can go ahead and create a Function with the CLI.

netlify functions:create

This will create an interactive prompt, asking you for a template. I've chosen [hello-world], which is a basic JavaScript function that shows async/await usage, and formats your response. The prompt also asks for a name for your function, I've named mine webhook. The output of my command looked a little bit like this:

$ netlify functions:create
? Pick a template js-hello-world
? name your function: webhook
◈ Creating function webhook
◈ Created /Users/laka/fidel/fidel-webhooks-netlify/functions/webhook/hello-world.js

The command also created a webhook.js file in the /functions/webhook/ folder. That was boilerplate code, and I've changed it a bit. I'm removing the Hello World code, and instead of logging the request body, and sending back a 200 OK status on the response. The logic is all wrapped in a try/catch that sends a 500 status and the error on the response in case something happened with the request. Which it shouldn't, but better safe than sorry. Most APIs have a retry mechanism for webhooks, so if we send back anything other than a 200, the API is going to resend the webhook later.

exports.handler = async (event, context) => {
  try {
    console.log(event.body)
    return {
      statusCode: 200
    }
  } catch (err) {
    return { statusCode: 500, body: err.toString() }
  }
}

Deploying a Netlify Function

This is the most basic webhook example I could think of. It logs or saves the event coming from an API, and sends back a confirmation code. What you do inside of that webhook should be based on your application logic, I'm showing you here the mechanism for this transport pattern.

The code needs to be deployed before we can use it, so let's go ahead and use the Netlify CLI to do that.

netlify deploy --prod

After the deploy finished, the output of my terminal looked a bit like this:

$ netlify deploy --prod   
Deploy path: /Users/laka/fidel/fidel-webhooks-netlify/dist
Functions path: /Users/laka/fidel/fidel-webhooks-netlify/functions
Configuration path: /Users/laka/fidel/fidel-webhooks-netlify/netlify.toml
Deploying to main site URL...
✔ Finished hashing 1 files and 1 functions
✔ CDN requesting 0 files and 1 functions
✔ Finished uploading 1 assets
✔ Deploy is live!

Logs: https://app.netlify.com/sites/fidel-webhooks/deploys/5f19b5e49db36302958eeefe
Unique Deploy URL: https://5f19b5e49db36302958eeefe--fidel-webhooks.netlify.app
Website URL: https://fidel-webhooks.netlify.app

Once the deploy is live, you'll be able to access your webhook logs in your Netlify dashboard. If you select your webhook there, you'll see the log window refresh in real-time, and that's where you'll find your function endpoint as well. The naming convention Netlify uses is https://your-app.netlify.app/.netlify/functions/your-function. Mine was https://fidel-webhooks.netlify.app/.netlify/functions/webhook.

Set Up for the Fidel API

Your webhook is live and ready to receive events, the only thing missing is an API to actually send those events 😅. Don't worry, I've got you covered with an example of using the Fidel API to send transaction authorization events to your webhook.

The Fidel API is providing real-time transaction data about purchases made on a card issued by Visa, Mastercard or Amex. Because of that real-time component, it wouldn't be wise to keep polling it every second or so to see if there are any new transactions. The API implements a webhook mechanism to send that data to your application whenever a new event happens. It actually supports quite a few webhooks for different types of events, but I won't dig into that here. We'll just focus on transactions for now.

Before we begin, you'll need to grab your Fidel API Key from the Dashboard. I'm using my Test Key for this, I want to be able to simulate transactions. It should look similar to sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63.

The API needs you to set up some plumbing before you can receive transactions, and we're going to use cURL commands to do that setup, instead of pointing and clicking in the dashboard. If you're already a Fidel user and have registered a program, brand, location and card, feel free to skip these steps go straight to registering your webhook with the Fidel API.

The container for your transactions in the Fidel world is a Program. We'll start by creating one. Don't forget to replace fidel-key with your own before you run the cURL command.

curl -X POST \
  https://api.fidel.uk/v1/programs \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "name": "Avocados"
  }'

The command outputs a JSON response from the API, with data about the program we created. We'll look for the id of it and make a note, we'll be using it later on.

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","live":false,"name":"Avocados","syncStats":{"status":"completed"},"updated":"2020-07-24T12:03:00.251Z","created":"2020-07-24T12:03:00.251Z","id":"08a09745-1e75-4ac3-baaf-f8548c31b25e","active":true,"activeDate":"2020-07-24T12:03:00.251Z","sync":false}],"resource":"/v1/programs","status":201,"execution":79.233234}%

Now that we have a Program, we'll also need to create a Brand for our program.

curl -X POST \
  https://api.fidel.uk/v1/brands \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "name": "Bacon Avocados"
  }'

Here's the output for that command. We'll make a note of the id for the brand as well, we'll need to use it later on.

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","consent":true,"live":false,"name":"Bacon Avocados","updated":"2020-07-24T12:05:35.868Z","created":"2020-07-24T12:05:35.868Z","id":"59ded730-007e-43a6-8547-7612d31355cb"}],"resource":"/v1/brands","status":201,"execution":15.915342}%

Now that we have a brand and a program, we can create a Location for that brand. That location represents a physical store, so we can later simulate a live transaction originating there. We'll use the Program id we got from the previous command, and replace it in the URL. We'll also use the brandId in the request body to link the location to the Bacon Avocados brand.

curl -X POST \
  https://api.fidel.uk/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/locations \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "address": "2 Avocado Square", 
    "brandId": "59ded730-007e-43a6-8547-7612d31355cb", 
    "city": "London", 
    "countryCode": "GBR",
    "postcode": "W1D 3PX",
    "searchBy": {
        "merchantIds": {
            "visa": ["1234567","7654321"],
            "mastercard": ["1234567","7654321"]
        }
    }
}'

The output for this command has slightly more data, and that's because the location has information for each card network scheme available. We'll need to make a note of the id as well, that's what we're going to use to identify this location when we're making a transaction.

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","address":"2 Avocado Square","brandId":"59ded730-007e-43a6-8547-7612d31355cb","city":"London","countryCode":"GBR","currency":"GBP","live":false,"postcode":"W1D3PX","programId":"08a09745-1e75-4ac3-baaf-f8548c31b25e","geolocation":{"latitude":51.5138332,"longitude":-0.1318224},"preonboard":false,"searchBy":{"merchantIds":{"visa":["1234567","7654321"],"mastercard":["1234567","7654321"]}},"timezone":"Europe/London","updated":"2020-07-24T12:10:17.533Z","created":"2020-07-24T12:10:17.533Z","id":"fe77e7f5-350b-4c34-be68-3e16e7c95d66","amex":{"clearing":false,"auth":false,"authTransactionId":null,"clearingTransactionId":null,"status":"active"},"mastercard":{"clearing":false,"auth":false,"authTransactionId":null,"clearingTransactionId":null,"status":"active"},"visa":{"clearing":false,"auth":false,"authTransactionId":null,"clearingTransactionId":null,"status":"active"},"activeDate":"2020-07-24T12:10:17.533Z","active":true}],"resource":"/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/locations","status":201,"execution":55.277626}%

Now that we've set up our location, the only piece missing is a card to simulate a transaction from this location. We'll need to replace the program id in the URL here as well. We're not going to register an actual card here, we're using test cards. Depending on the card network we want to use, there are different ranges of card numbers we can use. For example, I'll use a test Visa card. Those follow a wildcard format in the range of 4444 0000 0000 4***. I'll use 4444000000004001 as my card number. The cards API also uses a different key for authorization, so instead of using your Secret API Key, you'll need to use your Public SDK Key from the Dashboard. It looks similar to the other one, the main difference is it starts with pk instead of sk. My example uses pk_test_62f02030-0409-4eb5-ab94-6eff05b3d888.

curl -X POST \
  https://api.fidel.uk/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/cards \
  -H 'content-type: application/json' \
  -H 'fidel-key: pk_test_62f02030-0409-4eb5-ab94-6eff05b3d888' \
  -d '{
    "number": "4444000000004222",
    "expMonth": 10,
    "expYear": 2025,
    "countryCode": "GBR",
    "termsOfUse": true
}'

The output from the command should give us an id for the card, and we'll make a note of it. That's what we'll need when we make a transaction.

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","countryCode":"GBR","expDate":"2025-10-31T23:59:59.999Z","expMonth":10,"expYear":2025,"firstNumbers":"444400","lastNumbers":"4222","live":false,"programId":"08a09745-1e75-4ac3-baaf-f8548c31b25e","scheme":"visa","type":"visa","updated":"2020-07-24T12:28:16.957Z","created":"2020-07-24T12:28:16.957Z","id":"bb9b4a67-203c-4eae-8b09-070e819629cc"}],"resource":"/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/cards","status":201,"execution":47.026675}%

Register Webhook

We've set up everything we needed to start receiving transactions via the Fidel API. But for now, they would only show up in the Fidel Dashboard. If we want to use the real-time transactions in our application, we need to register a webhook URL for them. As I mentioned earlier, the Fidel API supports quite a few different webhooks. We're going to use the transaction.auth event today, and that fires when a transaction is being authorized. That usually happens as soon as you use your card in person or online to shop. Don't forget to replace the program id in the URL with your own. And use your own Netlify webhook URL in the request payload.

curl -X POST \
  https://api.fidel.uk/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/hooks \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "event": "transaction.auth",
    "url": "https://fidel-webhooks.netlify.app/.netlify/functions/webhook"
  }'

The JSON response from the API should be output to the terminal. It looks similar to this:

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","event":"transaction.auth","live":false,"programId":"08a09745-1e75-4ac3-baaf-f8548c31b25e","url":"https://fidel-webhooks.netlify.app/.netlify/functions/webhook","updated":"2020-07-24T12:39:15.131Z","created":"2020-07-24T12:39:15.131Z","id":"df1ab75a-04f9-4627-9b0a-c08cd28572e5","secretKey":"wh_ta_425e3be6-d7e3-4ad4-b747-5d5c498f171b"}],"resource":"/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/hooks","status":201,"execution":87.066399}%

Create Auth Tranzaction

Now that we've registered our webhook with the Fidel API, we can start creating test transactions, and we should see them coming in the Netlify Function logs. We're using the test transactions endpoint in the Fidel API, and this only works in test mode. If your account is live, you'll need to switch it back to test mode to follow along with this tutorial. Don't forget to replace your locationId and cardId in the request payload.

curl -X POST \
  https://api.fidel.uk/v1/transactions/test \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "amount": 12.34,
    "cardId": "bb9b4a67-203c-4eae-8b09-070e819629cc",
    "locationId": "fe77e7f5-350b-4c34-be68-3e16e7c95d66"
  }'

After you ran this command, you can see the webhook logs in the Netlify Function log. Mine looked a bit like this after I received the event on my webhook:

1:51:56 PM: 2020-07-24T12:51:56.589Z 7989b0a6-f0ce-4985-a45f-7e22ec0ff6c6 INFO {"auth":true,"currency":"GBP","id":"4b549d95-1540-4332-891a-dd2c7603b090","amount":12.34,"wallet":null,"created":"2020-07-24T12:51:55.918Z","accountId":"36081095-2782-4669-8a07-857bbaaeb89b","cleared":false,"updated":"2020-07-24T12:51:55.918Z","programId":"f2c9719a-6433-4ef4-8401-19d7ebf60ab9","datetime":"2020-07-24T13:51:55","card":{"id":"14bda5c9-d5d9-40ef-87e3-158c2f5f2f8d","firstNumbers":"444400","lastNumbers":"4001","scheme":"visa"},"location":{"address":"Titulescu Nr. 16","city":"Bristol","countryCode":"GBR","id":"793f5298-3715-43ef-b89d-1b1cedddd716","geolocation":null,"postcode":"BS16UZ","timezone":"Europe/London","metadata":null},"brand":{"id":"9cd32c61-43ca-4bb7-8aca-0cf491112c28","name":"Avocado","logoURL":"https://developeravocados.net/img/avatar-icon.png","metadata":null},"identifiers":{"MID":"TEST_MID_a7d6bc8f-7837-4f3b-aa43-8c51478ce189","mastercardTransactionSequenceNumber":null,"mastercardRefNumber":null,"amexApprovalCode":null,"visaAuthCode":null}}
1:51:56 PM: Duration: 1.36 ms Memory Usage: 64 MB

What's Next?

Hopefully, you've followed me along this journey and we've managed to receive webhook events on a Netlify Function using JavaScript. If you've found them interesting, there are a lot more things you can do with them. For example, you could save that transaction event to a FaunaDB.

If the Fidel API made you curious, and you want to keep exploring, keep in mind all the things I did with cURL today are available either via the Fidel Dashboard or our API. You can check out the API Reference and use your favourite HTTP client to play with it.

Open, Honest, Equal: How we hire at Fidel

beatrizatfidel — Tue, 14 Jul 2020 16:08:28 +0000

When you have great recruitment practices, good things come. The right talent can directly support a companies’ prospects, but it influences the experience of your customers, too. We like to think that, here at Fidel, we’ve taken that message to heart.

We believe that a great hiring process has to be both agile and scalable. However, we take it a step further. For a hiring process to deliver that exponential value, it really should cover more than that, taking into account diversity and carefully considering the candidate experience.

In this article, we’re going to explore how we hire at Fidel, the core values of our process and - when we’re popping those champagne corks to celebrate another hire - that our new joiners are supported and can support us in achieving positive growth that sets us on the path for positive exponential growth as a company. Also, the talent team just really likes Champagne.

Diversity in Hiring 🌈

This one goes without saying but, at Fidel, we believe that all candidates should be considered, regardless of who they are, be it gender, age, race, religion, or sexual orientation. In order to put this into practice, we've put a few measures in place.

Job board diversity: When it comes to hiring and maintaining a diverse team that distances from any discriminatory biases, in the first place, we work to ensure that we’re posting our open positions on a diverse range of job boards that make it possible to attract talent from a variety of different backgrounds and locations.

Neutral job adverts: Every job advert is entirely neutral and assumes absolutely nothing about the candidates’ background. At Fidel, we believe that in an equal workplace and that needs to stand since the moment we post jobs, so everyone feels welcome regardless of gender.

Anonymous mode: All Fidel applications are reviewed in an anonymous mode within our Applicant Tracking System (ATS). This means that when reviewing organic applications, the reviewer has no access to the candidates' personal information such as name, photo, location, or age, for example. This helps us to scout talent-based entirely on skillset and character, without unconscious bias.

Interview training: All training areas are important. Hiring is no exception. In order to provide the best candidate experience and conduct interviews fairly, we have regular training organized by our Talent Team, as well as resources always available in our knowledge-based tool. Those resources include detailed templates, instructions on how to provide feedback, guidelines on how to conduct interviews, questions that should be avoided, and more information regarding implicit bias.

The Candidate Experience 🗣

Hiring is a two-way street. We take measures to guarantee high-quality hiring processes in all the different departments of Fidel. However, we also have guidelines in place to guarantee an exceptional experience for our candidates as well.

Transparent hiring process: In order to manage candidates' expectations, we always share what the hiring process will look like, providing guidance for the candidates to prepare. That way, candidates will have insights into how long the process will take and can consider their next steps better.

Timely response: When application volume is high, it can be a real struggle to answer all applications quickly. However, we commit to answering a candidates’ first application within a maximum of a week’s time.

We provide feedback: Regardless of whether a candidate is a match or not, we always aim to provide constructive feedback to candidates. We believe that being honest when it comes to hiring can not only help refine our hiring process but also supports our candidates in their job-hunt.

Candidate feedback: It’s a two-way street, remember? We have space for candidates to review our hiring process by requesting a Net Promoter Score (NPS) and an opportunity to give us comments on their experience. Being open to feedback is core to Fidel, and it motivates us to improve our processes, whilst giving a voice to our community.

The Hiring Process ✍️

Screening Interviews

If the application matches the requirements of the job role, firstly: Yay! Once we’ve finished high-fiving we proceed to invite the candidate for their first screening interview. All screening interviews at Fidel are managed by our Talent Team. The main goal is to get to know the candidate's background better and provide context on the team here and the job itself.

For technical roles like Engineering or Developer positions, if the team believes the candidate might be a good fit, we’ll usually invite the candidate for a technical assessment to make sure they’re comfortable with the particular stack we use. If the candidate isn't familiar with our stack, this can also a great opportunity to test their adaptability skills.

Team Interviews

Team Interviews can vary between roles, however, they’re super important for every job role we hire for.

When it comes to commercial roles, if the screening interview goes well, we have two more additional steps with the team. One is a Hiring Manager call - a chance to ask more specific questions about the job and the team but also to be asked about previous experience and motivations. The other step is a skills-based Interview where we expect the candidates to prepare a very short presentation on a defined topic they’re confident with and discuss it with the panel, often the team they’re interviewing to join.

When it comes to Engineering roles, if the technical assessment goes well, this is followed by the technical interview. For this, two of our senior Engineers will conduct a retrospective of the technical assessment and ask questions. It's a great opportunity for candidates to get a bit more detail on Fidel engineering practices and our product roadmap.

Final Steps 🤝

The final step is usually a founders’ interview. We’ll invite candidates for a final meeting with our founders, where they can gain a holistic view of the company and learn a bit about Fidel’s founding philosophies. Candidates also get a chance to discuss their own experiences and industry knowledge.

In Summary

Current challenges have meant some candidates don't get the chance to experience the office atmosphere and meet other team members in person. We’re happy to add extra meetings to provide these candidates with the chance to meet more of us. The same applies for management roles, it's mandatory for those candidates to have a round table with their new teams.

When we think about scaling a company, we immediately think about growing the workforce. That workforce shall be aligned with the values of the company but also with its needs. A strong hiring process makes it possible to not only target the needed talent but to build a team that shares the same vision and values.

With quality, scalable, and agile hiring, we can set more ambitious goals for ourselves, too.

We see the hiring process as the first stage of planting a seed. Without putting in the time and attention, you won’t ever see the flowers at the end. Thanks to our multi-step process we can find talent wherever it might be, nurture that talent and set up both the employee and employer for longer-term success. We want people to choose to stay with Fidel for a long time, too - that’s why we invest in each of our people from day one of hiring, so they want to invest in us right back.

Bringing in the best people is never just a talent team mission because when we find the right person for the job, everyone benefits - and that’s what Fidel is all about. *Champagne corks pop in background*🍾

What's it like to start a new job during a Pandemic? We asked our new starters

beatrizatfidel — Wed, 01 Jul 2020 10:04:50 +0000

If you saw the Talent team’s last post, you’ll know Fidel hasn't slowed down on hiring during Covid-19.

But we are doing things differently. For obvious reasons, we’re conducting our hiring and onboarding processes fully remotely. That doesn't mean we've changed our focus, though. We're still committed to growing a world-class team while providing a great candidate experience.

That’s not possible unless we collect feedback in the process and learn from it. The current situation is new to all of us, and most of us have probably never interviewed fully remotely either. But changed circumstances are no reason to let our standards slip, and we want to make sure we’re providing the best experience we can.

What we asked

To help us with our direction, we asked our new starters how they’d found their onboarding experience. We wanted to know:

What motivated you to apply to Fidel during the Pandemic?
Did our team make you feel safe and clear about the stability of our company and your role?
Were we well-enough prepared to conduct our hiring 100% remotely?
Did we communicate well with you?
How did you manage to build your understanding of the team, culture and office?
What do you think could have improved your hiring experience?

What we did well

1. Maintain an agile and fast-paced hiring process

100% of our new starters said our remote hiring process worked really well. They said it was not only fast, but efficient and well-adjusted to a remote setting.

What the team said:

“YES! It felt like the team had experience with a remote environment which also implies that team communication is generally good”.

Marcia M., QA Engineer, Lisbon

How we did it:

We’re proud of this one! Even before Covid-19 struck, we made a point of being fast-paced and agile in our processes. We try to give constructive feedback to candidates as fast as we can, and are flexible around time-zones when it comes to the scheduling of interviews. Now more than ever, we make sure we’re paying attention to the specific needs or situations of our candidates.

2. Give candidates the chance to get to know Fidel's culture

We asked our new starters if not having the chance to be in the office during the hiring process concerned them when assessing our culture. 100% of them said it didn’t.

What the team said:

“Not at all. Obviously I would like to have been to the office and met everyone in person, but I don't feel like the lockdown is any detriment to sharing the company culture that everyone absolutely lives by."

Carlos F., QA Engineer, Lisbon

How we did it:

We encouraged everyone involved in the hiring process to share their honest feelings about what it’s like to work at Fidel. We made a point of talking candidates through our company values so they understood what we care about as individuals and as professionals (even if they couldn’t experience it in person).

3. Collect feedback from candidates

When we asked our new starters what captivated them about Fidel, the answer was pretty much unanimous:

What the team said:

“The funding, the people, and the product. All best-in-class!”

Simon B., Business Development Manager, London

How we did it:

The best way to improve any process is by looking for feedback. During our hiring processes we send NPS surveys to our candidates to give them a chance to provide us with sincere feedback. After they’ve joined, we ask them to answer a few questions (like these ones!) on how their hiring and onboarding process was.

What we could do better

Starting to request feedback from our new starters has been a great learning experience for us. It’s really encouraging to see that most of the feedback we received is aligned with our focus on candidate experience.

But not everything is rainbows and we also received feedback on the areas where there’s room for improvement.

1. Share more about what we’re doing:

What the team said:

“I remember speaking to Kat and Les about this as the website isn't the most comprehensive in my opinion. The most useful part for me was the case studies. The culture was easy to understand through glassdoor and speaking to individuals.”

Simon B., Business Development Manager, London

How we’re addressing it:

A key piece of feedback from our new starters was how important it was to get to know our culture early on – even before they spoke with any team members. 70% of our new starters said that they relied mostly on Glassdoor reviews to understand our culture, rather than on materials created by the company. Some of the ideas for how we can improve that included a "meet the team” page, a more culture-oriented section in our blog, or even more team updates on Linkedin. To make our culture more visible, we’ve started this blog series and have some changes to our careers page underway. Watch this space!

2. Introduce candidates to more team members:

What the team said:

“Depending on the office we're hiring for, I would definitely recommend connecting candidates with 'culture carriers' even if not directly involved in day-to-day responsibilities. i.e. interacting with Anna was really helpful for me to gauge culture”

Pat N., VP Strategic Initiatives, New York

How we’re addressing it:

During the Pandemic, we’re making sure that candidates get the chance to meet more team members than usual. But the people the talk to in the hiring process are usually those who they’d be working most closely with. We’re now looking into ways for newbies to meet team members from completely different departments, giving them a more holistic view of the company culture. We’ve also started posting team-member spotlight posts on our instagram.

3. Give more reassurance about the Pandemic:

What the team said:

“I mentioned my concern about the current financial situation/pandemic. Although everyone was really helpful in answering my questions, I suppose it would have been good to have some really concrete resources explaining the drive for more recruitment despite the situation just to ease any initial concern without needing to request the extra detail. I think it would be a massive reassurance to a prospective new hire.”

Tom K., Copywriter, London

How we’re addressing it:

In such uncertain times, we’ve been conscious of the need to share more about the outlook of the company. 40% of our new starters said they would have appreciated a more detailed explanation of the current financial situation of the company. We realised that simply asking team members to speak about it during the hiring process might not be enough. Now, we’ve created an internal strategy to allow our top management to share more detail with the team and have formally added it into our interview guidelines.

Thanks to the feedback from our superstar new joiners, we now feel informed and empowered enough to make the right improvements to our hiring process. We’re ready to take it to the next level. To see what it looks like for yourself, why not apply for one of our open roles?

See our open roles