DEV Community: fullStackMafia🀄

Building a gift card store with Svelte, Node JS, Reloadly and Stripe API

fullStackMafia🀄 — Thu, 27 Jan 2022 21:36:27 +0000

Originally posted on Reloadly's Developer Blog

Much of full stack web development has evolved from traditional HTML/CSS/JS architecture to the use of full scale JavaScript-themed libraries and frameworks. One of these is Svelte which alongside Angular, React and Vue - is largely being adopted as a rapidly scalable web framework. In this article, we’ll explore building a full stack web app with Node JS for our server.

We’ll build a CALL OF DUTY gift card store that uses Reloadly’s GiftCard API to make the gift card available and Stripe’s Session API to create a checkout session where we can purchase the gift card. As a reader, the concepts in this article will be easier to grasp if you have an intermediate understanding of JavaScript, NodeJS and Svelte. You may want to refer to these resources while reading as well:

TL:DR: Code sample on GitHub

Creating a Svelte App and installing dependencies

The first step to creating our gift card store is to scaffold a Svelte app from scratch and install a number of dependencies (also called packages). Here’s a list of dependencies we’ll need for our app:

axios: A promise based HTTP client for making API requests.
dotenv: A module for loading separately stored environmental variables.
express: A Node JS application framework - this will be used extensively in our server
sirv-cli: A lightweight CLI program used to server static sites. This gets auto-installed when you create a new Svelte app.
stripe: A wrapper for Stripe’s API.

Note: A basic prerequisite for this tutorial is to have Node installed in your machine. If you haven’t done that, you can do so here

Before installing dependencies, create your app by kickstarting the Svelte create-app command in your terminal:


# create a new Svelte project named "svelte-store"

npx degit sveltejs/template svelte-store

# navigate into the folder of the newly created project

cd svelte-store

# install all dependencies in your local "node_modules" folder

npm install

# deploy your application on a localhost server

npm run dev

At this point, you should see a starter web page in your browser when you navigate to localhost:8080

Building a Node Server

The next step is to create a server that handles the requests we’ll make to Reloadly’s and Stripe’s APIs for gift card data fetching and purchases respectively.

Before we go further, take a few moments to sign up for a Reloadly and Stripe account so you can get an access token and secret key respectively. Below are links to short, straightforward guides that show you how to do this:

Once you’re done getting the access token and secret key, navigate to your project’s folder in your terminal and install the list of dependencies mentioned earlier:

npm install axios dotenv express stripe

Next, in the root folder of your project create an .env file to protect your sensitive credentials ( access token and secret key ) from being shipped into production alongside your code. In this file, add your access token and secret key and assign them to variables.


.env

STRIPE_KEY='YOUR_SECRET_KEY_HERE'
RELOADLY_TOKEN='Bearer YOUR_ACCESS_TOKEN_HERE'

Next, create a server.js file at the root folder of your project. Begin your server with importing (requiring) all the dependencies you have installed:


// ./server.js

require('dotenv').config();
const express = require("express");
const app = express();
const axios = require("axios");
const stripe = require("stripe")(process.env.STRIPE_KEY);
const accessToken = process.env.RELOADLY_TOKEN

Let’s start with fetching data from Reloadly’s gift card API - create a bunch of variables to handle the request and response data:


// ./server.js

...

const url = "https://giftcards.reloadly.com/products/120";
const headers = {
  Accept: "application/com.reloadly.giftcards-v1+json",
  Authorization: accessToken,
};
let giftCardsData;
let giftCardsAmount;

...

Next, define a route handler which will enable users of our app to make a GET request to Reloadly’s API

// ./server.js

...

app.get("/giftcards", (req, res) => {
  axios
    .get(url, { headers: headers })
    .then((response) => {
      giftCardsData = response.data;
      giftCardsAmount = giftCardsData.fixedRecipientDenominations[0] * 100
      res.send({
        success: true,
        data: giftCardsData,
      });
    })
    .catch((error) => {
      res.send({
        success: false,
        data: error,
      });
    });
});

...

In the code snippet above, a request is made via Axios to Reloadly’s API and the API’s response is assigned to an existing variable. Pay attention to the response parameter fixedRecipientDenominations - this is the price of each gift card and it is iterated through and multiplied by 100 to prevent Stripe’s API from displaying it in cents.

After this, create a second route handler which will enable our users make a POST request to Stripe’s API when purchasing a gift card


// ./server.js

...

app.post("/create-checkout-session", async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: giftCardsData.recipientCurrencyCode,
          product_data: {
            name: giftCardsData.productName,
          },
          unit_amount: giftCardsAmount,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://www.reloadly.com/",
    cancel_url: "https://twitter.com/fullstackmafia",
  });
  res.redirect(303, session.url);
});

...

In the above code snippet, a request is made to Stripe’s API to create a checkout session with details of the gift card’s product. After each payment session is made, we can either redirect the user to a page with a successful message (success_url) or a failed one (cancel_url). Since this is a demo, I used Reloadly’s home page as the successful message and my Twitter account the failed message 😉

Lastly, configure your server to make files from the public folder in your project accessible via HTTP requests. Also set a GET route handler to the root of your app and connect your app to your localhost server via Express’ app.listen() function. These are detailed in the code snippet below:


// ./server.js

...

app.use(express.static("public"));
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "index.html"));
});
app.listen(5000, () => {
  console.log("Server is up at port 5000");
});

There! You’ve got your server all up and set. You can confirm your server works by kickstarting it in your terminal with the command below:

 node server.js

This should start your server and you should see the confirmatory message you specified in the app.listen() function:

# Server is up at port 5000

Building a Svelte component

Once the server is up and running, our next step is to work on creating a Svelte component that displays the gift card as well as the checkout page to our users. In the /src folder of your app, open the App.svelte file and delete the existing template.

For starters, we’ll define an object that handles the state of our app during the duration of an API request - from the point a request is made to fetch gift cards till a response is gotten from Reloadly’s API. Let’s start this by creating an object in our component:


// ./src/App.svelte

<script>
  let buju = {
    productName: undefined,
    loading: false,
  };

  ...
</script>

Next, we’ll specify a variable to handle the gift card data we’ll be getting from our server. We’ll also create an async function to handle our loading state and fetch the gift card data from our server:


// ./src/App.svelte

<script>
 ...

  let results;
  async function getGiftCards() {
    buju.loading = true;
    try {
      const returnValue = await fetch("/giftcards");
      const response = await returnValue.json();
      results = response.data;
      buju = {
        productName: results.productName,
        loading: false,
      };
    } catch (error) {
      console.error(error);
    }
  }
</script>

Now we’ve defined the logic for our Svelte component, let’s complete the display by rendering our welcome message using HTML wrapped with Svelte’s main tag:


// ./src/App.svelte

... 
<main>
  <div>
    <p>GET ALL THE CALL OF DUTY GIFT CARDS <br> YOU WANT HERE!</p>
    <button class="search_button" on:click={getGiftCards}>SEARCH</button>
  </div>
</main>

Next, we’ll use Svelte’s if/else block to display the response we’ll get from our server. Here, we’ll create ample scenarios for when the gift card data is being fetched:


// ./src/App.svelte

... 
<main>
  <div>
    <p>GET ALL THE CALL OF DUTY GIFT CARDS <br> YOU WANT HERE!</p>
    <button class="search_button" on:click={getGiftCards}>SEARCH</button>
  </div>
  <div>
     {#if buju.loading === true}
        <p>Loading giftcards...</p>
     {:else if buju.productName !== undefined }
        <div class="results">
          <img class="product_image" src="{results.logoUrls[0]}" alt="gift card images" width="200px"/>
          <p class="redeem_instructions">Redeem Instructions: {results.redeemInstruction.verbose}</p>
          <p class="price">Price: {results.fixedRecipientDenominations[0]} USD</p>
          <form action="/create-checkout-session" method="POST">
              <button class="search_button" type="submit">BUY NOW</button>
          </form>
        </div>
    {/if}
  </div>
</main>

Now we’re done, one last thing - we need to change how we compile and load our Svelte app by loading it from the server. In the package.json file of your app, change the start property in the scripts object from sirv public --no-clear to node server.js:


// ./ package.json

... 

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "node server.js"
  }

...

Purchasing a Gift Card

Looks like we’re good to go! Let’s save all our files and in our terminal, navigate to our app’s folder and run the npm run dev command. As specified in the server, our app’s development environment should be live on port 5000. Let’s launch the app and attempt to make a gift card purchase:

In the above video, we can see how our app works when I purchased a CALL OF DUTY gift card from the data rendered from Reloadly’s gift card API , completed the order via Stripe’s checkout session and was redirected to Reloadly’s homepage as proof that my order was successfully completed. To confirm this, below is a screenshot from my Stripe account showing the purchase:

Taking things a step further

Building on our current app, we can explore the possibility of returning data on multiple gift cards via Reloadly’s Get all products gift card endpoint and paying for them via different checkout sessions for each respective product.

Summary

Working with Stripe and Node JS to build full stack applications is awesome as it enables you to expand your learning curve and explore JavaScript using a different approach. Like to take a look at the code? you can find it here on GitHub. If you’ve got any suggestions or thoughts to share, I’ll be in the comment section below.

Consuming REST APIs in Java Applications

fullStackMafia🀄 — Fri, 20 Aug 2021 12:39:32 +0000

Working with and processing responses from REST APIs in Java can be daunting for developers who are not very familiar with the language. In this tutorial, we will demystify the process behind parsing API responses in Java. We will be working with Spring — a framework for building Java applications.

Tools you will need

Java Development Kit (JDK): A software development environment used to develop Java applications. (At the time of writing, JDK 8 is most compatible with this tutorial).

Maven: A build automation tool used in Java projects. (At the time of writing this article, version 3.2 is most compatible with this tutorial).

Spring Initializr: An application that generates a basic Spring project structure.

Initializing a Java Application with Spring

The first step to getting started is to initiate a new project with Spring. You can do this by navigating to Spring Initializr’s web application and start a new project using the configurations specified below:

# Project - Maven Project
# Language - Java
# Spring Boot Version - 2.4.9

# Project Metadata
# Group - com.example
# Artifact - restapi
# Name - restapi
# Description - A demo project to showcase REST APIs
# Package name - com.example.restapi
# Packaging - JAR
# Java - 8

When you are done configuring your project, click on the GENERATE CTRL + ENTER button to generate a Spring project that can be downloaded and accessed via your IDE. Let’s take a moment to go over some of the configurations selected in creating this project:

Project: Requires you to choose from either one of two build tools - Maven or Gradle
Language: Requires you to choose from among one of three languages - Java, Kotlin, or Groovy
Group: Requires you to specify the package name of your project
Artifact: Requires you specify the name of your project’s application
Packaging: Requires you to specify your packaged file format

Your downloaded project should have a structure similar to the illustration below:


├── restapi
  └── .idea
  └── .mvn
  └── .src
    └── main
      └── java
        └── com.example.restapi
    └── test
  └── target
  └── gitignore
  └── HELP.md
  └── mvnw
  └── mvnw.cmd
  └── pom.xml

Defining classes for REST APIs

For our API data, we will make use of an endpoint from Reloadly’s API that returns details on any country based off its ISO code. The URL for accessing this is:

https://topups.reloadly.com/countries/{countrycode}

Where the countrycode parameter represents the ISO code of the country whose data is to be retrieved. For our example, we’ll use the United States (US).

When a successful response is gotten, the data will be in JSON and will be similar to this:


{
    "isoName": "US",
    "name": "United States",
    "currencyCode": "USD",
    "currencyName": "US Dollar",
    "currencySymbol": "$",
    "flag": "https://s3.amazonaws.com/rld-flags/us.svg",
    "callingCodes": [
        "+1"
    ]
}

To process this data in your application, you’ll need to create a domain class that contains properties and matching getter methods for the data you intend to retrieve from Reloadly’s API. Your property names should match the exact names of each response parameter in the data to be retrieved as shown in the GitHub gist below:

Fetching a REST API resource

Once you’re done creating a class that handles your response data, the next step is to make a request to Reloadly’s API to fetch the data. Upon creating your project, Spring Initializr creates a class that is named after your project and used to run your project. It is from this class that a request to Reloadly’s API endpoint will be made. Let’s take a look at how this is achieved in the gist below:

In the code sample above, we defined the following:

A class called RestApiApplication is created. This contains the methods that run and create a build for our application.
A logger which logs our API response to the console is also created.
A bean annotation which serves as the backbone of our application. It also creates a build for our application.
RestTemplate - a web client abstraction built on the Java Servlet API. It will be used to make our request to Reloadly’s API.

Reloadly’s endpoint can be broken down into:

https://topups.reloadly.com : This is the base URL that makes a request to Reloadly’s servers
/countries/US : This is the endpoint where data is to be fetched from, US is the country code for the United States - the country whose data we’re going to view. You can find out more details on Reloadly’s documentation here

At this point, our application should be complete. Let’s run it by navigating to our terminal and using Maven’s run command:

./mvnw spring-boot:run

The video clip below depicts how to do this:

Summary

Spring is a great framework for developers getting started with Java to get a grasp of the language. In this tutorial, we were able to go through the process of making a basic API call from an endpoint and retrieve a response. Should you need to go through the code sample for this, you can find it here on GitHub.

Creating a Promotion Tracker with React and Reloadly

fullStackMafia🀄 — Fri, 30 Jul 2021 08:49:35 +0000

Airtime can largely be seen as a necessity in today’s world thus when making top-ups, customers are always in search of value. It would be great if an application existed where a user could check for available airtime or data bonuses and promotions in any region around the world. In this article, we’ll build an application that meets this need using React - a JavaScript framework, and Reloadly - a service for global airtime top-ups.

Tools you will need

Node : A back-end JavaScript runtime environment that executes JavaScript code outside a web browser.
npm : A package manager for Node.
dotenv : A module that loads environment variables from an .env file
axios: A promise based HTTP client for the browser and NodeJS
react-bootstrap: A library that renders Bootstrap components in React applications

Also, intermediate knowledge of JavaScript and React would be fundamental to digesting this tutorial.

If you want to check out the source code of this application before reading the article, you can find it here.

Creating a React application

The first step to getting started is creating a skeletal React application. The fastest way to do this is to use the create-react-app command via your terminal:

    # Create a new React application with the below command

    npx create-react-app reloadly-app

    # Navigate to the newly created React application

    cd reloadly-app

    # Launch the application on your browser

    npm start

Note that npx on the first line is not a typo, it’s a package runner tool that comes with npm. Your new application’s folder should look somewhat like this when you are done creating it:

├── RELOADLY-APP
└── public
    ├── index.html
    ├── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── setupTests.js
└── .gitignore
└── package-lock.json
└── package.json
└── README.md

When the app is launched, you should see a web page similar to the image below. At this point, all you’ll see is React’s default web page

Getting your Reloadly access token

To access airtime bonus information from Reloadly, you’ll need an access token. This can be gotten by signing up for an account on Reloadly and using your client credentials to make a POST request for an access token. On your Reloadly dashboard, you can view your client credentials in the Developers section as depicted below:

It's important to note here that your client credentials should be kept private and secure at all times. Use these credentials to make a POST request to the https://auth.reloadly.com/oauth/token URL with the following body parameters:

    {
      "client_id":"YOUR_CLIENT_ID",
      "client_secret":"YOUR_CLIENT_SECRET",
      "grant_type":"client_credentials",
      "audience":"https://topups.reloadly.com"
    }

You can do this via ReqBin, an online testing tool for REST APIs.

Safeguarding your access token

On getting your access token, you’ll need a place to safely store it. This can be done using a .env file. First navigate to your terminal and in your project, install the dotenv module:


    npm install dotenv --save

Once this is installed, create a .env file in your project’s root folder and store your access token in it using the format below:

    // .env

    REACT_APP_ACCESS_TOKEN=Bearer YOUR_ACCESS_TOKEN_HERE

Fetching data with hooks and Axios

Once your access token is safely stored, you can use it to get promotion data from Reloadly’s servers. First, define the variables you will need to use as headers when making a request for the promotion data. The code snippet blow shows how to achieve this

    // src/promotions.js

    const accessToken = process.env.REACT_APP_ACCESS_TOKEN;
    const reloadlyJSON = `application/com.reloadly.topups-v1+json`
    const headers = {
      Accept: reloadlyJSON,
      Authorization: accessToken
    };

Next, you’ll define and handle state management for various data interaction points in your application. The promotion tracker will use three variables to track its different states:

data : For handling the promotion information retrieved from Reloadly’s servers
countryCode : For handling the country ISO code inputted by a user when requesting for promotion details about a particular country
loading : For handling the time intervals between a request to Reloadly’s servers and a response

These states can be managed with React’s useState() hook. The code snippet blow shows how the useState() hook initializes and updates state in the data , countryCode and loading variables:

    // src/promotions.js

    const [data, setData] = useState([]);
    const [countryCode, setCountryCode] = useState("");
    const [loading, setLoading] = useState(false);

Once this is done, you can make a GET request to Reloadly’s /promotions/country-codes endpoint with the aid of Axios. The code snippet below shows how this can be achieved by creating an asynchronous function called Promochecker() and in it, making your request:


// src/promotions.js

  const PromoChecker = async () => {
    setLoading(true);
    try {
      await axios
        .get(
          `https://topups.reloadly.com/promotions/country-codes/` + countryCode,
          {
            headers: headers
          }
        )
        .then((res) => {
          console.log(res.data)
          setData(res.data);
        });
    } catch (e) {
      setData(e.response.data);
      console.log(e.response);
    }
    setLoading(false);
  };

Viewing an operator’s promotion data

The steps to fetching the promotion data of an operator have been outlined. However, this data needs to be displayed to users of your application. You will also need to display instructions on how to use the application. The achieve these, you will use React’s conditional rendering feature to update the UI of your application. The code snippet below shows how you render a welcome message that will be seen by your application’s users:


// src/promotions.js

return (
  <section className="instructions">
    <h1>Welcome!</h1> <br></br>{" "}
    <p>
      You can search for ongoing promotions for mobile top-ups in a country by
      using the country's Alpha 2 ISO code.
    </p>{" "}
    <br></br>
    <p>
      {" "}
      Refer to this{" "}
      <a
        href="https://www.nationsonline.org/oneworld/country_code_list.htm"
        target="_blank"
        rel="noreferrer"
      >
        page
      </a>{" "}
      for a complete directory of ISO codes.
    </p>
  </section>
);

Next, you need to display an input form to receive country codes from users. The code snippet below shows how this can be done via an input bar that receives search queries and updates the state of the countryCode variable with them:


// src/promotions.js

<section className="input_instructions">
 <input
    type="text"
    placeholder="Enter country code..."
    onChange={(e) => setCountryCode(e.target.value)}
  />
...

</section>

After this, you’ll create a button to handle user requests. Your button should be able to perform the following:

Launch a request to Reloadly’s servers ( with the PromoCheck() function )
Display a spinner during the intervals of making a request and getting a response from Reloadly’s servers ( with the loading variable’s state )

The code snippet below depicts how this can be achieved with React’s onClick() event handler and a ternary operator:


// src/promotions.js

<section className="input_instructions">
...

  <button className="btn" onClick={PromoChecker} disabled={loading}>
    {loading && (
      <i
        className="fa fa-refresh fa-spin"
        style={{ marginRight: "5px" }}
      />
    )}
    {loading && <Spinner animation="border" />}
    {!loading && <span>Search</span>}
  </button>
</section>

Basically, your home page should have the structure below ( excluding the styling ) when you are done:

To display the information on promotions received as a response, you’ll create an arrow function that maps through the promotion information in the data variable. The code snippet below shows how to achieve this using React Bootstrap components:


// src/promotions.js

<section className="response">
  {data.map((item) => (
    <Accordion key={item.id}>
        <Card className="response_card">
            <Accordion.Toggle as={Card.Header} eventKey={item}>
                {item.title} <b>&nbsp; &nbsp; &#8693;</b>
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={item}>
                <Card.Body>
                  <p>{item.denominations}</p>
                  <p dangerouslySetInnerHTML={{ __html: item.description }}></p>
                  <p>{item.startDate}</p>
                  <p>{item.endDate}</p>
              </Card.Body>
            </Accordion.Collapse>
        </Card>
    </Accordion>
  ))}
</section>

The key components of your application are all put up together now. Let’s take a look at how it works when a user makes a request.

Summary

Working with React Hooks provides a feasible way to handle data across different components. With Reloadly’s REST API, you can retrieve data on telecom operators to meet your specific use case as shown in this article. You can check out the live demo of this application here.

How to build a custom checkout page in minutes with Django and JavaScript.

fullStackMafia🀄 — Mon, 25 Nov 2019 10:17:14 +0000

When implementing payment options in an app, it's always a good idea to have a payment process that's as brief and straightforward as possible. In this article, we're going to build a checkout modal to process one time payments on web apps using Rave, Django and JavaScript. To solve the issue of using pip and virtualenv together, we'll use pipenv to create our development environment. If you need help setting up pipenv, please check out this guide.

Setting up a Project

The first thing we'll do is install Django. Then we'll start a new project which we'll name djangorave. In this project, we'll create our first app which we'll call payments. Navigate to your terminal and input the following commands:

   # install Django
   $ pipenv install django

   # activate the pipenv shell to start a new shell subprocess
   $ pipenv shell

   (rave-checkout-python) $ django-admin startproject djangorave
   (rave-checkout-python) $ python manage.py startapp payments

Note that the virtual environment rave-checkout-python is just a part of my code directory, yours can be anything you choose. Let's add the newly installed app to the INSTALLED_APPS configuration in settings.py:

INSTALLED_APPS = [
    'django.contrib',
    'django.contrib.admin',
    'django.contrib .auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    #update the newly installed app
    'payments.apps.PaymentsConfig',
]

Next, in the same folder we'll update the urls.py file to include the payments app:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('payments.urls')), 
]

Our next step is to create a homepage for our application. In the djangorave parent folder, create a folder named templates and in it, your homepage:


(rave-checkout-python) $ mkdir templates
(rave-checkout-python) $ touch templates/homepage.html

Then we'll update the settings.py file so Django can access the templates folder:


#djangorave/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'], # add this line
        'APP_DIRS': True,
     },
]

We'll just fill the homepage with a basic message for now:


   # templates/homepage.html

   My First Django app

Then in the payments folder, we'll create a views.py file where Django class-based and generic views will be used to render the homepage:


   # payments/views.py

   from django.views.generic.base import TemplateView

   class HomePageView(TemplateView):
       template_name = 'homepage.html'

The view exists but it doesn't have a URL path yet. Let's change this by creating a urls.py in our payments app where we'll assign a path to our view:

    #payments/urls.py

    from django.urls import path
    from . import views

    urlpatterns = [
        path('', views.HomePageView.as_view(), name='homepage'),
    ]

At this point, our app is good enough to be viewed on the browser. Let's synchronize the changes we've made so far to our database and start the app on our local server:


# use the migrate command to sync to your database
(rave-checkout-python) $ python manage.py migrate

# start a local webserver with the runserver command
(rave-checkout-python) $ python manage.py runserver

This starts up your app on http://127.0.0.1:8000/. Navigate to this path on your browser and you should see your home page:

Integrate Rave

The second phase of building this app will be to integrate Rave into the app. Head on to Rave's website and sign up for an account. On your dashboard, first switch from live mode to test mode then navigate to Settings > API and get your API keys:

Copy your public and secret keys and paste them at the bottom of your settings.py file. Be sure to include the inverted commas:


    #settings.py

    RAVE_PUBLIC_KEY = 'YOUR PUBLIC KEY HERE'
    RAVE_SECRET_KEY = 'YOUR SECRET KEY HERE'

Building the checkout form

Now we have our API keys, let's add Rave's inline script to our homepage.html file:


    <form>
      <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
        <h3>SUPPORT NATURE WITH AS LOW AS $1</h3>
        <button type="button" onClick="payWithRave()">Donate Here</button>
    </form>
    <script>
        const publicKey = "{{ key }}";

        function payWithRave() {
            var x = getpaidSetup({
                PBFPubKey: publicKey,
                customer_email: "user@example.com",
                amount: 1,
                customer_phone: "234099940409",
                currency: "USD",
                txref: "rave-123456",
                custom_title: "Wildlife Park",
                onclose: function() {},
                callback: function(response) {
                    var txref = response.tx.txRef;
                    console.log("This is the response returned after a charge", response);
                    x.close();
                }
            });
        }
    </script>

In the above template, you'll notice there's a {{ key }} attribute assigned to the publickey constant. It should hold the value of our Rave public key. Let's update its value in views.py:


# payments/views.py

from django.conf import settings
from django.views.generic.base import TemplateView

class HomePageView(TemplateView):
    template_name = 'homepage.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['key'] = settings.RAVE_PUBLIC_KEY
        return context

Hit the refresh button and a basic HTML page that we can work with comes up:

Click on the Donate Here button and a modal customized by Rave opens up for you to make payment:

Make a test payment by using one of Rave's test cards here. Let's use 5531 8866 5214 2950, ensure that the expiry date and CVV number are correctly inputted as well. If prompted for an OTP or PIN, use the specified values in the list of cards:

To confirm that payment was successful, head on to your Rave dashboard and click on Transactions to access your transaction history:

Payment verification from the user's end

Sure our merchants can tell that payments are being made to their Rave account but how can a user tell that their payment was successful? Let's create a page that displays a success message to a user whenever they make a successful payment. In the templates folder, create a new file success.html:

# templates/success.html

<h3>Your payment was successful<h3/>

Next, we'll create a view for success.html:


#payments/views.py

from django.shortcuts import render
from django.conf import settings
from django.views.generic.base import TemplateView
class HomePageView(TemplateView):
    template_name = 'home.html'
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['key'] = settings.RAVE_PUBLIC_KEY
        context['logo'] = settings.WILDLIFE_LOGO
        return context

# create the view here
class Success(TemplateView):
    template_name = 'success.html'

Then we'll create a URL Pattern for the view:


    #payments/urls.py

    from django.urls import path
    from . import views
    urlpatterns = [
        path('success.html', views.Success.as_view(), name='success') #add this line,
        path('', views.HomePageView.as_view(), name='home'),
    ]

Lastly, we'll include success.html in the callback function in homepage.html:


    callback: function(response) {
        var txref = response.tx.txRef;
        console.log("This is the response returned after a charge", response);
        if (
            response.tx.chargeResponseCode == "00" ||
            response.tx.chargeResponseCode == "0"
        ) {
            document.location.href = "success.html"
                // redirect to a success page
        } else {
            // redirect to a failure page.
        }
        x.close();
    }

Seems we're good to go. Let's make a test payment and see what the flow looks like:

Summary

In a more practical scenario, we would use a more secure connection and also be more careful with handling our API keys by storing them securely in environment variables. Should you need the source code of this demo, you can find it here.

Securing credit card data in e-commerce applications with Rave

fullStackMafia🀄 — Tue, 12 Nov 2019 06:44:11 +0000

Since the advent of e-commerce, credit cards have become a widespread method of making payments for goods and services. Following their massive adoption, they have become vulnerable to data breaches and hacks. As a result, online marketplaces need to protect the payment data of their users. One way this is possible is via tokenization - where a customer's credit card number is replaced with a series of randomly generated numbers called the 'token'. This token can then be passed around various wireless networks needed to process the payment without actual card details being exposed because they are held in a secure token vault. In this article, we will depict the following:

Build a mock tax collection app using plain JavaScript and Rave - an online payment gateway.
Use a credit card to pay our tax and have the app display the token used to replace our card details.
Verify that the token actually represents our credit card details by using it to make another payment still on the app.

Let's get digging!

Getting Started

We'll begin by installing the libraries our app will need. Before this, it is assumed you have Node and npm already on your machine. Here are the libraries we'll install:

live-server: HTTP development server with live reload capability. Install this globally.
body-parser: Node's body parsing middleware that parses incoming request bodies in a middleware before your handlers and exposes them on the req.body property.
dotenv: A zero-dependency module that loads environment variables from a .env file into process.env.
express: A minimal and flexible Node web application framework that provides a robust set of features to develop web and mobile applications.
morgan: A HTTP request logger middleware for Node.
ravepay: Rave's library for Node.
heroku-logger: A logger for Heroku applications.

First, we'll make a folder for the tax app, install these libraries in it by running the following commands on our terminal:


   mkdir tax-app
   cd tax-app
   npm install #library name#

Then we'll create a Rave account so we can obtain our public and secret API keys. You can sign up for a Rave account here.
When we are done building the entire project, its folder should look like this:

Defining our app's user interface

The first step is to build the HTML page for our application. In your app's folder, create a subfolder and call it frontend. This is where you'll create your index.html file:


// frontend/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tax Application</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
    <div class="parent">
    <div id="wrapper" class="wrapper">
        <section class="card-api">
            <h4>Tax Payment App</h4>
            <h5>Pay via credit/debit card here:</h5>
            <form id="card-form" method="post">
                <div class="cardno">
                        <label for="cardno">Card Number: </label>
                        <input type="text" name="cardno" id="cardno">
                </div>

                <div class="cvv">
                    <label for="cvv">CVV: </label>
                    <input type="text" name="cvv" id="cvv">
                </div>

                <div class="expiry">
                    <label for="expiry">Expiry Date: </label>
                    <input type="text" name="expdate" id="expdate">
                </div>
                <div class="pin">
                    <label for="pin">PIN: </label>
                    <input type="text" name="pin" id="pin">
                </div>
                <button class="pay" id="card-pay" type="submit">Pay Here</button>

            </form>
        </section>
        <section class="tokencharge">
            <h4>Pay with Token here:</h4>
            <form id="token-form" method="post">
                <div class="token">
                    <label for="token">Card Token: </label>
                    <input type="text" name="token" id="token">
                </div>

                <button class="pay" id="token-pay" type="submit">Pay Here</button>
            </form>
        </section>
    </div>
    </div>

    <script src="./js/index.js"></script>
</body>
</html>

Then we'll configure styling for our HTML file:



// frontend/styles.css

input {
    border-radius: 5px;
    width: 50%;
}
.wrapper {
    display: block;
    justify-content:center; 
    align-self: stretch;
    padding: 20px;
    background-color: #75a3a3;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    width: 30%;
}
.error {
    margin-top: 15px;
    background: #a5391c;
    color: #fafafa;
    padding: 15px;
    border-radius: 6px;
    margin-left: 10px;
}
.success {
    margin-top: 15px;
    background: #138052;
    color: #fafafa;
    padding: 15px;
    width: auto;
    border-radius: 6px;
    max-width: 100%;
    margin-left: 10px;
}
button.pay {
    padding: 10px;
    border: 1px solid #1d255b;
    background: none;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}
button.pay:hover{
    background: #1d255b;
    color: #fafafa;
    cursor: pointer;
}
.cardno {
    display: flex;
    justify-content:space-between; 
    margin: 10px
}
.cvv {
    display: flex;
    justify-content:space-between; 
    margin: 10px
}
.expiry {
    display: flex;
    justify-content:space-between; 
    margin: 10px
}
.pin {
    display: flex;
    justify-content:space-between; 
    margin: 10px
}
 .token {
    display: flex;
    justify-content:space-between; 
    margin: 10px
 }
 section {
    justify-content:center;
     margin: 50px;
 }

When you are done, save both files and navigate to the frontend folder in your terminal to relaunch the app:


    cd frontend && live-server --port=3000

On your browser, you should have something similar to this:

Creating payment routes and functions

In this section, we'll create routes for our application. We'll do this by first creating an instance of Express Router() and using its post routing API to create initiatecharge and completecharge endpoints which will make any charges on credit cards. We'll also create a chargetokenizedcard endpoint which will tokenize all credit card information and return a token which can be used for subsequent transactions. It's important to note that all of this is done through Rave's Node JS library which serves as underlying infrastructure:



const router = require('express').Router();
var Ravepay = require("ravepay"); // require rave nodejs sdk
const logger = require('heroku-logger');
var rave = new Ravepay(process.env.RAVE_PUBLIC_KEY, process.env.RAVE_SECRET_KEY, false); // get public and secret keys from environment variables stored in the .env file.
const util = require('util');

Let's define a cardPaymentObject that handles the credit card details of any taxpayer:


// rave/index.js

var cardPaymentObject = {
    "currency": "NGN",
    "country": "NG",
    "amount": "10",
    "suggested_auth": "pin",
    "email": "ugwuraphael@gmail.com",
    "phonenumber": "08147658720",
    "firstname": "Raphael",
    "lastname": "Ugwu",
    "IP": "355426087298442",
    "txRef": "MC-" + Date.now(),// your unique merchant reference
    "meta": [{metaname: "flightID", metavalue: "123949494DC"}],
    "redirect_url": "https://your-redirect-url.com/redirect",
    "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
}

Then we'll define our routing APIs:


    // rave/index.js

    router.get('/', (req, res) => {
        console.log("Here's the rave route");
        res.json({message: "Here's the rave route"});
    });

    router.post('/initiatecharge', (req, res) => {
        var { cardno, expdate, cvv, pin } = req.body;
        // update payload
        cardPaymentObject.cardno = cardno;
        cardPaymentObject.cvv = cvv;
        cardPaymentObject.pin = pin;
        cardPaymentObject.expirymonth = expdate.split('/')[0];
        cardPaymentObject.expiryyear = expdate.split('/')[1];
        logger.info(JSON.stringify(cardPaymentObject));
        rave.Card.charge(cardPaymentObject)
            .then((response) => {
                logger.info(JSON.stringify(response));
                res.json(response)
            })
            .catch((error) => {
                logger.error(error)
                res.json(error)
            })
    });
    router.post('/chargetokenizedcard', (req, res) =>  {
        var { token } = req.body;
        cardPaymentObject.token = token;
        logger.info(cardPaymentObject);
        rave.TokenCharge.card(cardPaymentObject)
            .then((response) => {
                // console.log(response)
                res.json(response)
            }).catch(error => {
                // console.log(error)
                res.json(error)
            })
    });
    router.post('/completecharge', (req,res) => {
        var { transaction_reference, transactionreference, otp } = req.body;
        // perform card charge validation
        rave.Card.validate({
            transaction_reference,
            otp
        }).then((response) => {
            console.log(response)
            res.json(response)
        }).catch(error => {
            console.log(error)
            res.json(error)
        })

    })

    module.exports = router;

Building a Node server

Our next step is to create a Node server that will respond to the requests we make on the front end of our application. In your application's root folder, create a file called app.js and in it, embed the code sample below:


const app = require('express')();
const fs = require('fs')
const bodyParser = require('body-parser');
const morgan = require('morgan');
var port = process.env.PORT || 80 // 2. Using process.env.PORT
// app.use(cors(corsOptions));
app.use(function (req, res, next) {
    // 'https://hidden-earth-62758.herokuapp.com'
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,Authorization,Accept');
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    // Pass to next layer of middleware
    next();
});
const rave = require('./rave');
app.use(bodyParser.urlencoded({extended:false, limit: '10mb'}));
app.use(bodyParser.json());
app.use(morgan('dev'));
app.get('/', (req, res) => {
    res.send({message: 'Split Payment Sample'});
})
app.use('/rave', rave);
app.set('port', port);
app.listen(port, '', () => {
     console.info('App listening on port %s', port);
})

In the code sample above, we ensure our server handles any incoming request via the Express middleware. This includes logging all HTTP requests with morgan, parsing the body of incoming requests with bodyParser and requiring the payment routes and functions we defined earlier.

Handling our app's payment logic

Let's build some functions to interact better with our applications on the front end. In the frontend folder, create a file and name it index.js. First, we'll define all the variables we need for data manipulation:


    var cardPay = document.getElementById('card-pay');
    var tokenPay = document.getElementById('token-pay');
    var cardForm = document.getElementById("card-form");
    var tokenForm = document.getElementById("token-form");
    var wrapper = document.getElementById("wrapper");
    var server_url = 'http://localhost:80/'; // the nodejs server url

Then we'll define the function we need in handling any request we'll make the endpoints we created earlier:


    function makeRequest(endpoint, data, external=false) {
        var url = external ? endpoint : server_url + endpoint;
        var options = {
            method: "POST", 
            mode: "cors",
            cache: "no-cache",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            redirect: "follow", 
            referrer: "no-referrer", 
            body: JSON.stringify(data)
        }
        return new Promise(function _(resolve, reject) {
            fetch(url, options).then(function _(response) {
                console.log(response)
                return response.json()
            }).then(function _ (data) {
                console.log(data)
                if(data.body == undefined) resolve(data)
                resolve(data.body)
            }).catch(function _ (error) {
                reject(error)
            }).catch(function _ (error) {
                reject(error)
            })
        });
    }

To let our users know if an error possibly occurred, we'll create two functions - one to display a success message and one to display an error message should the POST request fail to go through:


 //frontent/index.js

function showSuccessMessage(message, element) {
    var div = document.createElement("div");
    div.setAttribute('class','success');
    div.setAttribute('id','message');
    div.innerHTML = '<i class="fas fa-check-circle"></i>  ' +message
    div.appendAfter(element)
}

function showErrorMessage(message, element) {
    var div = document.createElement("div");
    div.setAttribute('class','error')
    div.setAttribute('id','message')
    div.innerHTML = '<i class="fas fa-times-circle"></i>  ' +message
    div.appendAfter(element)
}

Next, let's link a button to the makeRequest() function and the initiatecharge endpoint:


cardPay.addEventListener('click', function(e) {
 e.preventDefault();

 // call api
 var formData = extractFormValues(cardForm);
 makeRequest('rave/initiatecharge', formData)
  .then(response => {
   if (response.status == "error") {
    showErrorMessage(response.message, cardPay);
   }
   if (response.data.chargeResponseCode == 02) { // a chargeResponseCode of 02 depicts that the transaction needs OTP validation to continue
    otp = prompt(response.data.chargeResponseMessage);
    transaction_reference = response.data.flwRef;
    makeRequest('rave/completecharge', {
      otp,
      transaction_reference
     })
     .then(function _(response) {
      if (response.data.data.responsecode == 00) {
       // the card token is accessed here: response.data.tx.chargeToken.embed_token
       showSuccessMessage(response.data.data.responsemessage + "<br/>Here is your token, you may use this for subsequent payments<br/>" + response.data.tx.chargeToken.embed_token, cardPay);
      } else if (response.data.data.responsecode == 'RR') { // the charge failed for the reason contained in // response.data.data.responsemessage
       showErrorMessage(response.data.data.responsemessage, cardPay)
      } else { // the charge failed for the reason contained in // response.message
       showErrorMessage(response.message, cardPay)
      }
     }).catch(function _(error) {
      showErrorMessage(error, cardPay)
     })
   }
  }).catch(function _(error) {
   showErrorMessage(error, cardPay)
  })
});

Inputing environmental variables

In all the routes we created, we mentioned our public and secret keys but we are yet to define them. Let's do that by specifying them as environmental variables in a .env file which we'll create in the root folder of our application:


    //  .env

    RAVE_PUBLIC_KEY= *YOUR RAVE PUBLIC KEY HERE*
    RAVE_SECRET_KEY=*YOUR RAVE SECRET KEY HERE*

Verifying a payment

We're done building the entire app. Save all your work and on your terminal, start the Node server:


    nodemon app.js

While the server is running, open another tab in your terminal and start the development server for the application:


    cd client && live-server --port=3000

This will have the app open on http://127.0.0.1:3000 in your browser. At this point, you should see the app. Try to make payment by using one of the test cards provided here:

To confirm that payment was successful, we'll be emailed a receipt:

The first time we used a card to pay, we received a token. Let's use the token to make a payment:

And we'll receive a receipt for that as well:

Conclusion

Card tokenization is a great way to protect the card details of your app users from being intercepted and used for malicious purposes. In this article, we built an app that shows how Rave tokenizes a card and uses that token for a future transaction. You can check out the source code of this application on GitHub.

Creating a basic online payment flow with Rave and Vue

fullStackMafia🀄 — Wed, 30 Oct 2019 07:19:05 +0000

JavaScript frameworks and libraries have enabled developers to create optimal solutions when building web apps. Single and progressive web applications have improved features such as loading time, SEO and accessibility. Lightweight frameworks such as Vue - which is incrementally adoptable and manages state seamlessly, are go-to options for anyone who wants to create a web app without the burden of structuring your application the "right” way. In this tutorial, we'll build a car rental application which will depict a basic payment process with Vue and Rave - a payment gateway used by businesses and freelancers to receive payments online. Let's begin.

Getting started

When we are done building this application, our payment flow should be something like this:

A user sees a car they want to rent from the list of cars available and clicks the Book Now button
The user gets redirected to a payment modal where they make payment (preferably via credit card)
When payment is made, Rave sends the user a receipt but still verifies the authenticity of the transaction. If the transaction is found to be valid, a unique authentication code is shown to the user, else an error message telling the user to retry the payment is displayed.

To build this application, we'll use the following:

Vue CLI: Vue's command line tool used for scaffolding Vue projects.
Vuetify: A material component design framework for Vue.
Axios: A lightweight, promise based HTTP client used for making API calls.
MarketCheck: An API that provides access to a database of new, used and certified vehicles.

Let's begin by installing Vue CLI. Navigate to your terminal and input the following command:


    npm install -g @vue/cli-service-global
    # or
    yarn global add @vue/cli-service-global

    #create a new Vue project
    vue create car-sales-app

    #navigate into the newly created app
    cd car-sales-app

For styling our markup, we'll install Vuetify. In your terminal, navigate to your project's folder and input the following command to install Vuetify:


vue add vuetify
#choose default when prompted

#start a development server on localhost:8080
npm run serve

On your browser, navigate to localhost:8080 to view the app:

Next, we'll install Axios. Navigate to your project's folder and input the following command:


    npm install axios

After installing Axios, we need to obtain an API key from MarketCheck. To do this, head on to MarketCheck and create an account:

At this point, the main.js file, located in the root folder of our project should look like this:


    import Vue from "vue";
    import App from "./App.vue";
    import vuetify from "./plugins/vuetify";
    Vue.config.productionTip = false;
    new Vue({
      vuetify,
      render: h => h(App)
    }).$mount("#app");

Fetching data from our API

By default, our project has a HelloWorld component. Let's delete that component and modify our App component to make requests to MarketCheck's API using Axios. Using Vue's mounted() lifecycle method, Axios makes a GET request to the API:


// App.vue
<script>
  export default {
    name: "app",
    mounted() {
      axios
        .get('https://marketcheck-prod.apigee.net/v1/search?&year=2016&make=toyota&api_key=INSERT-YOUR-API-KEY-HERE&Content-Type=application/json')
        .then(response => {
            this.carResponse = response.data.listings;
        })
        .catch(error => {
            console.log(error);
        });
    }
  }
</script>

carResponse is a data property which is responsible for handling the data received from our API and displaying it on our browser. Let's use UI components from Vuetify and Vue directives to structure our App component:


    // App.vue
    <template>
      <div id="app">
        <header>
          <h2>
            RENT A CAR. CALL 080-RENT-A-CAR
          </h2>
        </header>
        <v-container grid-list-xl>
          <v-layout wrap>
            <v-flex xs4 v-for="car in carResponse" :key="car[0]" mb-2>
              <v-card>
                <v-img :src="car.media.photo_links[0]" aspect-ratio="2"></v-img>
                <v-card-title primary-title>
                  <div>
                    <h3>{{ car.build.make }} {{ car.build.model }}</h3>
                    <div>Year: {{ car.build.year }}</div>
                    <div>Type: {{ car.build.vehicle_type }}</div>
                    <div>Mileage: {{ car.miles }} miles</div>
                    <div>NGN {{ car.price }} / Day</div>
                  </div>
                </v-card-title>
                <v-card-actions class="justify-center">
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </div>
    </template>
    <script>
    import axios from "axios";
    export default {
      name: "app",
      data() {
        return {
          carResponse: [],
          }    
      },
      mounted() {
        axios
          .get('https://marketcheck-prod.apigee.net/v1/search?&year=2016&make=toyota&api_key=INSERT-YOUR-API-KEY-HERE&Content-Type=application/json')
          .then(response => {
            this.carResponse = response.data.listings;
          })
          .catch(error => {
            console.log(error);
          });
      }
    };
    </script>
    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: justify;
      background-color: hsla(0, 0%, 75%, 0.1);
    }
    header {
      margin-bottom: 60px;
      text-align: center;
    }
    </style>

Here's a view of the current state of the app in our browser:

Implementing payments with Rave

For now, we are unable to receive payments for any of the displayed vehicles. Let's change that by implementing Rave's payment gateway in our app. First, we need to sign up with Rave and create a merchant account which enables us to receive payment for goods and services:

Once we are through with the sign-up process, we should see a dashboard similar to this:

On the dashboard navigate to Settings and then the API tab to retrieve the API keys. As this is a tutorial, switch to Test mode on the dashboard and make payment using a test card supplied by Rave to avoid disclosing sensitive information either by displaying our real API keys or credit card numbers. Below is a screenshot of your test API keys:

In the src/components folder, let's create a new component and name it RaveModal. Using Vue's create() hook, In our newly created component, we'll create an instance of Rave's inline script and append it to the DOM:


    // src/components/RaveModal.vue
    created() {
        const script = document.createElement("script");
        script.src = !this.isProduction
          ? "https://ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"
          : "https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js";
        document.getElementsByTagName("head")[0].appendChild(script);
      }

Using Vue's method property, we'll embed a payment modal in our component via Rave's getPaidSetup function:


    // src/components/RaveModal.vue
     methods: {
        payWithRave() {
          window.getpaidSetup({
            customer_email: this.email,
            amount: this.amount,
            txref: this.reference,
            PBFPubKey: this.raveKey,
            onclose: () => this.close(),
            callback: response => this.callback(response),
            currency: this.currency,
            country: this.country,
            custom_title: this.custom_title,
            custom_logo: this.custom_logo,
            payment_method: this.payment_method,
          });
        }
      }

Our next step will be to specify what each value in getPaidSetup should be. We'll do this by using Vue prop types:


    // src/components/RaveModal.vue 
    props: {
        isProduction: {
          type: Boolean,
          required: false,
          default: false //set to true if you are going live
        },
        email: {
          type: String,
          required: true
        },
        amount: {
          type: Number,
          required: true
        },
        raveKey: {
          type: String,
          required: true
        },
        callback: {
          type: Function,
          required: true,
          default: response => {}
        },
        close: {
          type: Function,
          required: true,
          default: () => {}
        },
        currency: {
          type: String,
          default: "NGN"
        },
        country: {
          type: String,
          default: "NG"
        },
        custom_title: {
          type: String,
          default: ""
        },
        custom_logo: {
          type: String,
          default: ""
        },
        payment_method: {
          type: String,
          default: ""
        }
      }

The template in our RaveModal component won't hold much, just a button that activates the payment modal when clicked:


 // src/components/RaveModal.vue

<template>
  <div class="rave">
    <button class="button" @click="payWithRave">Book Now</button>
  </div>
</template>

Finally, we'll import RaveModal into our App component and specify all the values of paywithRave() :


    // src/App.vue

    <script>
    import Rave from "./components/RaveModal.vue";
    export default {
      name: "app",
      components: {
        Rave
      },
     data() {
        return {
          carResponse: [],
          isProduction: false,
          raveKey: raveKey,
          email: "ugwuraphael@gmail.com",
          amount: "",
          currency: "NGN",
          country: "NG",
          custom: {
            title: "Car Shop",
            logo: carLogo
          },
          paymentMethod: ""
        };
      }
    }
    </script>

To include the payment button on our app, embed it in our template:


// src/App.vue

<template>
  <v-card-actions class="justify-center">
              <rave
                :isProduction="isProduction"
                :email="email"
                :amount="car.price"
                :reference="reference"
                :rave-key="raveKey"
                :callback="callback"
                :close="close"
                :currency="currency"
                :country="country"
                :custom_title="custom.title"
                :custom_logo="custom.logo"
                :payment_method="paymentMethod"
              />
            </v-card-actions>
</template

Finally, let's protect our API keys by storing them in a .env file. In the root folder of your project, create a .env file and store both MarketCheck and Rave APIs:


    // .env

    VUE_APP_CAR_API_KEY='YOUR MARKETCHECK API HERE'
    VUE_APP_RAVE_TEST_KEY='YOUR RAVE API KEY HERE'

When you are done, save the .env file and refer to the stored values in App like this:


// src/App.vue
<script>
  const carKey = process.env.VUE_APP_CAR_API_KEY;
  const raveKey = process.env.VUE_APP_RAVE_TEST_KEY;
</script>

Restart the development server on your terminal, navigate to your browser and try to make a payment for one of the vehicles:

Upon payment, Rave emails the customer a receipt:

Handling payment authentication

Although we can confirm that a customer made payment by checking our Rave dashboard for details of the transaction, it's still important to perform an authentication check for each transaction to detect issues such as reversed or fraudulent transactions. To achieve this, we'll define the callback property in Rave's getPaidSetup function to check for the authenticity of every transaction and return its transaction ID to the customer:


    <script>
      import Rave from "./components/RaveModal.vue";
      export default {
        name: "app",
        components: {
            Rave
        }
        methods: {
            callback: function(response) {
                if (
                    response.data.tx.status == "successful" &&
                    response.data.tx.chargeResponseCode === "00"
                ) {
                    if (response.data.tx.fraud_status === "ok") {
                        alert(
                            `Authenticate your payment via our mobile app with this code: ${response.data.tx.txRef}`
                        );
                    }
                } else {
                    alert("Your payment could not be processed. Please try again later");
                }
            }
        } 
    </script>

Now a customer can pay for an item and get an identifier such as an authentication code as an additional layer of authenticity:

Summary

Optimizing performance when building web apps is only going to get more important. Javascript developers have a lot of frameworks and tools to choose from and Vue is an awesome option. As for implementing payment options seamlessly, Rave gets the job done. To check out the source code of this application, head on to GitHub.