如何在WordPress博客中嵌入Crossmint NFT支付功能？

前提准备 #

先完成Crossmint平台的基础配置：

• 登录Crossmint控制台创建项目，获取项目ID
• 将你要售卖的NFT关联到该项目下，确认集合地址（collectionId）和目标NFT的tokenId
• 确保你的项目已开启支付权限

方法1：通过主题文件集成（适合有开发基础的用户） #

1. 登录WordPress后台，进入「外观」>「主题文件编辑器」，找到当前主题的functions.php文件；或者通过FTP直接访问服务器上的/wp-content/themes/你的主题名/functions.php
2. 在文件末尾添加以下代码，用来加载Crossmint的SDK脚本：

function load_crossmint_sdk() {
    wp_enqueue_script( 'crossmint-sdk', 'https://unpkg.com/@crossmint/client-sdk@latest/dist/crossmint.client.sdk.js', array(), 'latest', true );
}
add_action( 'wp_enqueue_scripts', 'load_crossmint_sdk' );

3. 保存文件后，打开需要添加购买按钮的页面/文章，切换到代码编辑器模式，插入以下HTML代码（替换占位符为你的实际信息）：

<button id="crossmint-buy-btn">购买此NFT</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const buyBtn = document.getElementById('crossmint-buy-btn');
    buyBtn.addEventListener('click', async () => {
        const crossmint = new window.Crossmint();
        try {
            await crossmint.payments.checkout({
                projectId: '你的Crossmint项目ID',
                collectionId: '你的NFT集合合约地址',
                tokenId: '要售卖的NFT的ID',
                fiatAmount: 50, // 替换为你的售价（法定货币金额）
                fiatCurrency: 'USD' // 支持的法定货币，比如EUR、GBP等
            });
        } catch (error) {
            console.error('结账失败:', error);
            alert('购买过程中出现问题，请稍后重试');
        }
    });
});
</script>

4. 保存页面后，访问前端测试按钮功能，确认能正常唤起Crossmint的结账弹窗。

方法2：使用自定义HTML区块（无需修改主题，适合非开发用户） #

1. 在WordPress页面/文章编辑器中，添加一个「自定义HTML」区块
2. 直接在区块中插入以下代码（替换所有占位符）：

<script src="https://unpkg.com/@crossmint/client-sdk@latest/dist/crossmint.client.sdk.js"></script>

<button style="padding: 10px 20px; background: #4f46e5; color: white; border: none; border-radius: 4px; cursor: pointer;" id="nft-buy-btn">立即购买</button>

<script>
document.getElementById('nft-buy-btn').addEventListener('click', async () => {
    const crossmint = new window.Crossmint();
    try {
        await crossmint.payments.checkout({
            projectId: '你的Crossmint项目ID',
            collectionId: '你的NFT集合地址',
            tokenId: '目标NFT的ID',
            fiatAmount: 30,
            fiatCurrency: 'USD'
        });
    } catch (err) {
        console.log(err);
        alert('购买失败，请检查网络或稍后再试');
    }
});
</script>

3. 点击预览，确认按钮显示正常且能触发结账流程。

注意事项 #

• 先使用Crossmint的测试环境完成支付流程测试，避免正式上线后出问题
• 确保你的NFT已正确授权给Crossmint，允许其处理转移
• 如果遇到权限或调用失败的问题，检查Crossmint控制台的项目配置和API密钥权限

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