> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer Plugin

> Tích hợp chức năng thanh toán Dodo Payments vào các dự án Framer của bạn với plugin mạnh mẽ của chúng tôi. Chấp nhận thanh toán với trải nghiệm thanh toán tùy chỉnh.

## Tổng quan

Plugin Framer Dodo Payments tích hợp liền mạch quy trình thanh toán vào các trang web Framer của bạn. Tạo trải nghiệm thanh toán tùy chỉnh với hỗ trợ cho cả môi trường thử nghiệm và sản xuất.

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Truy cập plugin Dodo Payments chính thức trên Framer marketplace.
</Card>

## Tính năng

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Chọn luồng toàn trang hoặc lớp phủ nội tuyến mang lại cảm giác giống với trang của bạn.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Thêm thành phần, dán khóa của bạn, xuất bản.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Đường dẫn tải xuống bảo mật hoặc khóa giấy phép được gửi ngay khi thanh toán được xác nhận.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Thu nhận cấp ngân hàng trên sáu châu lục, tích hợp các phương thức địa phương.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    Xử lý VAT, GST, thuế bán hàng và hóa đơn cho mỗi đơn hàng.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Bật một công tắc để bán các gói đăng ký cho sản phẩm của bạn.
  </Card>
</CardGroup>

## Hướng Dẫn Cài Đặt

<Steps>
  <Step title="Generate API Key">
    Truy cập [Bảng điều khiển Dodo Payments](https://app.dodopayments.com/developer/api-keys) và tạo khóa API mới.

    <Tabs>
      <Tab title="Live Mode">
        Cho môi trường sản xuất với xử lý thanh toán thực tế.
      </Tab>

      <Tab title="Test Mode">
        Hoàn hảo cho phát triển và thử nghiệm mà không bị tính phí thật.
      </Tab>
    </Tabs>

    <Check>
      Sao chép khóa API một cách an toàn - bạn sẽ cần nó cho bước tiếp theo.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Mở plugin Dodo Payments trong Framer
    2. Đi tới trang Xác thực
    3. Dán khóa API của bạn
    4. Chọn chế độ phù hợp (Test hoặc Live)
    5. Nhấp **Continue** để xác thực

    <Warning>
      Giữ khóa API an toàn và không bao giờ chia sẻ công khai.
    </Warning>
  </Step>

  <Step title="Manage Products">
    Sau khi xác thực, bạn sẽ thấy danh sách sản phẩm của mình:

    * **Sản phẩm hiện có**: Hiển thị tự động
    * **Không có sản phẩm**: Nhấp vào nút **Cộng (+)** bên cạnh 'Sản phẩm'

    <Info>
      Bạn sẽ được chuyển hướng đến Bảng điều khiển Dodo Payments để tạo sản phẩm cùng giá, mô tả và cài đặt.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Chọn một sản phẩm từ danh sách sẵn có của bạn
    2. Nhấp nút `Add Buy Button`
    3. Một nút mua với văn bản `Buy {product_name}` sẽ được thêm vào canvas của bạn

    <Warning>
      Nút **Add Buy Button** sẽ bị vô hiệu nếu bạn không có quyền dự án thích hợp.
    </Warning>
  </Step>
</Steps>

## Tùy Chỉnh

<Steps>
  <Step title="Select Checkout Experience">
    Chọn trải nghiệm thanh toán ưu tiên của bạn:

    * **Overlay (Embedded)**: Trang thanh toán xuất hiện như một lớp phủ trong dự án Framer của bạn, giữ người dùng ở lại trang của bạn.
    * **Hosted**: Người dùng được chuyển hướng đến trang thanh toán do Dodo Payments lưu trữ để có trải nghiệm trơn tru.
  </Step>

  <Step title="Customize Appearance Options">
    Tùy chỉnh trải nghiệm thanh toán với các cài đặt giao diện sau:

    * **Checkout Theme**: Chọn giữa giao diện sáng hoặc tối để phù hợp với thẩm mỹ thương hiệu của bạn.
    * **Button Label**: Tùy chỉnh văn bản (ví dụ: 'Buy Now', 'Purchase', 'Get Started').
    * **Button Styles**: Điều chỉnh màu sắc, phông chữ, kích thước và các thuộc tính kiểu khác.
    * **Return URL**: Đặt một trang Framer để người dùng quay lại sau khi thanh toán.
  </Step>
</Steps>

## Khắc Phục Sự Cố

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Vấn đề**: Plugin không thể xác thực

    **Giải pháp**:

    * Xác minh khóa API của bạn là chính xác
    * Đảm bảo bạn đang sử dụng chế độ đúng (Test/Live)
    * Kiểm tra kết nối internet của bạn
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Vấn đề**: Add Buy Button bị vô hiệu

    **Giải pháp**:

    * Xác minh rằng bạn có quyền phù hợp trong dự án Framer của mình
    * Đảm bảo bạn đã xác thực đúng cách
    * Thử làm mới plugin
  </Accordion>

  <Accordion title="Product Display Issues">
    **Vấn đề**: Sản phẩm không hiển thị

    **Giải pháp**:

    * Đảm bảo bạn đã tạo sản phẩm trong bảng điều khiển Dodo Payments
    * Kiểm tra xem khóa API của bạn có quyền thích hợp không
    * Thử xác thực lại
  </Accordion>
</AccordionGroup>