Tích hợp SDK React Native

Dodo Payments React Native SDK cho phép bạn xây dựng trải nghiệm thanh toán an toàn trong các ứng dụng Android và iOS gốc của bạn. SDK của chúng tôi cung cấp các thành phần và màn hình UI có thể tùy chỉnh để thu thập thông tin thanh toán.

📦 Cài đặt SDK của chúng tôi từ NPM
📚 Xem kho demo của chúng tôi để có ví dụ triển khai hoàn chỉnh
🎥 Xem video demo của chúng tôi để thấy Dodo Payments SDK hoạt động

Tính năng

Simplified Security

Thu thập dữ liệu thanh toán nhạy cảm một cách bảo mật trong khi vẫn tuân thủ PCI

Multiple Payment Methods

Chấp nhận nhiều phương thức thanh toán để mở rộng phạm vi toàn cầu

Native UI

Màn hình và thành phần gốc cho Android và iOS

Hiện tại, Apple Pay, Google Pay, Cash App và UPI chưa được hỗ trợ trong React Native SDK. Chúng tôi đang tích cực làm việc để bổ sung hỗ trợ cho các phương thức thanh toán này trong các bản phát hành tương lai.

Cài đặt

Install the SDK

Cài đặt Dodo Payments SDK bằng trình quản lý gói bạn ưa thích:

npm
yarn

npm install dodopayments-react-native-sdk

yarn add dodopayments-react-native-sdk

Platform-specific setup

iOS
Android

Chạy pod install trong thư mục iOS của bạn:

cd ios && pod install && npm run ios

Chạy lệnh sau:

npm run android

Cài đặt phía khách hàng

Get Publishable Key

Lấy khóa publishable từ bảng điều khiển Dodo Payments. (Riêng biệt cho cả chế độ thử nghiệm và trực tiếp) https://app.dodopayments.com/developer/others

Setup Payment Provider

Bao bọc ứng dụng của bạn bằng DodoPaymentProvider:

App.tsx

import React from 'react';
import { DodoPaymentProvider } from 'dodopayments-react-native-sdk';
import PaymentScreen from './PaymentScreen';

function App() {
  return (
    <DodoPaymentProvider publishableKey="YOUR_PUBLISHABLE_KEY">
      <PaymentScreen />
    </DodoPaymentProvider>
  );
}

export default App;

Bạn cần tạo các khóa API từ bảng điều khiển Dodo Payments. Xem hướng dẫn tạo khóa API để biết hướng dẫn chi tiết.

Create payment utility function

Tạo một hàm tiện ích để lấy tham số thanh toán từ API backend của bạn:

utils/fetchPaymentParams.ts

const API_URL = 'YOUR_BACKEND_URL'; // Replace with your server URL

const fetchPaymentParams = async () => {
  const response = await fetch(`${API_URL}/create-payment`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  
  if (!response.ok) {
    throw new Error('Failed to fetch payment parameters');
  }
  
  return await response.json();
};

export default fetchPaymentParams;

Hàm này giả định bạn có một endpoint API backend tạo payment intent và trả về client secret. Đảm bảo backend của bạn được cấu hình đúng để xử lý việc tạo thanh toán. Xem Hướng dẫn tích hợp API để biết ví dụ thiết lập backend.

Implement the payment screen

Tạo màn hình thanh toán của bạn bằng hook useCheckout. Đây là một triển khai hoàn chỉnh:

PaymentScreen.tsx

import React from 'react';
import { View, Text, useColorScheme } from 'react-native';
import { useCheckout, type sessionParams } from 'dodopayments-react-native-sdk';
import fetchPaymentParams from './utils/fetchPaymentParams';

const PaymentScreen = () => {
  const { initPaymentSession, presentPaymentSheet } = useCheckout();
  const [error, setError] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [showSuccessScreen, setShowSuccessScreen] = React.useState(false);
  const isDarkMode = useColorScheme() === 'dark';

  const processPayment = async () => {
    setLoading(true);
    setMessage('');
    setError('');

    try {
      // 1. Get payment parameters from your backend
      const key = await fetchPaymentParams();
      
      // 2. Initialize payment session
      const paymentSheetParamsResult = await initPaymentSession({
        clientSecret: key.clientSecret,
      });
      
      // 3. Configure and present payment sheet
      const params: sessionParams = {
        ...(paymentSheetParamsResult as sessionParams),
        configuration: {
          appearance: {
            themes: isDarkMode ? 'dark' : 'light',
            primaryButton: {
              colors: {
                light: {
                  background: 'green',
                  componentBorder: 'green',
                  placeholderText: 'yellow',
                },
                dark: {
                  background: 'green',
                  componentBorder: 'green',
                  placeholderText: 'yellow',
                },
              },
              shapes: {
                borderRadius: 30,
                borderWidth: 3,
              },
            },
          },
          mode: 'test', // DEFAULTS TO TEST MODE
        },
      };

      const paymentSheetResponse = await presentPaymentSheet(params);

      // 4. Handle payment result
      switch (paymentSheetResponse?.status) {
        case 'cancelled':
          setError('Payment cancelled by user.');
          break;
        case 'succeeded':
          setMessage('');
          setShowSuccessScreen(true);
          break;
        case 'failed':
          setError('Payment failed : \n' + paymentSheetResponse?.message);
          break;
        default:
          setError(paymentSheetResponse?.message);
          setMessage('');
      }
    } catch (err) {
      setError('Failed to process payment');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View>
      <Button 
        onPress={processPayment}
        disabled={loading}
        title={loading ? 'Processing...' : 'Pay Now'}
      />
      {error && <Text style={{ color: 'red' }}>{error}</Text>}
      {message && <Text style={{ color: 'green' }}>{message}</Text>}
      {showSuccessScreen && (
        <PaymentSuccessScreen
          amount={total}
          onContinue={() => setShowSuccessScreen(false)}
        />
      )}
    </View>
  );
};

export default PaymentScreen;

Để xem ví dụ hoàn chỉnh với phong cách, xử lý lỗi và tùy chọn tùy chỉnh, hãy tham khảo các kho demo của chúng tôi:

Demo tích hợp cơ bản

Tùy chọn cấu hình

Tham số phiên

clientSecret

string

bắt buộc

Client secret từ payment intent của bạn, lấy từ API One time payment hoặc subscription.

mode

string

bắt buộc

Chế độ của phiên thanh toán (thử nghiệm hoặc trực tiếp).

configuration.appearance

object

Các tùy chọn tùy chỉnh cho giao diện payment sheet

configuration.appearance.themes

string

Chế độ giao diện: 'light' hoặc 'dark'

Tùy chỉnh giao diện

Bạn có thể tùy chỉnh React Native Unified Checkout để phù hợp với thiết kế ứng dụng bằng cách chỉnh sửa màu sắc, phông chữ và nhiều thứ khác thông qua tham số appearance khi gọi initPaymentSession().

Tùy chỉnh màu sắc

Mỗi danh mục màu xác định màu của một hoặc nhiều thành phần trong giao diện người dùng. Ví dụ, primary xác định màu của nút Pay.

Danh mục màu	Sử dụng
`primary`	Màu chính cho nút Pay và các mục được chọn
`background`	Màu nền của trang thanh toán
`componentBackground`	Màu nền cho các trường nhập, tab và thành phần khác
`componentBorder`	Màu viền ngoài cho các trường nhập, tab và thành phần khác
`componentDivider`	Màu viền trong (viền chia sẻ) cho các thành phần
`primaryText`	Màu chữ tiêu đề
`secondaryText`	Màu chữ nhãn cho các trường nhập
`componentText`	Màu chữ nhập liệu (ví dụ: số thẻ, mã zip)
`placeholderText`	Màu chữ giữ chỗ cho các trường nhập
`icon`	Màu cho biểu tượng (ví dụ: nút đóng)
`error`	Màu cho thông báo lỗi và hành động hủy bỏ

Ví dụ cấu hình với hỗ trợ chế độ sáng và tối:

const appearance = {
  colors: {
    light: {
      primary: '#F8F8F2',
      background: '#ffffff',
      componentBackground: '#E6DB74',
      componentBorder: '#FD971F',
      componentDivider: '#FD971F',
      primaryText: '#F8F8F2',
      secondaryText: '#75715E',
      componentText: '#AE81FF',
      placeholderText: '#E69F66',
      icon: '#F92672',
      error: '#FF0000',
    },
    dark: {
      primary: '#00ff0099',
      background: '#ff0000',
      componentBackground: '#ff0080',
      componentBorder: '#62ff08',
      componentDivider: '#d6de00',
      primaryText: '#5181fc',
      secondaryText: '#ff7b00',
      componentText: '#00ffff',
      placeholderText: '#00ffff',
      icon: '#f0f0f0',
      error: '#0f0f0f',
    },
  },
};

Tùy chỉnh hình dạng

Bạn có thể tùy chỉnh bán kính viền, độ rộng viền và bóng được sử dụng trong toàn bộ giao diện thanh toán:

const appearance = {
  shapes: {
    borderRadius: 10, // Border radius for input fields, tabs, and components
    borderWidth: 1,   // Border width for components
  },
};

Tùy chỉnh cụ thể cho thành phần

Bạn có thể tùy chỉnh các thành phần UI cụ thể như nút chính (nút Thanh toán). Các cài đặt này có ưu tiên hơn các cài đặt giao diện toàn cầu:

const appearance = {
  primaryButton: {
    colors: {
      background: '#000000',
      text: '#ffffff',
      border: '#ff00ff',
    },
    shapes: {
      borderRadius: 10,
      borderWidth: 1.5,
    },
  },
};

Để áp dụng các tùy chỉnh này, hãy bao gồm chúng trong cấu hình phiên thanh toán của bạn:

const params: sessionParams = {
  ...paymentSheetParams,
  configuration: {
    appearance: {
      themes: isDarkMode ? 'dark' : 'light',
      ...appearance, // Include your custom appearance settings
    },
  },
};

Xử lý lỗi

Xử lý các trạng thái thanh toán khác nhau trong hàm thanh toán của bạn:

const handlePaymentResult = (paymentSheetResponse) => {
  switch (paymentSheetResponse?.status) {
    case 'cancelled':
      // User cancelled the payment
      console.log('Payment cancelled by user');
      break;
    case 'succeeded':
      // Payment completed successfully
      console.log('Payment succeeded');
      // Navigate to success screen or update UI
      break;
    case 'failed':
      // Payment failed
      console.log('Payment failed:', paymentSheetResponse?.message);
      // Show error message to user
      break;
    default:
      console.log('Unknown payment status:', paymentSheetResponse?.status);
  }
};

Common Error Scenarios

Sự cố kết nối mạng: Đảm bảo kết nối internet ổn định
Client secret không hợp lệ: Xác minh backend đang tạo payment intent hợp lệ
Thiếu các phụ thuộc đồng cấp: Cài đặt tất cả phụ thuộc cần thiết
Cấu hình riêng theo nền tảng: Hoàn thành các bước cài đặt iOS và Android
Lỗi API: Kiểm tra Tham chiếu mã lỗi để xử lý lỗi chi tiết

Debugging Tips

Bật ghi nhật ký gỡ lỗi trong quá trình phát triển
Kiểm tra các yêu cầu mạng đến backend của bạn
Xác minh khóa API được cấu hình đúng cách
Kiểm tra trên cả nền tảng iOS và Android
Xem lại Câu hỏi thường gặp về kỹ thuật để biết các vấn đề thường gặp
Sử dụng Chế độ thử nghiệm và Chế độ trực tiếp một cách phù hợp

Phương thức thanh toán thử nghiệm

Sử dụng số thẻ thử nghiệm trong quá trình phát triển để xác minh tích hợp mà không xử lý thanh toán thật. Tìm hiểu thêm về quy trình kiểm thử và các môi trường thử nghiệm hiện có.

Documentation Index

​Tích hợp SDK React Native

​Tính năng

Simplified Security

Multiple Payment Methods

Native UI

​Cài đặt

​Cài đặt phía khách hàng

​Tùy chọn cấu hình

​Tham số phiên

​Tùy chỉnh giao diện

​Tùy chỉnh màu sắc

​Tùy chỉnh hình dạng

​Tùy chỉnh cụ thể cho thành phần

​Xử lý lỗi

​Phương thức thanh toán thử nghiệm

Tích hợp SDK React Native

Tính năng

Cài đặt

Cài đặt phía khách hàng

Tùy chọn cấu hình

Tham số phiên

Tùy chỉnh giao diện

Tùy chỉnh màu sắc

Tùy chỉnh hình dạng

Tùy chỉnh cụ thể cho thành phần

Xử lý lỗi

Phương thức thanh toán thử nghiệm