Thanh toán Inline

Tổng Quan

Thanh toán inline cho phép bạn tạo ra những trải nghiệm thanh toán hoàn toàn tích hợp, hòa quyện một cách liền mạch với trang web hoặc ứng dụng của bạn. Khác với thanh toán overlay, mở dưới dạng modal trên trang của bạn, thanh toán inline nhúng biểu mẫu thanh toán trực tiếp vào bố cục trang của bạn. Sử dụng thanh toán inline, bạn có thể:

Tạo ra những trải nghiệm thanh toán hoàn toàn tích hợp với ứng dụng hoặc trang web của bạn
Để Dodo Payments an toàn thu thập thông tin khách hàng và thông tin thanh toán trong một khung thanh toán tối ưu
Hiển thị các mặt hàng, tổng số và thông tin khác từ Dodo Payments trên trang của bạn
Sử dụng các phương thức và sự kiện SDK để xây dựng những trải nghiệm thanh toán nâng cao

Cách Hoạt Động

Thanh toán inline hoạt động bằng cách nhúng một khung Dodo Payments an toàn vào trang web hoặc ứng dụng của bạn. Khung thanh toán xử lý việc thu thập thông tin khách hàng và ghi lại chi tiết thanh toán. Trang của bạn hiển thị danh sách mặt hàng, tổng số và tùy chọn để thay đổi những gì có trên thanh toán. SDK cho phép trang của bạn và khung thanh toán tương tác với nhau. Dodo Payments tự động tạo một đăng ký khi một thanh toán hoàn tất, sẵn sàng để bạn cung cấp.

Khung thanh toán inline xử lý an toàn tất cả thông tin thanh toán nhạy cảm, đảm bảo tuân thủ PCI mà không cần chứng nhận bổ sung từ phía bạn.

Điều Gì Tạo Nên Một Thanh Toán Inline Tốt?

Điều quan trọng là khách hàng biết họ đang mua từ ai, họ đang mua gì và họ phải trả bao nhiêu. Để xây dựng một thanh toán inline tuân thủ và tối ưu hóa cho chuyển đổi, việc triển khai của bạn phải bao gồm:

Ví dụ thanh toán inline với các yếu tố cần thiết được gán nhãn

Ví dụ về bố cục thanh toán inline hiển thị các yếu tố cần thiết

Thông tin định kỳ: Nếu là định kỳ, tần suất và tổng số phải trả khi gia hạn. Nếu là dùng thử, thời gian dùng thử kéo dài bao lâu.
Mô tả mặt hàng: Một mô tả về những gì đang được mua.
Tổng giao dịch: Tổng giao dịch, bao gồm tổng phụ, thuế tổng và tổng cộng. Đảm bảo bao gồm cả loại tiền tệ.
Chân trang Dodo Payments: Toàn bộ khung thanh toán inline, bao gồm chân trang thanh toán có thông tin về Dodo Payments, điều khoản bán hàng của chúng tôi và chính sách bảo mật của chúng tôi.
Chính sách hoàn tiền: Một liên kết đến chính sách hoàn tiền của bạn, nếu nó khác với chính sách hoàn tiền tiêu chuẩn của Dodo Payments.

Luôn hiển thị toàn bộ khung thanh toán inline, bao gồm chân trang. Việc loại bỏ hoặc ẩn thông tin pháp lý vi phạm yêu cầu tuân thủ.

Hành Trình Khách Hàng

Luồng thanh toán được xác định bởi cấu hình phiên thanh toán của bạn. Tùy thuộc vào cách bạn cấu hình phiên thanh toán, khách hàng sẽ trải nghiệm một thanh toán có thể trình bày tất cả thông tin trên một trang duy nhất hoặc qua nhiều bước.

Khách hàng mở thanh toán

Bạn có thể mở thanh toán inline bằng cách truyền các mặt hàng hoặc một giao dịch hiện có. Sử dụng SDK để hiển thị và cập nhật thông tin trên trang, và các phương thức SDK để cập nhật các mặt hàng dựa trên tương tác của khách hàng.

Trang thanh toán ban đầu với danh sách mặt hàng và biểu mẫu thanh toán

Khách hàng nhập thông tin của họ

Thanh toán inline trước tiên yêu cầu khách hàng nhập địa chỉ email của họ, chọn quốc gia của họ và (nếu cần) nhập mã ZIP hoặc mã bưu chính của họ. Bước này thu thập tất cả thông tin cần thiết để xác định thuế và các tùy chọn thanh toán có sẵn.Bạn có thể tự động điền thông tin khách hàng và trình bày các địa chỉ đã lưu để đơn giản hóa trải nghiệm.

Khách hàng chọn phương thức thanh toán

Sau khi nhập thông tin của họ, khách hàng sẽ được trình bày các phương thức thanh toán có sẵn và biểu mẫu thanh toán. Các tùy chọn có thể bao gồm thẻ tín dụng hoặc thẻ ghi nợ, PayPal, Apple Pay, Google Pay và các phương thức thanh toán địa phương khác dựa trên vị trí của họ.Hiển thị các phương thức thanh toán đã lưu nếu có để tăng tốc độ thanh toán.

Các phương thức thanh toán có sẵn và biểu mẫu chi tiết thẻ

Thanh toán hoàn tất

Dodo Payments định tuyến mọi thanh toán đến nhà cung cấp tốt nhất cho giao dịch đó để có cơ hội thành công tốt nhất. Khách hàng sẽ vào một quy trình thành công mà bạn có thể xây dựng.

Màn hình thành công với dấu kiểm xác nhận

Dodo Payments tạo đăng ký

Dodo Payments tự động tạo một đăng ký cho khách hàng, sẵn sàng để bạn cung cấp. Phương thức thanh toán mà khách hàng đã sử dụng sẽ được lưu giữ để gia hạn hoặc thay đổi đăng ký.

Đăng ký đã được tạo với thông báo webhook

Bắt đầu nhanh

Bắt đầu với Dodo Payments Inline Checkout chỉ với vài dòng mã:

import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK for inline mode
DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout in a specific container
DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout" // ID of the container element
});

Đảm bảo bạn có một phần tử chứa với id tương ứng trên trang của bạn: <div id="dodo-inline-checkout"></div>.

Hướng dẫn tích hợp từng bước

Cài đặt SDK

Cài đặt Dodo Payments Checkout SDK:

npm install dodopayments-checkout

Khởi tạo SDK cho Hiển thị Inline

Khởi tạo SDK và chỉ định displayType: 'inline'. Bạn cũng nên lắng nghe sự kiện checkout.breakdown để cập nhật UI của bạn với các tính toán thuế và tổng thời gian thực.

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Tạo một phần tử chứa

Thêm một phần tử vào HTML của bạn nơi khung thanh toán sẽ được chèn vào:

<div id="dodo-inline-checkout"></div>

Mở thanh toán

Gọi DodoPayments.Checkout.open() với checkoutUrl và elementId của phần tử chứa của bạn:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Kiểm tra tích hợp của bạn

Khởi động máy chủ phát triển của bạn:

npm run dev

Kiểm tra quy trình thanh toán:
- Nhập email và địa chỉ của bạn trong khung inline.
- Xác minh rằng tóm tắt đơn hàng tùy chỉnh của bạn cập nhật theo thời gian thực.
- Kiểm tra quy trình thanh toán bằng cách sử dụng thông tin xác thực thử nghiệm.
- Xác nhận rằng các chuyển hướng hoạt động chính xác.

Bạn nên thấy các sự kiện checkout.breakdown được ghi lại trong bảng điều khiển trình duyệt của bạn nếu bạn đã thêm một bản ghi console trong callback onEvent.

Đi vào sản xuất

Khi bạn đã sẵn sàng cho sản xuất:

Thay đổi chế độ thành 'live':

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

Cập nhật các URL thanh toán của bạn để sử dụng các phiên thanh toán trực tiếp từ backend của bạn.
Kiểm tra quy trình hoàn chỉnh trong sản xuất.

Ví dụ hoàn chỉnh về React

Ví dụ này minh họa cách thực hiện một tóm tắt đơn hàng tùy chỉnh cùng với thanh toán inline, giữ cho chúng đồng bộ bằng cách sử dụng sự kiện checkout.breakdown.

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Tài liệu API

Cấu hình

Tùy chọn khởi tạo

interface InitializeOptions {
  mode: "test" | "live";
  displayType: "inline"; // Required for inline checkout
  onEvent: (event: CheckoutEvent) => void;
}

Tùy chọn	Loại	Bắt buộc	Mô tả
`mode`	`"test" \| "live"`	Có	Chế độ môi trường.
`displayType`	`"inline" \| "overlay"`	Có	Phải được đặt thành `"inline"` để nhúng thanh toán.
`onEvent`	`function`	Có	Hàm callback để xử lý các sự kiện thanh toán.

Tùy chọn thanh toán

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
}

Tùy chọn	Loại	Bắt buộc	Mô tả
`checkoutUrl`	`string`	Có	URL phiên thanh toán.
`elementId`	`string`	Có	`id` của phần tử DOM nơi thanh toán nên được hiển thị.

Phương thức

Mở thanh toán

Mở khung thanh toán trong phần tử được chỉ định.

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Đóng thanh toán

Loại bỏ khung thanh toán theo cách lập trình và dọn dẹp các trình lắng nghe sự kiện.

DodoPayments.Checkout.close();

Kiểm tra trạng thái

Trả về liệu khung thanh toán hiện đang được chèn hay không.

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

Sự kiện

SDK cung cấp các sự kiện thời gian thực thông qua hàm callback onEvent. Đối với thanh toán inline, checkout.breakdown đặc biệt hữu ích để đồng bộ hóa UI của bạn.

Loại sự kiện	Mô tả
`checkout.opened`	Khung thanh toán đã được tải.
`checkout.breakdown`	Bị kích hoạt khi giá, thuế hoặc giảm giá được cập nhật.
`checkout.customer_details_submitted`	Chi tiết khách hàng đã được gửi.
`checkout.redirect`	Thanh toán sẽ thực hiện một chuyển hướng (ví dụ: đến trang ngân hàng).
`checkout.error`	Đã xảy ra lỗi trong quá trình thanh toán.

Dữ liệu phân tích thanh toán

Sự kiện checkout.breakdown cung cấp các dữ liệu sau:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;         // Amount in cents
  tax?: number;              // Amount in cents
  total?: number;            // Amount in cents
  currency?: string;         // e.g., "USD"
  finalTotal?: number;       // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

Hiểu sự kiện phân tích

Sự kiện checkout.breakdown là cách chính để giữ cho UI của ứng dụng bạn đồng bộ với trạng thái thanh toán Dodo Payments. Khi nó được kích hoạt:

Khi khởi tạo: Ngay sau khi khung thanh toán được tải và sẵn sàng.
Khi thay đổi địa chỉ: Bất cứ khi nào khách hàng chọn một quốc gia hoặc nhập mã bưu chính dẫn đến việc tính toán thuế lại.

Chi tiết trường:

Trường	Mô tả
`subTotal`	Tổng số của tất cả các mặt hàng trong phiên trước khi bất kỳ giảm giá hoặc thuế nào được áp dụng.
`discount`	Tổng giá trị của tất cả các giảm giá đã áp dụng.
`tax`	Số thuế đã tính. Trong chế độ `inline`, điều này cập nhật động khi người dùng tương tác với các trường địa chỉ.
`total`	Kết quả toán học của `subTotal - discount + tax` trong đơn vị tiền tệ cơ bản của phiên.
`currency`	Mã tiền tệ ISO (ví dụ: `"USD"`) cho các giá trị tổng phụ, giảm giá và thuế tiêu chuẩn.
`finalTotal`	Số tiền thực tế mà khách hàng phải trả. Điều này có thể bao gồm các điều chỉnh tỷ giá hối đoái bổ sung hoặc phí phương thức thanh toán địa phương không nằm trong phân tích giá cơ bản.
`finalTotalCurrency`	Tiền tệ mà khách hàng thực sự đang thanh toán. Điều này có thể khác với `currency` nếu sức mua tương đương hoặc chuyển đổi tiền tệ địa phương đang hoạt động.

Mẹo tích hợp chính:

Định dạng tiền tệ: Giá luôn được trả về dưới dạng số nguyên trong đơn vị tiền tệ nhỏ nhất (ví dụ: xu cho USD, yên cho JPY). Để hiển thị chúng, chia cho 100 (hoặc lũy thừa thích hợp của 10) hoặc sử dụng thư viện định dạng như Intl.NumberFormat.
Xử lý trạng thái ban đầu: Khi thanh toán lần đầu được tải, tax và discount có thể là 0 hoặc null cho đến khi người dùng cung cấp thông tin thanh toán của họ hoặc áp dụng mã. UI của bạn nên xử lý các trạng thái này một cách hợp lý (ví dụ: hiển thị một dấu gạch ngang — hoặc ẩn hàng).
“Tổng cuối cùng” so với “Tổng”: Trong khi total cung cấp cho bạn tính toán giá tiêu chuẩn, finalTotal là nguồn thông tin chính xác cho giao dịch. Nếu finalTotal có mặt, nó phản ánh chính xác những gì sẽ được tính phí vào thẻ của khách hàng, bao gồm bất kỳ điều chỉnh động nào.
Phản hồi thời gian thực: Sử dụng trường tax để cho người dùng thấy rằng thuế đang được tính toán theo thời gian thực. Điều này cung cấp cảm giác “trực tiếp” cho trang thanh toán của bạn và giảm ma sát trong bước nhập địa chỉ.

Tùy chọn triển khai

Cài đặt qua Trình quản lý gói

Cài đặt qua npm, yarn hoặc pnpm như được hiển thị trong Hướng dẫn tích hợp từng bước.

Triển khai CDN

Để tích hợp nhanh mà không cần bước xây dựng, bạn có thể sử dụng CDN của chúng tôi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Inline Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test",
            displayType: "inline",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <div id="dodo-inline-checkout"></div>

    <script>
        // Open the checkout
        DodoPaymentsCheckout.DodoPayments.Checkout.open({
            checkoutUrl: "https://test.dodopayments.com/session/cks_123",
            elementId: "dodo-inline-checkout"
        });
    </script>
</body>
</html>

Hỗ trợ TypeScript

SDK được viết bằng TypeScript và bao gồm các định nghĩa kiểu toàn diện.

import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    // event is fully typed
    console.log(event.event_type, event.data);
  },
});

Xử lý lỗi

SDK cung cấp thông tin lỗi chi tiết thông qua hệ thống sự kiện. Luôn thực hiện xử lý lỗi đúng cách trong callback onEvent của bạn:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
    }
  }
});

Luôn xử lý sự kiện checkout.error để cung cấp trải nghiệm người dùng tốt khi xảy ra sự cố.

Các thực tiễn tốt nhất

Thiết kế đáp ứng: Đảm bảo phần tử chứa của bạn có đủ chiều rộng và chiều cao. Khung iframe sẽ thường mở rộng để lấp đầy phần tử chứa của nó.
Đồng bộ hóa: Sử dụng sự kiện checkout.breakdown để giữ cho tóm tắt đơn hàng tùy chỉnh hoặc bảng giá của bạn đồng bộ với những gì người dùng thấy trong khung thanh toán.
Trạng thái khung: Hiển thị một chỉ báo tải trong phần tử chứa của bạn cho đến khi sự kiện checkout.opened được kích hoạt.
Dọn dẹp: Gọi DodoPayments.Checkout.close() khi thành phần của bạn bị gỡ bỏ để dọn dẹp iframe và các trình lắng nghe sự kiện.

Khắc phục sự cố

Khung thanh toán không xuất hiện

Xác minh rằng elementId khớp với id của một div thực sự tồn tại trong DOM.
Đảm bảo rằng displayType: 'inline' đã được truyền cho Initialize.
Kiểm tra rằng checkoutUrl là hợp lệ.

Thuế không cập nhật trong UI của tôi

Đảm bảo bạn đang lắng nghe sự kiện checkout.breakdown.
Thuế chỉ được tính toán sau khi người dùng nhập một quốc gia và mã bưu chính hợp lệ trong khung thanh toán.

Hỗ trợ trình duyệt

Dodo Payments Checkout SDK hỗ trợ các trình duyệt sau:

Chrome (mới nhất)
Firefox (mới nhất)
Safari (mới nhất)
Edge (mới nhất)
IE11+

Apple Pay hiện không được hỗ trợ trong trải nghiệm thanh toán inline. Chúng tôi dự định thêm hỗ trợ cho Apple Pay trong một bản phát hành trong tương lai.