Creating an Online E-Commerce Integration with NoRamp, CSS & HTML
Tags: html, css, payment, programming
Published: 2022-10-26 14:50:25

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](https://dev.to/noramp/seamlessly-integrating-a-payment-platform-in-10-lines-of-code-27i) 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](https://dev.to/noramp/seamlessly-integrating-a-payment-platform-in-10-lines-of-code-27i) or you can go ahead and go to [NoRamp](https://testnet.noramp.io) 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](https://testnet.noramp.io/docs/api/prices)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yx8mkw9psgz0imzyf47.png)

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](https://testnet.noramp.io/settings/api-key) and your **{app_id}** can be found [here](https://testnet.noramp.io/apps/dashboard) 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7l7tosphxpu1ms05geh.png)



## 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.


```html
<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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxtdl87cdng1uinehvaz.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cciavmxext9u8hj75rzm.png)

## 5: Using our marketplace

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9oxl7qz04dkmh8aairt.gif)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5drn7qgr0r675qmtvwfb.png)


## 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](https://twitter.com/no_ramp) and stay tuned for upcoming and exciting developments.