The Ravey Ebook

This is going to be a simple application selling a frictional ebook called Ravey. For this, we will be using the Ravepay API, so go ahead and open an account if you haven't, lets’ see the amount of time we spend to do this. The code for this project can be found HERE.

We will be developing this application using ASP.NET Core. Using visual studio, we will open a new ASP.NET Core Web Application.

Next, we will create our folders, the first will be a pages folder, after which we will create an image, css, lib and js folder in www.

Your project structure will look something like this.

project structure

Lets’ create our index.cshtml page.

@page
@model IndexModel
@{
ViewData["Title"] = "Purchase Ebook";
}
<h2>@ViewData["Title"]</h2>
<h3>@Model.Message</h3>
<img src="~/images/ebook.jpeg" alt="Ebook" />
<h5> Email</h5>
<input id="email" type="Email" />
<button type="button" style="cursor:pointer;" value="Pay Now" id="submit">Pay Now</button>
<script type="text/javascript" src='~/js/JavaScript.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js'></script>

and then index.cshtml.cs

@page
@model IndexModel
@{
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Ravey.Pages
{
public class IndexModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
Message = "Your Ravey Ebook.";
}
}
}

Next, we will put our ebook image in the image folder, then create a javascript file called javascript.js in the js folder.

document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("submit").addEventListener("click", function() {
var email = document.getElementById("email").value;
var chargeResponse = "",
trxref = "FDKHGK" + Math.random(),// add your transaction ref here
pubkey = "FLWPUBK-5abd9ea4796568373d193486fdff0b3c-X"; // Add public keys generated on your dashboard here
getpaidSetup({
customer_email: email,//
amount: 100,
currency: "NGN",
country: "NG",
custom_logo: "https://goodereader.com/blog/uploads/images/ebooks-graphic.jpg",
custom_description:"",
custom_title: "The Ravey Ebook",
txref: trxref,
PBFPubKey: pubkey,
onclose: function(response) {},
callback: function(response) {
//flw_ref = response.tx.flwRef;
console.log("This is the response returned after a charge", response);
if(response.tx.chargeResponse =='00' || response.tx.chargeResponse == '0') {
// redirect to a success page
window.location.replace("/success");
} else {
// redirect to a failure page.
window.location.replace("/error");
}
}
});
});
});

We will then create an Error.cshtml page, it will look like this:

@page
@model ErrorModel
@{
ViewData["Title"] = "Error";
}
<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>
@if (Model.ShowRequestId)
{
<p>
<strong>Request ID:</strong> <code>@Model.RequestId</code>
</p>
}
<using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Ravey.Pages
{
public class ErrorModel : PageModel
{
public string RequestId { get; set; }
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
public void OnGet()
{
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
}
}
}

And Error.cshtml.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Ravey.Pages
{
public class ErrorModel : PageModel
{
public string RequestId { get; set; }
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
public void OnGet()
{
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
}
}
}

Next is our success.cshtml page

@page
@model SuccessModel
@{
ViewData["Title"] = "Success";
}
<h1 class="text-danger">SUCCESS.</h1>
<h2 class="text-danger">Thanks foro purchasing with us!!.</h2>
<h3>Come back again</h3>

success.cshtml.cs will have the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Ravey.Pages
{
public class SuccessModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
Message = "Your Ravey Ebook.";
}
}
}

This is what our App will look like:

Hurray!!!, We are done with our app, now your turn. I would love to know the amount of time you spent on this project.