Skip to main content

Documentation Index

Fetch the complete documentation index at: https://daehan-base.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

이 퀵스타트는 HTML과 JavaScript만 사용하여 Base Account SDK로 Base 로그인과 Base Pay를 웹 페이지에 추가하는 최소한의 코드를 보여줍니다. 프레임워크나 추가 라이브러리는 필요하지 않습니다.
인터랙티브 플레이그라운드: SDK 함수를 연동 전에 테스트해보고 싶으신가요? Base Pay SDK Playground에서 pay()와 getPaymentStatus() 함수를 직접 실험해보세요.
영상 콘텐츠를 선호하시나요?이 페이지 마지막 섹션에서 구현 내용을 자세히 다루는 영상 가이드를 확인하세요.

​
1. SDK 설치 (선택 사항)

Base Account SDK는 두 가지 방법으로 사용할 수 있습니다:

​
옵션 A: CDN (설치 불필요)

HTML에 스크립트 태그만 추가하면 됩니다. 빌드 도구가 필요 없습니다!
index.html
[...rest of your code]
<script src="https://unpkg.com/@base-org/account/dist/base-account.min.js"></script>
[...rest of your code]
전체 예시는 아래 예시를 참고하세요.

​
옵션 B: NPM 패키지

로컬 설치를 원하시는 경우: 
npm install @base-org/account
그런 다음 ES 모듈을 사용하세요:
index.html
<script type="module">
  import {
    createBaseAccountSDK,
    pay,
    getPaymentStatus,
  } from "@base-org/account";
  // ... rest of your code
</script>
이 가이드에서는 간단함을 위해 CDN 방식을 사용합니다.

​
2. 이 HTML 파일을 복사해서 붙여넣기

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Base Account Quick-start</title>
  </head>
  <body>
    <h1>Base Account Demo</h1>

    <button id="signin">Sign in with Base</button>
    <button id="pay">Pay with Base</button>

    <div id="status"></div>

    <!-- Load Base Account SDK via CDN -->
    <script src="https://unpkg.com/@base-org/account/dist/base-account.min.js"></script>

    <script>
      // Initialize Base Account SDK with app configuration
      const provider = window
        .createBaseAccountSDK({
          appName: "Base Account Quick-start",
          appLogoUrl: "https://base.org/logo.png",
        })
        .getProvider();
      const statusDiv = document.getElementById("status");
      let userAddress = null;

      function showStatus(message, type = "success") {
        statusDiv.innerHTML = message;
      }

      // Generate a fresh nonce for authentication
      function generateNonce() {
        return window.crypto.randomUUID().replace(/-/g, "");
      }

      // Sign in with Base using wallet_connect method
      document.getElementById("signin").onclick = async () => {
        try {
          showStatus("Connecting to Base Account...", "success");

          // Generate a fresh nonce
          const nonce = generateNonce();

          // Connect and authenticate using the new wallet_connect method
          const { accounts } = await provider.request({
            method: "wallet_connect",
            params: [
              {
                version: "1",
                capabilities: {
                  signInWithEthereum: {
                    nonce,
                    chainId: "0x2105", // Base Mainnet - 8453
                  },
                },
              },
            ],
          });

          const { address } = accounts[0];
          const { message, signature } =
            accounts[0].capabilities.signInWithEthereum;

          userAddress = address;

          showStatus(
            `✅ Successfully signed in! Address: ${address.slice(
              0,
              6
            )}...${address.slice(-4)}`
          );

          // In a real app, you would send the message and signature to your backend for verification
          console.log("Authentication data:", { address, message, signature });
        } catch (error) {
          console.error("Sign-in error:", error);
          showStatus(`❌ Sign-in failed: ${error.message}`, "error");
        }
      };

      // One-tap USDC payment using window.base API (works with or without sign-in)
      document.getElementById("pay").onclick = async () => {
        try {
          showStatus("Processing payment...", "success");

          const result = await window.base.pay({
            amount: "5.00", // USD – SDK quotes equivalent USDC
            to: "0x2211d1D0020DAEA8039E46Cf1367962070d77DA9",
            testnet: true, // set to false or omit for Mainnet
          });

          const status = await window.base.getPaymentStatus({
            id: result.id,
            testnet: true,
          });

          showStatus(`🎉 Payment completed! Status: ${status.status}`);
        } catch (error) {
          showStatus(`❌ Payment failed: ${error.message}`, "error");
        }
      };
    </script>
  </body>
</html>

​
3. 파일 서빙

모든 정적 서버에서 동작합니다: 
npx serve .
# or
python -m http.server
http://localhost:3000을 열고, Sign in with Base (선택 사항)를 클릭한 후 Pay with Base를 클릭하고 트랜잭션을 승인하면 Base Sepolia에서 5 USDC를 전송 완료! 🎉

​
다음 단계

브랜드 가이드라인을 준수해 주세요SignInWithBaseButton 또는 BasePayButton을 사용하려면 애플리케이션 전반의 일관성을 위해 Base 브랜드 가이드라인을 준수해 주세요.

​
영상 가이드