How do you embed a BTCPay button in React?

Question

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?

Answer 1

Step 1: Install

npm install react-btcpay-paybutton

Step 2: Import

import { ReactBtcPayButton } from 'react-btcpay-paybutton';

Step 3: Add ReactBtcPayButton Component

<ReactBtcPayButton btcPayDomain="YourServer.com" storeId="YourStoreID" />

Then, add other options as needed.

See the repo: https://github.com/2140data/react-btcpay-paybutton

React BTCPay Pay Button Accept BTC payments in your React app with BTCPay Server Pay Button