-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
314 lines (293 loc) · 19.7 KB
/
Copy pathindex.html
File metadata and controls
314 lines (293 loc) · 19.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="https://cdn.prod.website-files.com/66bb8b91d983591ffeaacbce/66d22f5bf529a2d3a5c85794_Vector.png">
<title>Etherfuse: Ramp API Example</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<div class="main-wrapper">
<header>
<div class="container">
<div class="header-content">
<div class="header-text">
<h1>Etherfuse: Ramp API Example</h1>
<p class="subtitle">An example for how to use the <a href="https://docs.etherfuse.com" target="_blank" rel="noopener noreferrer">Etherfuse Ramp API</a></p>
<p class="subtitle warning">DISCLAIMER: This is a demo app, and should not be used for customer workflows to initialize and create orders. This is provided "as is" as a demonstration of how to consume the API. Feel free to test out workflows and share feedback.</p>
</div>
<!-- Mobile Sidebar Toggle -->
<button class="sidebar-toggle" id="sidebarToggle">Menu</button>
</div>
</div>
</header>
<div class="container">
<div class="content-layout">
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<nav class="sidebar-nav">
<!-- API Setup Status - shown when API is set up -->
<div id="apiSetupStatus" class="api-setup-status hidden">
<div class="api-setup-complete">
<span class="nav-icon">✅</span>
API Key Validated
</div>
</div>
<!-- API Setup Message - shown when API is not set up -->
<div id="apiSetupMessage" class="api-setup-message">
<div class="api-setup-prompt">
<span class="nav-icon">🔑</span>
Enter your API Key to proceed
</div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#onboarding" class="nav-link" data-step="onboarding">
<span class="nav-icon">🚀</span>
Onboarding
</a>
</li>
<li class="nav-item">
<a href="#orders" class="nav-link" data-step="orders">
<span class="nav-icon">💳</span>
Orders
</a>
</li>
<li class="nav-item">
<a href="#webhooks" class="nav-link" data-step="webhooks">
<span class="nav-icon">🔔</span>
Webhooks
</a>
</li>
<li class="nav-item">
<a href="https://docs.etherfuse.com" class="nav-link" target="_blank" rel="noopener noreferrer">
<span class="nav-icon">📚</span>
Documentation
</a>
</li>
</ul>
<!-- Start Over section - only visible when API is set up -->
<div id="startOverContainer" class="hidden">
<hr>
<button class="btn" id="startOverBtn">Logout</button>
</div>
</nav>
</aside>
<!-- Mobile Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Main Content Area -->
<main class="main-content">
<!-- Initial setup card -->
<div class="card" id="setupCard">
<h2>Enter your API Key</h2>
<p>This app will guide you through the process of ramping. You will need to have an API key from Etherfuse to begin.</p>
<div class="input-group">
<label for="apiKey">API Key</label>
<input type="password" id="apiKey" placeholder="Enter your Etherfuse API key...">
</div>
<button class="btn" id="continueBtn">Continue</button>
</div>
<!-- API Key received card -->
<div class="card hidden" id="onboardingUrlCard">
<h2>Generate an Onboarding URL</h2>
<p>To onramp a customer, you need to generate an <span class="accent">onboarding url</span> for them.</p>
<p>The onboarding url will be used to redirect the customer to KYC, and add a wallet and connect their bank account.</p>
<p>You can use the <a href="https://docs.etherfuse.com/api-reference/onboarding/generate-onboarding-url" target="_blank" rel="noopener noreferrer">generateOnboardingUrl</a> endpoint to generate an onboarding url.</p>
<p>You will need to provide the following parameters:</p>
<ul class="yellow-dots">
<li>customerId</li>
<li>bankAccountId</li>
<li>publicKey</li>
<li>blockchain</li>
</ul>
<p>See the <a href="https://docs.etherfuse.com/api-reference/onboarding/generate-onboarding-url" target="_blank" rel="noopener noreferrer">API Reference</a> for more details.</p>
<div class="input-group">
<label for="customerId">customerId (UUID) (Generated by you to represent this customer in your system)</label>
<input type="text" id="customerId" placeholder="Enter your customerId...">
</div>
<div class="input-group">
<label for="bankAccountId">bankAccountId (UUID) (Generated by you to represent this bank account in your system)</label>
<input type="text" id="bankAccountId" placeholder="Enter your bankAccountId...">
</div>
<div class="input-group">
<label for="publicKey">publicKey (wallet address)</label>
<input type="text" id="publicKey" placeholder="Enter your publicKey...">
</div>
<div class="input-group">
<label for="blockchain">blockchain (stellar, solana, base, polygon)</label>
<select id="blockchain">
<option value="stellar" selected>Stellar</option>
<option value="solana">Solana</option>
<option value="base">Base</option>
<option value="polygon">Polygon</option>
</select>
</div>
<button class="btn" id="generateOnboardingUrlBtn">Generate Onboarding URL</button>
<pre id="onboardingUrl" class="hidden"></pre>
<button class="btn hidden" id="openOnboardingUrlBtn">Open Onboarding URL</button>
</div>
<div class="card hidden" id="webhooksCard">
<h2>Webhooks</h2>
<p>To receive webhooks from Etherfuse, you need to create a webhook.</p>
<!-- Tab Navigation -->
<div class="tab-navigation">
<button class="tab-button active" data-tab="create-webhook">Create Webhook</button>
<button class="tab-button" data-tab="delete-webhook">Delete Webhook</button>
</div>
<!-- Create Webhook Tab -->
<div class="tab-content active" id="create-webhook-tab">
<p>You can use the <a href="https://docs.etherfuse.com/api-reference/webhooks/create-webhook" target="_blank" rel="noopener noreferrer">createWebhook</a> endpoint to create a webhook.</p>
<p>You will need to provide the following parameters:</p>
<ul class="yellow-dots">
<li>id (uuid)</li>
<li>eventType (bank_accoount_updated, customer_updated, order_updated)</li>
<li>url</li>
</ul>
<p>You can only have a single webhook for each event type.</p>
<p>See the <a href="https://docs.etherfuse.com/api-reference/webhooks/create-webhook" target="_blank" rel="noopener noreferrer">API Reference</a> for more details.</p>
<p>For testing, you can use a service such as <a href="https://webhook.site" target="_blank" rel="noopener noreferrer">webhook.site</a> to create a temporary webhook, and see the webhook activity in real-time. You should remove this when you are done testing, and you can do that here in the "Delete Webhook" tab.</p>
<h3>Your Current Webhooks</h3>
<pre id="webhooks">[{}]</pre>
<div class="input-group">
<label for="webhookId">id (uuid)</label>
<input type="text" id="webhookId" placeholder="Enter your webhookId...">
</div>
<div class="input-group">
<label for="eventType">eventType</label>
<select id="eventType">
<option value="">Select event type...</option>
<option value="bank_account_updated">bank_account_updated</option>
<option value="customer_updated">customer_updated</option>
<option value="order_updated" selected>order_updated</option>
</select>
</div>
<div class="input-group">
<label for="webhookUrl">url</label>
<input type="text" id="webhookUrl" placeholder="Enter your webhookUrl...">
</div>
<button class="btn" id="createWebhookBtn">Create Webhook</button>
</div>
<!-- Delete Webhook Tab -->
<div class="tab-content" id="delete-webhook-tab">
<p>Select a webhook to delete. This action cannot be undone.</p>
<h3>Your Current Webhooks</h3>
<div id="webhookList" class="webhook-list">
<!-- Webhook list will be populated here -->
</div>
</div>
</div>
<div class="card hidden" id="ordersCard">
<h2>Orders</h2>
<p>To create an order, you will need to first setup a webhook. To complete the order, a user needs to sign the transaction, and that information comes asynchronously through the webhook. See the <a href="#webhooks" data-step="webhooks">Webhooks</a> page to setup a test webhook if you don't have a real one to use yet. The webhook type for orders is <span class="accent">order_updated</span>. You can also look up an individual order by <span class="accent">order_id</span> and see its progression.</p>
<!-- Tab Navigation -->
<div class="tab-navigation">
<button class="tab-button active" data-tab="create-order">Create Order</button>
<button class="tab-button" data-tab="lookup-order">Look up Order</button>
</div>
<!-- Create Order Tab -->
<div class="tab-content active" id="create-order-tab">
<p>You can use the <a href="https://docs.etherfuse.com/api-reference/orders/create-order" target="_blank" rel="noopener noreferrer">createOrder</a> endpoint to create an order.</p>
<p>You will need to provide the following parameters:</p>
<ul class="yellow-dots">
<li>orderId (uuid)</li>
<li>bankAccountId (uuid)</li>
<li>publicKey (wallet address)</li>
<li>blockchain (stellar, solana, base, polygon)</li>
<li>fiatAmount (amount in fiat currency) - used when direction is "onramp"</li>
<li>tokenAmount (amount in tokens) - used when direction is "offramp"</li>
<li>direction (onramp, offramp)</li>
<li>memo (optional)</li>
<li>optionalPayerAccountId (wallet address)</li>
</ul>
<p>See the <a href="https://docs.etherfuse.com/api-reference/orders/create-order" target="_blank" rel="noopener noreferrer">API Reference</a> for more details.</p>
<h3>Example Recent Orders</h3>
<pre id="orders">[{}]</pre>
<div class="input-group">
<label for="orderId">orderId (UUID)</label>
<input type="text" id="orderId" placeholder="Enter your orderId...">
</div>
<div class="input-group">
<label for="bankAccountIdOrder">bankAccountId (UUID)</label>
<input type="text" id="bankAccountIdOrder" placeholder="Enter your bankAccountId...">
</div>
<div class="input-group">
<label for="publicKeyOrder">publicKey (wallet address)</label>
<input type="text" id="publicKeyOrder" placeholder="Enter your publicKey...">
</div>
<div class="input-group">
<label for="blockchain">blockchain (stellar, solana, base, polygon)</label>
<select id="blockchain">
<option value="stellar" selected>Stellar</option>
<option value="solana">Solana</option>
<option value="base">Base</option>
<option value="polygon">Polygon</option>
</select>
</div>
<div class="input-group">
<label for="amountField" id="amountLabel">fiatAmount (amount in fiat currency)</label>
<input type="text" id="amountField" placeholder="Enter your fiatAmount...">
</div>
<div class="input-group">
<label for="direction">direction (onramp, offramp)</label>
<select id="direction">
<option value="onramp" selected>Onramp</option>
<option value="offramp">Offramp</option>
</select>
</div>
<div class="input-group">
<label for="memo">memo (optional)</label>
<input type="text" id="memo" placeholder="Enter your memo...">
</div>
<div class="input-group">
<label for="optionalPayerAccountId">optionalPayerAccountId (wallet address)</label>
<input type="text" id="optionalPayerAccountId" placeholder="Enter your optionalPayerAccountId...">
</div>
<button class="btn" id="createOrderBtn">Create Order</button>
<pre id="order" class="hidden"></pre>
</div>
<!-- Look up Order Tab -->
<div class="tab-content" id="lookup-order-tab">
<p>You can use the <a href="https://docs.etherfuse.com/api-reference/orders/get-order-details" target="_blank" rel="noopener noreferrer">Get Order Details</a> endpoint to get the details of an order, and periodically check the status of the order.</p>
<p>You will need to provide the following parameter:</p>
<ul class="yellow-dots">
<li>orderId (uuid)</li>
</ul>
<p>See the <a href="https://docs.etherfuse.com/api-reference/orders/get-order-details" target="_blank" rel="noopener noreferrer">API Reference</a> for more details.</p>
<div class="input-group">
<label for="lookupOrderId">orderId (UUID)</label>
<input type="text" id="lookupOrderId" placeholder="Enter the orderId to look up...">
</div>
<button class="btn" id="lookupOrderBtn">Look up Order</button>
<pre id="orderDetails" class="hidden"></pre>
</div>
</div>
</main>
</div>
</div>
</div>
<!-- Status message container -->
<div id="statusMessage" class="status-hidden"></div>
<footer>
<div class="container">
<div class="footer-content">
<span>© <span id="currentYear"></span></span>
<a href="https://etherfuse.com" target="_blank" class="footer-link" rel="noopener noreferrer">
<img src="https://cdn.prod.website-files.com/66bb8b91d983591ffeaacbce/66be850e20e16f5ddcd069aa_etherfuse_logo.svg" alt="etherfuse">
</a>
</div>
</div>
</footer>
<script type="importmap">
{
"imports": {
"uuid": "https://jspm.dev/uuid"
}
}
</script>
<script type="module" src="/js/main.js"></script>
</body>
</html>