Web (HTML + JS)

이 퀵스타트는 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

pnpm add @base-org/account

yarn add @base-org/account

bun add @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를 전송 완료! 🎉

다음 단계

사용자 인증 가이드 – 백엔드 검증을 포함한 전체 SIWE 인증 구현
결제 수락 가이드 – 결제 흐름에서 사용자 정보 수집

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

소개

퀵스타트

가이드

프레임워크 통합

UX 개선

레퍼런스

기타

베이스네임

기여하기

1. SDK 설치 (선택 사항)

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

옵션 B: NPM 패키지

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

3. 파일 서빙

다음 단계

영상 가이드

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

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

​옵션 B: NPM 패키지

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

​3. 파일 서빙

​다음 단계

​영상 가이드

1. SDK 설치 (선택 사항)

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

옵션 B: NPM 패키지

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

3. 파일 서빙

다음 단계

영상 가이드