search

2140data / react-btcpay-paybutton

Accept BTC payments in your React app with BTCPay Server Pay Button
MIT License
15 stars 7 forks source link

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data #15

Closed dragon-foobar closed 8 months ago

dragon-foobar commented 8 months ago

OS: Linux Stack: Nextjs v14

After the POST request /api/v1/invoices I'm coming across a parsing issue here:

if (this.readyState === 4 && this.status === 200 && this.responseText) {
          const parsedResponse = JSON.parse(this.responseText);

The response object is:

{ readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "https://btcpay0.voltageapp.io/api/v1/invoices", status: 200, statusText: "", responseType: "", response: `<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="utf-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n<title></title>\n<link href="/main/bootstrap/bootstrap.css?v=TBugl2TtFNerj9yQQ02W_Vh2MtFcdUmw0C-_UDb6qVc" rel="stylesheet" />\n<link href="/vendor/font-awesome/css/font-awesome.css?v=xB7IpSGaNhZ4b_uA4GMXrfm02jTy6epC65yhQFhqIwE" rel="stylesheet" />\n<link href="/vendor/flatpickr/flatpickr.css?v=aTEDpz7abtWGeUQOzwxEDvFBy2H0_-4YlhmGHbTbU4Q" rel="stylesheet" />\n<link href="/main/fonts/OpenSans.css?v=5or0eXX_npKCPPnU9xra_vLu1Z6CkpExoyK3FcrhT0E" rel="stylesheet" />\n<link href="/main/layout.css?v=qTv9AV8io31GmWlQBj0Pm8qyVx0t73BevcElwKAJvbA" rel="stylesheet" />\n<link href="/main/site.css?v=SEKSAIr_n5zPiO05j0Ku3yxVccasMTdyjtH79YmIJzs" rel="stylesheet" />\n\n\n<script nonce="4c431e9d2436dec665834856fca57870">if (window.localStorage.getItem('btcpay-hide-sensitive-info') === 'true') { document.documentElement.setAttribute('data-hide-sensitive-info', 'true')}</script>\n    <link href="/main/themes/default.css?v=h4rFfOQLTqp54puObFF5fet2ySt5rVcbQ7tBNAv7xvQ" rel="stylesheet" />\n    <link href="/main/themes/default-dark.css?v=oZbmHsUytKCXWh1vLiI0kB1DUSGa_sUEx3N3CrIpY-0" rel="stylesheet" id="DarkThemeLinkTag" />\n    <script src="/js/theme-switch.js?v=FD4J-7Hw_Q1BpQRNQrv3VMtgBJy9_rjJOQLjWsV03dQ"></script>\n    <noscript><style>.btcpay-theme-switch { display: none !important; }</style></noscript>\n\n\n    <meta name="theme-color" content="#51B13E">\n    <link rel="icon" href="/favicon.ico">\n    <link rel="apple-touch-icon" href="/img/icons/icon-512x512.png">\n    <link rel="apple-touch-startup-image" href="/img/splash.png">\n<noscript>\n    <style>\n        .hide-when-js { display: block !important; }\n        .only-for-js { display: none !important; }\n    </style>\n</noscript>\n\n    \n    <style>\n        .btcpay-footer .flex-xl-row { flex-direction: column !important; }\n        .btcpay-footer .justify-content-xl-start { justify-content: center !important; }\n    </style>\n</head>\n<body class="d-flex flex-column min-vh-100">\n    <section class="content-wrapper flex-grow-1">\n        <div class="container">\n            \n<div class="row">\n    <div class="col-lg-12">\n        <h2>Pay Button request failed</h2>\n            <div class="alert alert-danger mt-4">Invalid store</div>\n    </div>\n</div>\n\n        </div>\n    </section>\n    \n<footer class="btcpay-footer d-print-none">\n    <div class="d-flex flex-wrap flex-column justify-content-between flex-xl-row gap-3">\n        <div class="d-flex flex-wrap justify-content-center justify-content-xl-start gap-4">\n            <a href="https://github.com/btcpayserver/btcpayserver" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-github">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-github"></use>\n</svg>\n\n                <span>Github</span>\n            </a>\n            <a href="https://chat.btcpayserver.org/" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-mattermost">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-mattermost"></use>\n</svg>\n\n                <span>Mattermost</span>\n            </a>\n            <a href="https://twitter.com/BtcpayServer" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-twitter">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-twitter"></use>\n</svg>\n\n                <span>Twitter</span>\n            </a>\n            <a href="https://t.me/btcpayserver" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-telegram">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-telegram"></use>\n</svg>\n\n                <span>Telegram</span>\n            </a>\n            <a href="https://btcpayserver.org/donate/" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-donate">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#donate"></use>\n</svg>\n\n                <span>Donate</span>\n            </a>\n            <a target="_blank" href="/docs">\n                \n<svg role="img" class="icon icon-api">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#api"></use>\n</svg>\n\n                <span>API</span>\n            </a>\n            <a href="https://docs.btcpayserver.org/" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-docs">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#docs"></use>\n</svg>\n\n                <span>Docs</span>\n            </a>\n                <button type="button" class="d-flex align-items-center btn btn-link" data-clipboard="http://wsijjsuwlxeh5olbu4riqxntc3xgmhmvefwdd3chymr46g62cd4q3tqd.onion" data-clipboard-hover>\n                    \n<svg role="img" class="icon icon-onion">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#onion"></use>\n</svg>\n\n                    <span>Copy Tor URL</span>\n                </button>\n        </div>\n    </div>\n</footer>\n\n    <script src="/vendor/jquery/jquery.min.js?v=_xUj-3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej_m4"></script>\n<script src="/vendor/bootstrap/bootstrap.bundle.min.js?v=gvZPYrsDwbwYJLD5yeBfcNujPhRoGOY831wwbIzz3t0"></script>\n<script src="/vendor/moment/moment.min.js?v=4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ"></script>\n<script src="/vendor/flatpickr/flatpickr.js?v=8JjFd2_SowFyDnEwKGCXnvEUEMOYRuk9wPYg-ghhTwo"></script>\n<script src="/js/copy-to-clipboard.js?v=lho4xrCkpelqYqaGpMno6HZ5QTxa75Aahe9bcpcLBbs"></script>\n<script src="/main/utils.js?v=YWYFry_lJJd5uRfqSEdx6fjjZPJ4vhFrndn-J2ZXISU"></script>\n<script src="/main/site.js?v=VRfAW5R3F19n8txdzGLsvarb1q3XId__fybN7qWEgOk"></script>\n\n    \n</body>\n</html>\n`, responseText: `<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="utf-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n<title></title>\n<link href="/main/bootstrap/bootstrap.css?v=TBugl2TtFNerj9yQQ02W_Vh2MtFcdUmw0C-_UDb6qVc" rel="stylesheet" />\n<link href="/vendor/font-awesome/css/font-awesome.css?v=xB7IpSGaNhZ4b_uA4GMXrfm02jTy6epC65yhQFhqIwE" rel="stylesheet" />\n<link href="/vendor/flatpickr/flatpickr.css?v=aTEDpz7abtWGeUQOzwxEDvFBy2H0_-4YlhmGHbTbU4Q" rel="stylesheet" />\n<link href="/main/fonts/OpenSans.css?v=5or0eXX_npKCPPnU9xra_vLu1Z6CkpExoyK3FcrhT0E" rel="stylesheet" />\n<link href="/main/layout.css?v=qTv9AV8io31GmWlQBj0Pm8qyVx0t73BevcElwKAJvbA" rel="stylesheet" />\n<link href="/main/site.css?v=SEKSAIr_n5zPiO05j0Ku3yxVccasMTdyjtH79YmIJzs" rel="stylesheet" />\n\n\n<script nonce="4c431e9d2436dec665834856fca57870">if (window.localStorage.getItem('btcpay-hide-sensitive-info') === 'true') { document.documentElement.setAttribute('data-hide-sensitive-info', 'true')}</script>\n    <link href="/main/themes/default.css?v=h4rFfOQLTqp54puObFF5fet2ySt5rVcbQ7tBNAv7xvQ" rel="stylesheet" />\n    <link href="/main/themes/default-dark.css?v=oZbmHsUytKCXWh1vLiI0kB1DUSGa_sUEx3N3CrIpY-0" rel="stylesheet" id="DarkThemeLinkTag" />\n    <script src="/js/theme-switch.js?v=FD4J-7Hw_Q1BpQRNQrv3VMtgBJy9_rjJOQLjWsV03dQ"></script>\n    <noscript><style>.btcpay-theme-switch { display: none !important; }</style></noscript>\n\n\n    <meta name="theme-color" content="#51B13E">\n    <link rel="icon" href="/favicon.ico">\n    <link rel="apple-touch-icon" href="/img/icons/icon-512x512.png">\n    <link rel="apple-touch-startup-image" href="/img/splash.png">\n<noscript>\n    <style>\n        .hide-when-js { display: block !important; }\n        .only-for-js { display: none !important; }\n    </style>\n</noscript>\n\n    \n    <style>\n        .btcpay-footer .flex-xl-row { flex-direction: column !important; }\n        .btcpay-footer .justify-content-xl-start { justify-content: center !important; }\n    </style>\n</head>\n<body class="d-flex flex-column min-vh-100">\n    <section class="content-wrapper flex-grow-1">\n        <div class="container">\n            \n<div class="row">\n    <div class="col-lg-12">\n        <h2>Pay Button request failed</h2>\n            <div class="alert alert-danger mt-4">Invalid store</div>\n    </div>\n</div>\n\n        </div>\n    </section>\n    \n<footer class="btcpay-footer d-print-none">\n    <div class="d-flex flex-wrap flex-column justify-content-between flex-xl-row gap-3">\n        <div class="d-flex flex-wrap justify-content-center justify-content-xl-start gap-4">\n            <a href="https://github.com/btcpayserver/btcpayserver" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-github">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-github"></use>\n</svg>\n\n                <span>Github</span>\n            </a>\n            <a href="https://chat.btcpayserver.org/" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-mattermost">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-mattermost"></use>\n</svg>\n\n                <span>Mattermost</span>\n            </a>\n            <a href="https://twitter.com/BtcpayServer" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-twitter">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-twitter"></use>\n</svg>\n\n                <span>Twitter</span>\n            </a>\n            <a href="https://t.me/btcpayserver" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-social-telegram">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#social-telegram"></use>\n</svg>\n\n                <span>Telegram</span>\n            </a>\n            <a href="https://btcpayserver.org/donate/" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-donate">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#donate"></use>\n</svg>\n\n                <span>Donate</span>\n            </a>\n            <a target="_blank" href="/docs">\n                \n<svg role="img" class="icon icon-api">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#api"></use>\n</svg>\n\n                <span>API</span>\n            </a>\n            <a href="https://docs.btcpayserver.org/" target="_blank" rel="noreferrer noopener">\n                \n<svg role="img" class="icon icon-docs">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#docs"></use>\n</svg>\n\n                <span>Docs</span>\n            </a>\n                <button type="button" class="d-flex align-items-center btn btn-link" data-clipboard="http://wsijjsuwlxeh5olbu4riqxntc3xgmhmvefwdd3chymr46g62cd4q3tqd.onion" data-clipboard-hover>\n                    \n<svg role="img" class="icon icon-onion">\n    <use href="/img/icon-sprite.svg?v=Q3vlGWraHPY7QVCLK6nrlPEh8AZftMh_AlAVP2FZya4#onion"></use>\n</svg>\n\n                    <span>Copy Tor URL</span>\n                </button>\n        </div>\n    </div>\n</footer>\n\n    <script src="/vendor/jquery/jquery.min.js?v=_xUj-3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej_m4"></script>\n<script src="/vendor/bootstrap/bootstrap.bundle.min.js?v=gvZPYrsDwbwYJLD5yeBfcNujPhRoGOY831wwbIzz3t0"></script>\n<script src="/vendor/moment/moment.min.js?v=4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ"></script>\n<script src="/vendor/flatpickr/flatpickr.js?v=8JjFd2_SowFyDnEwKGCXnvEUEMOYRuk9wPYg-ghhTwo"></script>\n<script src="/js/copy-to-clipboard.js?v=lho4xrCkpelqYqaGpMno6HZ5QTxa75Aahe9bcpcLBbs"></script>\n<script src="/main/utils.js?v=YWYFry_lJJd5uRfqSEdx6fjjZPJ4vhFrndn-J2ZXISU"></script>\n<script src="/main/site.js?v=VRfAW5R3F19n8txdzGLsvarb1q3XId__fybN7qWEgOk"></script>\n\n    \n</body>\n</html>\n` }

And then modal isn't opening.

dragon-foobar commented 8 months ago

Whoops! Don't mind me, I had the store id set wrong by a character. Carry on.

2140data commented 8 months ago

Glad you found the issue! Closing.