Creating an Online E-Commerce Integration with NoRamp, CSS & HTML

NoRamp's platform enables P2P payments to be transacted. Under the hood, NoRamp provides a very straightforward set of APIs and integration widgets for developers to build applications with.

NoRamp is meant to be easy. It only takes 10 lines of code to set up a payment integration widget. This is because it was built with the goal of making the developer experience easier along with a beautiful UI/UX.

1: Setting up a NoRamp Account

To create a NoRamp account you can look at our tutorial or you can go ahead and go to NoRamp and follow the steps.

2: Crating Products

Currently, the only way to create "products" is through the REST Api. These products are called "prices" in NoRamp, which are essentially bills that can be created and contain the price to be paid by the user, whether it's a one-time bill, and metadata you might wish to add. You can find the documentation by clicking here

For this tutorial, I will be creating 3 prices but you can expand on them if you would like.

curl -X POST https://api-testnet.noramp.io/prices/{app_id} \
     -u API_KEY: \
     -H 'Content-Type: application/json' \
     -d '{"currency":"usd","amount":5, "name": "Water Bottle", "type": "static"}'

In the example above, we are creating an item with the name Water Bottle which costs 2 USD dollars and its type is static which means we can use it countless times, as the bill does not expire. I will also create a price for a pound of apple and potato chips

curl -X POST https://api-testnet.noramp.io/prices/{app_id} \
     -u API_KEY: \
     -H 'Content-Type: application/json' \
     -d '{"currency":"usd","amount":5.5, "name": "1lb Apples", "type": "static"}'

curl -X POST https://api-testnet.noramp.io/prices/{app_id} \
     -u API_KEY: \
     -H 'Content-Type: application/json' \
     -d '{"currency":"usd","amount":6.79, "name": "Potato Chips", "type": "static"}'

Remember: You must replace {app_id} and API_KEY with your values. You can find your API key here and your {app_id} can be found here on the right top corner.

3: Fetching Products

NoRamp provides an endpoint to fetch the list of all the products (prices) we have created. This endpoint respectively is GET https://api-testnet.noramp.io/prices/{app_id} which you can use like this:

curl -X GET https://api-testnet.noramp.io/prices/{app_id} \
     -u API_KEY: \
     -H 'Content-Type: application/json'

This request will provide us with an array of objects containing the price object of each product in the data field.

4: HTML & CSS

For the sake of the tutorial, you will create a very simple page based on JS, HTML, and CSS. This page will include the 3 products we previously created.

By requesting the price endpoint to get all the "products" we have created, we can know the ID of each item, which we will need to fill the following html that will be put inside a HTML file.

<div class="box">
    <div class="card">
        <img src="https://uploads-ssl.webflow.com/6332176218f456d82c9340c6/6332176218f456e0bf934282_NoRamp%2520logo%2520white%2520transparent-p-500.png" alt="Denim Jeans" style="width:100%">
        <h1>Water Bottle</h1>
        <p class="price">$5.0</p>
        <p><a href="https://testnet.on-noramp.com/embed/payments/{app_id}?price_id={price_id}&theme=dark" class="buy">Buy</a></p>
    </div>
    <div class="card">
        <img src="https://uploads-ssl.webflow.com/6332176218f456d82c9340c6/6332176218f456e0bf934282_NoRamp%2520logo%2520white%2520transparent-p-500.png" alt="Denim Jeans" style="width:100%">
        <h1>1LB Apples</h1>
        <p class="price">$5.5</p>
        <p><a href="https://testnet.on-noramp.com/embed/payments/{app_id}?price_id={price_id}&theme=dark" class="buy">Buy</a></p>
    </div>
    <div class="card">
        <img src="https://uploads-ssl.webflow.com/6332176218f456d82c9340c6/6332176218f456e0bf934282_NoRamp%2520logo%2520white%2520transparent-p-500.png" alt="Denim Jeans" style="width:100%">
        <h1>Potato Chips</h1>
        <p class="price">$6.79</p>
        <p><a href="https://testnet.on-noramp.com/embed/payments/{app_id}?price_id={price_id}&theme=dark" class="buy">Buy</a></p>
    </div>
</div>

<style>
    .box {
    display: flex;
    align-items: stretch;
    }

    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    }

    .price {
    color: grey;
    font-size: 22px;
    }

    .card .buy {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    }

    .card .buy:hover {
    opacity: 0.7;
    }
</style>

From the code above you must replace, {app_id} with your NoRamp's application id AND {price_id} with the price id of each item. A valid link would look like this:

https://testnet.on-noramp.com/embed/payments/app_33cwcr3fEty45BMDuMstWi?price_id=price_0mcr5GGirfn9bCjAm3mq0S&theme=dark

After we have replaced the values above and opening our HTML file in our browser, we should be getting a screen similar to this:

And if we click in one of the "Buy" buttons, it'll redirect you to NoRamp's payment page

5: Using our marketplace

Now, with our HTML set up. This is what the workflow would look like:

And finally, we were able to buy a pound of apples through NoRamp:

6: Summary

1) We successfully created multiple products
2) We created a small website to display them
3) We successfully bought one of them with our test credit card

For NoRamp documentation: https://testnet.noramp.io/docs
For WebHook documentation: https://testnet.noramp.io/docs/api/webhooks
For further contact, you can reach out to: hello@noramp.io
We hope to see NoRamp powering your applications and developers.
Remember to follow us on Twitter @No_Ramp and stay tuned for upcoming and exciting developments.