3

When creating a pay button on the BTCPay dashboard, it gives you code that looks like:

<script>if(!window.btcpay){    var head = document.getElementsByTagName('head')[0];   var script = document.createElement('script');   script.src='https://btcpayjungle.com/modal/btcpay.js';   script.type = 'text/javascript';   head.append(script);}function onBTCPayFormSubmit(event){    var xhttp = new XMLHttpRequest();    xhttp.onreadystatechange = function() {        if (this.readyState == 4 && this.status == 200) {            if(this.status == 200 && this.responseText){                var response = JSON.parse(this.responseText);                window.btcpay.showInvoice(response.invoiceId);            }        }    };    xhttp.open("POST", event.target.getAttribute('action'), true);    xhttp.send(new FormData( event.target ));}</script><style type="text/css"> .btcpay-form { display: inline-flex; align-items: center; justify-content: center; } .btcpay-form--inline { flex-direction: row; } .btcpay-form--block { flex-direction: column; } .btcpay-form--inline .submit { margin-left: 15px; } .btcpay-form--block select { margin-bottom: 10px; } .btcpay-form .btcpay-custom { display: flex; align-items: center; justify-content: center; } .btcpay-form .plus-minus { cursor:pointer; font-size:25px; line-height: 25px; background: #DFE0E1; height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto 5px; display: inline-flex; justify-content: center; } .btcpay-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; color: currentColor; background: transparent; border:1px solid transparent; display: block; padding: 1px; margin-left: auto; margin-right: auto; font-size: 11px; cursor: pointer; } .btcpay-form select:hover { border-color: #ccc; } #btcpay-input-price { -moz-appearance: none; -webkit-appearance: none; border: none; box-shadow: none; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff; } </style>
<form method="POST"  onsubmit="onBTCPayFormSubmit(event);return false"  action="https://btcpayjungle.com/api/v1/invoices" class="btcpay-form btcpay-form--block">
  <input type="hidden" name="storeId" value="..." />
  <input type="hidden" name="jsonResponse" value="true" />
  <input type="hidden" name="price" value="0.01" />
  <input type="hidden" name="currency" value="BTC" />
  <input type="image" class="submit" name="submit" src="https://btcpayjungle.com/img/paybutton/pay.svg" style="width:209px" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
</form>

to copy and paste into your website. The main problem is it that code uses script and style tags which aren't allowed in React's JSX sytax. So how do you embed the button in a React Website?

sdfsdf
  • 5,052
  • 9
  • 42
  • 75
  • 1
    Do you really need to embed the button? for such a scenarios there is also API that you can use to generate invoice (https://docs.btcpayserver.org/API/Greenfield/v1/#operation/Invoices_CreateInvoice). In response you will get "checkoutLink" which will redirect your user to the payment page. So, you can create your own button that, once clicked, creates new invoice and shows that invoice to user. – c3R1cGFy Aug 26 '21 at 12:41
  • This docs describes Greenfield API which requires authentication, so is useable only when called from backend. `/api/v1/invoices` is Payment Button endpoint which can be called on frontend and I have not found doccs for it, just handler code: https://github.com/btcpayserver/btcpayserver/blob/master/BTCPayServer/Controllers/UIPublicController.cs#L43 – Bobík Jul 31 '22 at 17:20

0 Answers0