NORAMP的平台使P2P付款能够进行交易。在引擎盖下，NORAMP提供了一套非常简单的API和集成小部件，供开发人员构建应用程序。
Noramp非常容易。仅需10 lines of code即可建立一个付款集成小部件。这是因为它的构建是为了使开发人员与美丽的UI/UX一起更轻松地体验。
。1：设置NORAMP帐户
要创建一个NORAMP帐户，您可以查看our tutorial，也可以继续前往NoRamp并按照步骤进行操作。
2：板条产品
当前，创建“产品”的唯一方法是通过REST API。这些产品在NORAMP中被称为“价格”，本质上是可以创建的账单，并包含用户要支付的价格，无论是一次性账单，以及您可能希望添加的元数据。您可以通过clicking here
找到该文档
对于本教程，我将创建3个价格，但是如果您愿意，您可以扩展它们。
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"}'
在上面的示例中，我们正在创建一个名称水瓶的项目，价格 2 USD 美元，其类型为 static 这意味着我们可以无数次使用它，因为该法案未过期。我还将为一磅苹果和薯片创造一个价格
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"}'
记住：您必须用您的值替换 {app_id} 和 api_key 。您可以在右上角找到here和 {app_id} 的API键here和 {app_id} 。
3：获取产品
NORAMP提供了一个终点，以获取我们创建的所有产品（价格）的列表。这个终点分别是GET https://api-testnet.noramp.io/prices/{app_id}，您可以这样使用：
curl -X GET https://api-testnet.noramp.io/prices/{app_id} \
-u API_KEY: \
-H 'Content-Type: application/json'
此请求将为我们提供包含data字段中每个产品价格对象的对象。
4：HTML＆CSS
为了教程，您将根据JS，HTML和CSS创建一个非常简单的页面。此页面将包括我们先前创建的3种产品。
通过请求价格端点以获取我们创建的所有“产品”，我们可以知道每个项目的ID，我们将需要填充以下HTML，该HTML将放入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>
从上面的代码中，您必须在Noramp的应用ID和 {app_id} 中替换 {price_id} 使用每个项目的价格ID。有效的链接看起来像这样：
https://testnet.on-noramp.com/embed/payments/app_33cwcr3fEty45BMDuMstWi?price_id=price_0mcr5GGirfn9bCjAm3mq0S&theme=dark
我们替换了上面的值并在浏览器中打开HTML文件后，我们应该获得与此类似的屏幕：
，如果我们单击一个“购买”按钮，它将您重定向到Noramp的付款页面
5：使用我们的市场
现在，使用我们的HTML设置。这就是工作流程的外观：
最后，我们能够通过Noramp购买一磅苹果：
6：摘要
1）我们成功创建了多个产品
2）我们创建了一个小型网站来显示它们
3）我们成功购买了其中一个，并用我们的测试信用卡
用于NORAMP文档：https://testnet.noramp.io/docs
用于Webhook文档：https://testnet.noramp.io/docs/api/webhooks
要进一步联系，您可以联系：hello@noramp.io
我们希望看到Noramp为您的应用程序和开发人员提供动力。
切记在Twitter @No_Ramp上关注我们，并继续关注即将到来的令人兴奋的发展。