DEV Community: NoRamp

Approving NFTs + NoRamp

NoRamp — Tue, 08 Nov 2022 22:05:19 +0000

NoRamp is a platform that allows developers, marketplaces and individual creators to perform buy and sell operations of NFTs through fiat. During the transaction, both parties will receive fiat instead of crypto which is why it's called "No"Ramp.

1: Creating 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: Asset Approval

In order for us to use NoRamp as the transmitter of the asset through fiat money, we need to go through the process of asset approval.

It is vital for you to grant approval: Otherwise, NoRamp's objective might fail when transacting with the blockchain.

NFTs in NEAR and ETH have specific standards that allow granting permissions to wallet addresses such as EIP-721 or NEP-0178.

In this tutorial, you will be granting approvals programmatically with Javascript.

3: NoRamp's Wallet

In order to create a wallet in NoRamp so that we have the public key that we will granting approval for, you must go to NoRamp's wallet page and click on "Add Wallet"

In this step, you can import your own wallet or use NoRamp's managed wallet:

It is recommended to use NoRamp's managed since at the time of creating triggers, you won't have to worry about liquidity.

After creating the wallet, when you click on it, you will be able to see the public key. Something like this:

You will be using the public key (Account Id) in this tutorial referred as "NORAMP_WALLET_ADDRESS"

4: The Approvals + Javascript

Near

In the case of NEAR, we can use NEAR's sdk (Click Here for more information)

import * as nearAPI from "near-api-js";


const { keyStores, KeyPair } = nearAPI;
const myKeyStore = new keyStores.InMemoryKeyStore();
const PRIVATE_KEY = "YOUR_PRIVATE_KEY";
// creates a public / private key pair using the provided private key
const keyPair = KeyPair.fromString(PRIVATE_KEY);
// adds the keyPair you created to keyStore
await myKeyStore.setKey("testnet", "YOUR_ACCOUNT.testnet", keyPair);

In the code above, we are:

Importing a private key
Creating the relationship between the private key and YOUR_ACCOUNT.testnet
Saving the relation

It's important to note that if this is a production account, you must replace "testnet" with mainnet and the wallet address must contain "near". It would look like this:

await myKeyStore.setKey("mainnet", "YOUR_ACCOUNT.near", keyPair);

Now, you can create an account variable containing the account:

const account = await nearConnection.account("YOUR_ACCOUNT.testnet");

After doing the step above, we can create the contract instance which will allow to communicate with the smart contract (NFT smart contract in this case)

const contract = new Contract(
  account, // the account object that is connecting
  "YOUR_ACCOUNT.testnet",
  {
    // name of contract you're connecting to
    viewMethods: [""], // view methods do not change state but usually return a value
    changeMethods: ["nft_approve"], // change methods modify state (Change methods for NEP-0178)
  }
);

Now, you can call the contract with the NFT approval

await contract. nft_approve(
  {
    token_id: "TOKEN_ID",
    account_id: "NORAMP_WALLET_ADDRESS"
  },
  "300000000000000", // attached GAS (optional)
  "1000000000000000000000000" // attached deposit in yoctoNEAR (optional)
);

The final code would look like this: Click here to see Gist

ETH:

For this part, we will essentially execute the NFT approval in ethereum chain. Using ethers package (found here)

import {Contract, providers, Wallet, utils} from "ethers";

const provider = new providers.JsonRpcProvider({
   url: "http://127.0.0.1:8545",
});

const wallet = new Wallet("ETH_PRIVATE_KEY", provider);

In the code above you are:
1) Creating a provider that communicates with the JSON RPC for the ETH chain. (Remember to put the URL of your preferred JSON RPC provider)
2) Creating a wallet object based on the ETH private key.

Now, you will create the contract object to execute the contract calls.

const contract = new Contract("CONTRACT_ID", ["function approve(address _approved, uint256 _tokenId)"], wallet);

In the code above, we are creating the Contract instance. Any call to this instance will be paid under wallet.

Remember to replace CONTRACT_ID with your NFT contract.

const result = await (contract["approve"]("NORAMP_WALLET_ADDRESS", "TOKEN_ID", {
      gasPrice: "0",
      gasLimit: "1"
}));

In the code above, you are calling approve function based on EIP-721 which has the following signature:

function approve(address _approved, uint256 _tokenId) external payable;

which means we are passing two paremeters: NORAMP_WALLET_ADDRESS and TOKEN_ID.

In the case of gasPrice and gasLimit, you need to set the amounts to as required by the contract. This can vary.

6: Summary

1) We successfully created a NoRamp's managed wallet
2) We have successfully granted access NoRamp's to the NFT by calling the contract and granting the approval
3) We are ready to implement NoRamp's in our NFT marketplace

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.

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

NoRamp — Wed, 26 Oct 2022 14:50:25 +0000

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

Covering Transaction Fees in Fiat for #NEAR Blockchain.

NoRamp — Mon, 17 Oct 2022 19:26:51 +0000

Today we'll be covering how to pay for transactions within the #NEAR blockchain with fiat currency.

Most blockchain platforms own a native token that is used to interact with the system to benefit the nodes that keep the network running safely. In the case of networks that work with smart contracts such as Ethereum, Solana, NEAR, and others, these tokens are also used to transact economic value in applications. These are what we call dApps.

This process is not frictionless as users need to set up a wallet and fund it with tokens (at times, this can be extremely difficult because of regulations for exchanges) to be able to send a valid transaction.

NoRamp enables developers to offer fiat-covered transactions for multiple blockchains including mainstream ones such as NEAR and Ethereum.

In this post, we'll be looking at how to transact with fiat currency in NEAR Smart Contracts.

1: Creating 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: Deploying a Smart Contract to NEAR

For this example, we will be using a simple NEAR Rust Smart Contract that can be found on Github

This smart contract contains a method called set_greeting which we will be calling through NoRamp using fiat money.

To deploy, we'll need to install the near cli which you can do by running

$ npm install -g near-cli

You will also need to do near login in order to create a testnet account.

After having done the steps above, you will be able to run npm run deploy from the repository we cloned earlier.

3: Connecting NoRamp

For us to connect a smart contract method to be paid by fiat through NoRamp, you will need to go to the trigger section of your application. Then, you will click on "Add Trigger"

Now, for a trigger to be added, you will need to import a wallet. This wallet can be a managed wallet (NoRamp covers the transaction cost) which is recommended, or you can use your own wallet (at your discretion, as NoRamp will intend to use your funds).

To avoid the friction described before, we strongly suggest using a managed wallet

4: Creating a Trigger

A trigger is referred as the smart contract action to execute when a payment succeeds. By default, we can use the UI to create pre-defined triggers. In our case, we will use the REST API in order to create a custom trigger (custom method name, custom parameters).

You can find the API Documentation for triggers here where it's explained the body and request to be made.

In this case, for the cloned repository containing the smart contract, we will be calling set_greeting. The trigger for such action will look like this:

curl -X POST https://api-testnet.noramp.io/triggers/[APP_ID] \
     -u [API_KEY]: \
     -H 'Content-Type: application/json' \
     -d '{"wallet_id":"[WALLET_ID]","call_data":{"near":{"contract_id":"[CONTRACT_ID]","method_name":"set_greeting","method_type":"change","attached_deposit_amount":"0"}},"params_data":{"string":{ "name": "greeting" }}}'

The request above means we will create a trigger for [APP_ID], using our [API_KEY], with our [WALLET_ID] for [CONTRACT_ID] which contains a method called set_greeting and a parameter greeting which is a string

After creating it, we can see how our trigger is now added in our UI

5: Creating a Payment Condition

Now, we will create a payment receipt with a trigger attached to it. This means, whenever the payment gets paid and succeeds, the trigger (smart contract call) will get executed + all the transaction costs will be covered by NoRamp.

In order to create a payment, we will follow the API guides found here.

To create a price, we can use the REST API with Curl or your favorite JS runtimes such as Deno, NodeJS, or Bun. In this case, we will use Deno.

const data = {
    "currency": "usd",
    "trigger_id": "[TRIGGER_ID]",
    "amount": 50,
    "type": "static",
    "trigger_data": {
        "params_data": {
            "greeting": "NoRamp"
        }
    }
  });

  const response = await fetch('https://api-testnet.noramp.io/prices/[APP_ID]', {
    method: "POST",
    headers: {
      'content-type': 'application/json',
      'authorization': 'Bearer [API_KEY]',
    },
    body: JSON.stringify(data)
  })

  console.log('response', await response.json());

With the code above, we can run it to create the price. Remember providing [TRIGGER_ID] (Found on the trigger dashboard for the trigger we generated above), [APP_ID] and [API_KEY]

After we run the code above, we will get a response similar to

response {
  data: {
    id: "price_3kX9Wq0ts6J8t542QNdtfq",
    app: { ... },
    kyc_id: null,
    trigger_id: "tri_5Vzx3CJl8Cw8NvaAL6jbG7",
    ...
    type: "static",
    amount: 50,
    currency: "usd",
    ...
    price_item: {
      currency: "usd",
      ...
      app_type: "individual",
      platform_fee: 3.9,
      amount: 50,
      ...
    },
...
  }
}

6: Creating a Payment Widget for Buyers

NoRamp provides widgets that can be used in the form of HTML code for your website. These widgets essentially handle all the UI and connection with NoRamp so you don't have to do it yourself. The integration widgets can be found here

For this example, we will copy the iframe HTML code and replace {price_id} with the ID previously generated with our Javascript code above. This price id contains the relation with the trigger, so when the price is paid by the "buyer", the smart contract action will take place.

When opening the HTML file created with the iframe code, we will see the generated widget

For the card number, you can use: 4242 4242 4242 4242 with any security code and any future date.

7: Payment and NEAR Blockchain Transaction

After providing the test card data to the widget, you will click on "Pay 51.80". Note that you might need to wait a couple of seconds while the transaction succeeds both at a payment and on-chain level.

When our transaction has been completed, the widget will look like this:

Now, we can see our transaction in the near blockchain:

https://explorer.testnet.near.org/transactions/BZTH2yNRr91buE4yXCxjXwDLXFEZrn2DmW8G6LRRdonJ

This transaction was processed and paid with fiat from a user perspective, unlocking blockchain for millions of developers and projects.

8: Summary

1) We have successfully created a smart contract call that can be paid with fiat money through NoRamp
2) We have successfully integrated a payment system in our website through basic HTML code
3) We have successfully deployed and communicated with a NEAR smart contract

All of this shows the power of NoRamp from an adoption perspective. It only takes a few lines of code to get NoRamp's solution up and running, adapted to your needs.

Seamlessly Integrate a Payment Platform in 10 Lines of Code

NoRamp — Wed, 05 Oct 2022 17:17:16 +0000

Hello Developer,

We are excited to bring you NoRamp, a payment platform for both web2 and web3 applications. NoRamp enables developers to seamlessly integrate fiat payment for both individuals and marketplaces.

NoRamp is removing the friction developers have generally faced trying to integrate payment solutions. For example, smaller teams require a lot of technical and legal work behind the scenes to integrate with financial services like Stripe to integrate and offer a fiat solution, but with NoRamp creating bills and making the UI for payments can be done in less than 10 lines of code.

1: Signing Up

The first thing we need to do is create an account. For this, you’ll go to NoRamp Testnet and click on "Sign Up".

After signing up, you’ll be redirected to our dashboard, where you can create two types of applications: Individual and Marketplace. For the purpose of this demo, we'll go ahead and choose "Individual"

2: KYC

Now, after creating our account and application, you'll see a sidebar on the left side with multiple pages where you can control your payment platform.

You’ll then be clicking on "Settings" and then you’ll click on the "KYC" sub tab.

In this step, you'll be completing "KYC" with test data. This is basically registering your legal or individual business inside NoRamp through Stripe.
To do this, choose the country where you are located and click on "Continue".

After doing the step above, you’ll be redirected to the Stripe page for KYC.

After following the steps on the screen, you'll be prompted to introduce banking information in order to complete the KYC. Since this is a testnet, make sure you click on "Use test account"

After doing so, you can click on "Submit" and you'll be ready to integrate.

Make sure your KYC status says "Completed".

3: Integrating

Now, it’s time for the fun stuff. Integrating at both a technical and UI level.

For the integration, you can go to API Documentation or click on "Integration" on the sidebar menu.

4: Creating a Price

Prices are like bills, they are meant to be paid by the user. You can create prices through NoRamp's endpoint. Prices can be dynamic (one-time payment) or static (re-usable).

In order to create a price, we can do it through fetch in Javascript. For this example, we'll use Deno, but you can do this with any Javascript runtime that supports the Fetch API.

const data = {
  "currency": "usd",
  "amount": 50,
  "type": "static"
});

const response = await fetch('https://api-testnet.noramp.io/prices/{YOUR_APP_ID}', {
  method: "POST",
  headers: {
    'content-type': 'application/json',
    'authorization': 'Bearer {API_KEY}',
  },
  body: JSON.stringify(data)
})

console.log('response', await response.json());

{YOUR_APP_ID}: The id of your app (Can be found in the upper right corner)
{API_KEY}: The API key for your application. Can be found in "API Key" or by clicking here. (Keep it safe and secret)

In the example above, we are creating a bill to be paid at an amount of 50$, and its type is static which means the same bill can be paid as many times as desired.

Now this will generate a response similar to

  data: {
    id: "price_aPlsak129KDjam28a",
    ...
    type: "static",
    amount: 50,
    currency: "usd",
    ...
  }

We'll use our field data.id for the payment widget integration.

5: Integrating Payment Widget

In the Integration tab, we'll see an html code containing a similar iframe:

For this, in {price_id} we'll use the price previously generated with our script. After copying and modifying the code with our price id, we will put it in a html file.

After opening our html file in the browser, we'll see our payment widget taking place:

Since we are in testnet, we will use our testnet card "4242 4242 4242 4242" "04/24" "44444"

We'll go ahead and click on "Pay $51.80"

Congratulations! Our payment has successfully gone through. Now, if you go to your Dashboard, you will be able to see the cash your application has received as well as the payments processed.

6: Webhooks

So far we have successfully integrated our payment systems, but at most of the times, we need to keep a level of awareness between NoRamp and our application. This level of automatic awareness can be achieved through Webhooks, a feature included in NoRamp that sends notification in POST requests to an specific endpoint. These notifications have multiple shapes and forms, most commonly, when the payment has been put on hold and when the payment has finished.

In order to attach a webhook, we can go ahead and click on "Webhooks" on the sidebar or by clicking here. When clicking on "Add Webhooks" we can fill the information with the URL we want to request whenever a payment event happens.

After a payment event has happened, our endpoint will receive a JSON body that will look like this:

{
  type: "payment",
  data: {
    id: "pay_2EShzjpKRG6nWyHwKSyJlT",
    app: { ... },
    price: {
      id: "price_6VN56mOtUtdUJyRf31TCxs",
      ...
      type: "dynamic",
      amount: 50,
      currency: "usd",
      ...
    },
    status: "paid",
    final_amount: 50,
    price_item: {
      currency: "usd",
      provider_processing_fee_percent: 2.9,
      provider_min_amount_fee: 0.3,
      app_fee: 0,
      app_type: "individual",
      platform_fee: 3.9,
      amount: 50,
      amount_total: 51.80226570545829,
      amount_transaction_fee: 0,
      amount_platform: 1.95,
      amount_seller: 0,
      amount_app: 48.05
    },
    payment_provider: "card",
    ...
  }
}

Then in your backend, you can decide what to do with this information, from storing it in a database to updating the UI of your application.

7: Summary

You have successfully created a payment integration system in literally less than 15 lines of code. This shows how easy and seamless it is to use NoRamp. For this reason, NoRamp is a great payment solution for individual developers and start-ups as it saves the technical and legal work that goes behind most of the current integrations in the market.

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, developers.
Remember to follow us on Twitter @No_Ramp and stay tuned for upcoming and exciting developments.