You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've read your FAQ about how to use our own code[1] inside BTCPay without modifying the core of the app. As I can see there we can use '~/wwwroot/checkout/js/core.js' but you'll need to break things or have a good knowledge of what you're doing to perform such tasks:
Installing nano (a text editor app):
apt update && apt install nano
Editing the ~/app/wwwroot/checkout-v2/checkout.js:
var imported = document.createElement('script');
imported.src = '/checkout-v2/core.js';
document.head.appendChild(imported);
Editing the ~/app/wwwroot/checkout-v2/core.js:
function showSepa() {
// Function to extract reference from the current URL
function extractReferenceFromURL() {
var currentURL = window.location.href;
var reference = currentURL.split('/').pop();
// Use a regular expression to filter out non-alphanumeric characters
return reference.replace(/[^a-zA-Z0-9]/g, '');
}
// Function to extract amount from HTML
function extractAmountFromHTML() {
var totalFiatElement = document.querySelector('#PaymentDetails-TotalFiat dd');
return totalFiatElement ? totalFiatElement.getAttribute('data-clipboard') : null;
}
// Create "Pay with SEPA" button dynamically
var sepaButton = document.createElement("button");
sepaButton.className = "btn btn-primary rounded-pill w-100 mt-2";
sepaButton.textContent = "Pay with SEPA";
// Create SEPA details container dynamically
var sepaDetailsContainer = document.createElement("div");
sepaDetailsContainer.className = "sepa-details mt-2";
sepaDetailsContainer.style.display = "none"; // Initially hide the content
// Container for default SEPA accounts
var sepaAccountsContainer = document.createElement("div");
sepaAccountsContainer.className = "alert alert-light text-start ";
sepaAccountsContainer.innerHTML = "<p>Account 1: XXXX-XXXX-XXXX-XXXX<br>Account 2: YYYY-YYYY-YYYY-YYYY<br>Amount: "+extractAmountFromHTML()+"<br>Reference: "+extractReferenceFromURL()+"</p>";
// Append elements to SEPA details container
sepaDetailsContainer.appendChild(sepaAccountsContainer);
// Get the existing element
var payInWalletButton = document.getElementById("PayInWallet");
// Insert the new elements after the existing one
payInWalletButton.parentNode.insertBefore(sepaDetailsContainer, payInWalletButton.nextSibling);
payInWalletButton.parentNode.insertBefore(sepaButton, payInWalletButton.nextSibling);
// Add click event for SEPA button to toggle details visibility
sepaButton.addEventListener("click", function() {
sepaDetailsContainer.style.display = (sepaDetailsContainer.style.display === "block") ? "none" : "block";
});
}
setTimeout(showSepa, 1000);
There is also a solution if you are using the Cloudflare CDN - the Zaraz app where it may be possible to use a custom html code but as far as I know there is a CSP prot headers on and this Zaraz can't be used.
This discussion was converted from issue #5703 on January 26, 2024 10:08.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Howdy!
I've read your FAQ about how to use our own code[1] inside BTCPay without modifying the core of the app. As I can see there we can use '~/wwwroot/checkout/js/core.js' but you'll need to break things or have a good knowledge of what you're doing to perform such tasks:
Installing nano (a text editor app):
Editing the ~/app/wwwroot/checkout-v2/checkout.js:
Editing the ~/app/wwwroot/checkout-v2/core.js:
There is also a solution if you are using the Cloudflare CDN - the Zaraz app where it may be possible to use a custom html code but as far as I know there is a CSP prot headers on and this Zaraz can't be used.
Can you reconsider to make this easier for users?
Thank you,
[1] https://docs.btcpayserver.org/FAQ/ServerSettings/#how-to-add-google-analytics-code-to-btcpay
Beta Was this translation helpful? Give feedback.
All reactions