Display Dappify Direct Payment Example

by gianksp

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dappify Direct Payment Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen bg-white text-gray-900 align-center">
    <!-- Header -->
    <header class="w-full flex items-center justify-between px-6 py-4 border-b border-gray-200">
        <h1 class="text-xl font-semibold">Dappify</h1>
    </header>

    <!-- Hero Section -->
    <main class="flex flex-col items-center justify-center text-center px-6 py-20">
        <h2 class="text-4xl font-semibold mb-4">Dappify Direct Payment Example</h2>
        <p class="text-lg text-gray-600 mb-6">Configure the DirectPayment html widget</p>
    </main>
    <div class="flex justify-center">
      <!-- 2. Add and widget and configure -->
      <div id="direct-payment-demo" data-widget="DirectPayment" data-client-id="e9bae73377d43e42aea12c0d07474163"
        data-chains="43113" data-theme="dark" data-name="Product"
        data-seller-address="0x06bd1006C1ACd8f32ab9599B5608f789Cb22A4F7" data-amount="0.123"
        data-image="https://placehold.co/600x400/1d1d23/7c7a85?text=Your%20Product%20Here&font=roboto">
      </div>
    </div>
    <!-- 1. Paste the library -->
    <script src="https://cdn.jsdelivr.net/npm/@dappify/thirdweb@next/dist/widgets.js"></script>

</body>

</html>