Developer Questions
Have hard time calling the XUMM api from my frontend
9 months ago by Maarten
Goedemiddag :)
So first let me start with the error I am getting in my visual studio code
XUMM SDK: Running in browser
Error occurred while processing payment: TypeError: Network request failed
at https://xumm.app/assets/cdn/xumm-sdk.min.js:15:38608 {stack: 'TypeError: Network request failed
at http…/xumm.app/assets/cdn/xumm-sdk.min.js:15:38608', message: 'Unexpected response from XUMM API [POST:payload]'}
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<a href="index.html" class="brand">Core Values</a>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Artworks</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#" class="btn btn-primary">Log in</a></li>
</ul>
<button class="menu-btn">
<i class="fas fa-bars"></i>
</button>
</nav>
<div class="header-body">
<div>
<p>
Through the veils of self-exploration, vulnerability becomes strength, and we evolve with cosmic grace.
</p>
<span class="bar"></span>
<h1>Buy NFTs</h1>
</div>
<div>
<h1>Sell NFTs</h1>
<span class="bar"></span>
<p>
Where shadows dance with enlightenment, we become alchemists of our destiny.
</p>
</div>
</div>
</div>
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/grid1-top.png" class="grid-img" alt="grid1-top">
</div>
</header>
<div class="container">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/grid1-bottom.png" class="grid-img" alt="grid1-bottom">
<section class="services">
<div class="heading">
<h2>What We Actually Do?</h2>
<p>
NFTs are revolutionizing the world by enabling digital ownership, empowering creators to monetize
their work, transforming gaming and virtual real estate, and offering secure digital identity and
credentials. They also impact finance, charity, and real-world asset tokenization while revolutionizing
collectibles and intellectual property management. NFTs are reshaping industries and creating new
possibilities across various sectors. Through the veils of self-exploration, vulnerability becomes
strength, and we evolve with cosmic grace.
</p>
</div>
<div class="cards">
<div class="card">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/wallet.png" alt="wallet">
<h3>Set up your wallet</h3>
</div>
<div class="card">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/camera.png" alt="camera">
<h3>Create your own collection</h3>
<p>
NFT's are transforming the way commerce is transacted.
</p>
</div>
<div class="card">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/gift.png" alt="gift">
<h3>Add your NFTs</h3>
<p>
NFTs are changing the world.
</p>
</div>
</div>
</section>
<section class="featured">
<div class="heading">
<h2>Featured Artworks</h2>
</div>
<div class="cards">
<div class="card">
<a href="#" onclick="handlePayment('Azul Colour Crystal', 20)">
<img class="art-img" src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/crystal1.jpg">
</a>
<div class="light"></div>
<h3 class="art-title">Azul Colour Crystal</h3>
<div class="favourites">
<div class="favourites">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user1.jpg" alt="artwork" />
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user2.jpg" alt="artwork" />
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user3.jpg" alt="artwork" />
<small>+2</small>
</div>
<div>
<span>Favourite This</span>
</div>
<div class="bid">
<div>
<p>Current Bid</p>
<h3>
<i class="fab fa-ripple"></i>
20XRP
</h3>
</div>
<div>
</div>
</div>
</div>
</div>
<div class="card">
<a href="#" onclick="handlePayment('Fire Balls', 100)">
<img class="art-img" src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/crystal2.jpg">
</a>
<div class="light"></div>
<h3 class="art-title">Fire Balls</h3>
<div class="favourites">
<div class="favourites">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user1.jpg" alt="artwork" />
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user2.jpg" alt="artwork" />
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user3.jpg" alt="artwork" />
<small>+2</small>
</div>
<div>
<span>Favourite This</span>
</div>
<div class="bid">
<div>
<p>Current Bid</p>
<h3>
<i class="fab fa-ripple"></i>
1000XRP
</h3>
</div>
<div>
</div>
</div>
</div>
</div>
<div class="card">
<a href="#" onclick="handlePayment('Emerald Colour Crystal', 20)">
<img class="art-img" src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/crystal3.jpg">
</a>
<div class="light"></div>
<h3 class="art-title">Emerald Colour Crystal</h3>
<div class="favourites">
<div class="favourites">
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user1.jpg" alt="artwork" />
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user2.jpg" alt="artwork" />
<img src="file:///C:/Users/mmmil/Pictures/Nieuwe%20map/img/user3.jpg" alt="artwork" />
<small>+2</small>
</div>
<div>
<span>Favourite This</span>
</div>
<div class="bid">
<div>
<p>Current Bid</p>
<h3>
<i class="fab fa-ripple"></i>
20XRP
</h3>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="explore">
<div class="grid">
<!-- Add grid items here -->
</div>
<h2>Explore our top artworks</h2>
<p>
"Step into a world of artistic wonders and discover our carefully curated selection of top artworks. From
captivating masterpieces to cutting-edge creations, prepare to be mesmerized by the beauty, depth, and
creativity on display. Unearth the essence of human expression and immerse yourself in a realm where art
knows no bounds. Unleash your imagination and embark on an unforgettable journey through the realms of
creativity."
</p>
</section>
<section class="trial">
<h2>Get a free trial</h2>
<p>"Unlock your path to personal growth with our NFT marketplace's free trial. Experience the transformative
power of exclusive NFTs, designed to inspire, empower, and elevate your journey towards self-discovery.
Embrace unique digital artworks and collectibles that hold profound meaning, connecting you to a community
of like-minded individuals striving for personal development. Don't miss this opportunity to explore the
future of art and personal growth, all at no cost with our limited-time free trial."</p>
<a href="#" class="btn-primary">Join Us Now</a>
</section>
<footer>
<div>
<h2>Digital Agency</h2>
<p>Our digital agency is driven and passionate about crafting exceptional digital solutions. With
creativity and innovation at the core, we strive to deliver remarkable experiences that elevate brands
and exceed expectations.</p>
<hr />
<h3>Get our latest updates</h3>
<form>
<div class="input-wrap">
<input type="email" placeholder="Please enter your email address">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
<div>
<h3>Company</h3>
<ul>
<li><a href="#about-us">About Us</a></li>
<li><a href="#our-team">Our Team</a></li>
<li><a href="#company-culture">Company Culture</a></li>
<li><a href="#partnerships">Partnerships</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
<h3>Social Media</h3>
<ul>
<li><a href="#Facebook">Facebook</a></li>
<li><a href="#Twitter">Twitter</a></li>
<li><a href="#Telegram">Telegram</a></li>
<li><a href="#Instagram">Instagram</a></li>
<li><a href="#LinkedIn">LinkedIn</a></li>
</ul>
</div>
</footer>
</div>
<script src="https://xumm.app/assets/cdn/xumm-sdk.min.js"></script>
<script src="api.js"></script>
</body>
</html>
JavaScript Code:
const { XummSdk } = require('xumm-sdk');
const Sdk = new XummSdk('370c6e43-d3ed-4bd7-b644-9177f14250ce', 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX');
const handlePayment = async (artworkTitle, amount) => {
try {
const request = {
"TransactionType": "Payment",
"Destination": "rUjnffaez1ZqoH1CXS5G5tB4oiibhqczpf",
"Amount": amount.toString(),
"Memos": [
{
"Memo": {
"MemoData": artworkTitle
}
}
]
}
const subscription = await Sdk.payload.createAndSubscribe(request, event => {
console.log('New payload event:', event.data)
if (event.data.signed === true) {
// No need to console.log here, we'll do that below
return event.data
}
if (event.data.signed === false) {
// No need to console.log here, we'll do that below
return false
}
});
console.log(subscription.created);
const resolveData = await subscription.resolved;
if (resolveData.signed === false) {
console.log('The sign request was rejected');
}
if (resolveData.signed === true) {
console.log('The sign request was signed');
const result = await Sdk.payload.get(resolveData.payload_uuidv4);
console.log('User token:', result.application.issued_user_token);
alert(`Payment of ${amount}XRP for artwork "${artworkTitle}" is successful!`);
}
} catch (error) {
console.error('Error occurred while processing payment:', error);
alert('Payment process encountered an error. Please try again later.');
}
};
const main = async () => {
};
main();
And my Server-Side code I run on glitch:
const express = require('express');
const app = express();
const { XummSdk } = require('xumm-sdk');
const Sdk = new XummSdk('370c6e43-d3ed-4bd7-b644-9177f14250ce', 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX');
const allowedOrigins = ['*', 'https://xumm.app'];
app.use((req, res, next) => {
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
}
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});
app.post('/handle-payment', async (req, res) => {
const artworkTitle = req.body.artworkTitle;
const amount = req.body.amount;
try {
res.json({ success: true, message: 'Payment initiated successfully.' });
} catch (error) {
console.error('Error occurred while processing payment:', error);
res.status(500).json({ success: false, message: 'Payment process encountered an error. Please try again later.' });
}
});
// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
I am kind of stuck here and hoping you guys could help me out here , Am I missing something ?
Groeten uit Nederland :)