How do I add a custom “Pay with Crypto” button that dynamically grabs the price and redirects

[IRedefined]

Hi everyone,

I’m trying to add a custom “Pay with Crypto” button to both my product page and cart page that:

1. Matches the current design and placement of the existing payment buttons (just below “Add to Cart” or “Checkout”).

2. Dynamically grabs the product or cart total price (in USD).

3. Redirects the customer to a NOWPayments crypto checkout page using their API.

Here’s what I need help with:

How can I reliably target the product price and cart total using JavaScript in the Rebel theme?

Where exactly should I insert the button and script to avoid Shopify’s form submission errors (especially when an item is sold out)?

Any tips on keeping the styling consistent and Shopify-safe while triggering the external payment redirect?

I’ve tried adding the button to main-product.liquid and calling the NOWPayments API via JS, but I get a “Payment creation failed” error — likely because the script isn’t reading the price correctly.

Any help or sample code would be hugely appreciated!

Thanks in advance.

Best,

Rowan

[IRedefined]

Hi there,

Thank you for your message. 

It’s quite frustrating trying to get this button to work. I’ve never done any type of coding. Would it be possible to tell me where exactly to paste the code and what code I should use for it to work please? I’ve been using ChatGPT to write the code. I’ve been pasting this code at line 477 of the sections/main-product.liquid (with API key omitted of course):

<!-- Pay with Crypto Button -->
<div style="margin-top: 25px; text-align: center;">
<button
type="button"
id="crypto-pay-button"
style="
margin-top: 10px;
padding: 14px 28px;
background-color: transparent;
color: white;
border: 1.5px solid white;
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
"
onmouseover="this.style.backgroundColor='white'; this.style.color='black';"
onmouseout="this.style.backgroundColor='transparent'; this.style.color='white';"
>
Pay with Crypto
</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
const cryptoBtn = document.getElementById('crypto-pay-button');
const API_KEY = "YOUR_NOWPAYMENTS_API_KEY_HERE";
const productPrice = {{ product.price | divided_by: 100.0 }};
const productTitle = {{ product.title | json }};

if (cryptoBtn) {
cryptoBtn.addEventListener('click', async function () {
const paymentData = {
price_amount: productPrice,
price_currency: "usd",
order_id: "product_" + Math.floor(Math.random() * 1000000),
order_description: "Purchase of " + productTitle
};

try {
const response = await fetch("https://api.nowpayments.io/v1/payment", {
method: "POST",
headers: {
"x-api-key": API_KEY,
"Content-Type": "application/json"
},
body: JSON.stringify(paymentData)
});

const data = await response.json();

if (data && data.payment_url) {
window.location.href = data.payment_url;
} else {
alert("Payment creation failed. Please try again.");
}
} catch (error) {
console.error("NOWPayments Error:", error);
alert("Something went wrong.");
}
});
}
});
</script>

Thank you for all your help!

Best,

Rowan