能否自行搭建结账页面？实现Stripe结账时随Licence选项改价

需求说明 #

已实现点击购买按钮跳转至Stripe结账页面，当前可通过下拉选择Licence选项变更页面显示价格。要求切换至“Exlusive”选项时，仅变更价格，标题及其他内容保持不变。

实现方案 #

现有代码已具备价格切换的核心逻辑，只需确保下拉选择变更时仅更新价格元素内容，不对标题、产品详情等其他DOM元素做修改即可。以下是调整后的完整代码：

<section id="prodetails" class="section-p1">
    <div class="single-pro-image">
        <img src="img/Cover Arts/Autumn.png" width="100%" id="MainImage" alt="">
    </div>

    <div class="single-pro-details"> <!--Fix in css-->
        <h6>Home / Beats</h6>
        <h4>Melodic Pop Beat = "Autumn"</h4>
        <h2 id="price">$5</h2>
        <select id="select">
            <option>Select Licence</option>
            <option>MP3</option>
            <option>Tagged Wav</option>
            <option>Un-Tagged Wav</option>
            <option>Stems</option>
            <option>Exlusive</option>
        </select>

        <script>
            const select = document.getElementById('select');
            const priceElement = document.getElementById('price');

            // 许可证对应价格映射
            const priceMap = {
                "Select Licence": '$5',
                "MP3": '$5',
                "Tagged Wav": '$7',
                "Un-Tagged Wav": '$10',
                "Stems": '$15',
                "Exlusive": '$50'
            };

            // 下拉选项变更时，仅更新价格
            select.addEventListener('change', () => {
                const selectedLicence = select.value;
                priceElement.textContent = priceMap[selectedLicence] || priceMap["Select Licence"];
            });
        </script>
    
        <a href="https://buy.stripe.com/bIYcNd7L051rag8cMN"><button class="normal">Add to Card</button></a>
        <h4>Product Details</h4>
        <span>Melodic Pop Beat - Autumn,Pop Beat in G Minor and BPM of 130,Beat is simple and melodic,It has the vibe of Dua Lipa and Weeknd Beat,The prices is great;just $5 for an tagged and mastered MP3,$7 tagged and unmastered Wav,$10 for un-tagged unmasterd and $15 for Stems,Exlusive are $50</span>
    </div>
    <div id="audio">
        <audio controls style="width:100%"> 
            <source src="Audio/Dua lipa 130 x Gmin.mp3" type="audio/mpeg">
        </audio>
    </div>
</section>

关键说明 #

• 仅针对价格元素（#price）做内容更新，标题、产品详情等其他元素完全保留原有内容，符合需求要求。
• 增加默认值兜底逻辑：若选中选项不在价格映射内，自动显示“Select Licence”对应的价格，提升代码稳定性。
• 优化变量命名（如price改为priceElement、prices改为priceMap），增强代码可读性。

内容的提问来源于stack exchange，提问作者Deni Beatz