NAV

Mô hình tích hợp

Chọn mô hình tích hợp ZaloPay phù hợp

App to App

Giới thiệu Demo API

Ngữ cảnh sử dụng

Khi người dùng sử dụng merchant apps để thanh toán một đơn hàng sử dụng phương thức thanh toán là ZaloPay trên điện thoại của người sử dụng có cài đặt đồng thời merchant app và ZaloPay App. Merchant App có thể gửi thông tin đơn hàng trực tiếp tới ZaloPay App thông qua đường App-to-App. Sau khi người dùng thực hiện thanh toán xong, ZaloPay App sẽ gọi lại merchant apps để thông báo kết quả giao dịch.

Luồng xử lý

Luồng xử lý chính

App to App Payment Flow

Trường hợp không có cài đặt ZaloPay

App to App Payment Flow Without ZaloPay

Tải về ZPDK

Đối với iOS

Tích hợp ZPDK

ZPDK được phân phối dưới dạng thư viện, để sử dụng các API của ZPDK, cần tích hợp vào project theo các bước sau

  1. Thêm framework ZPDK.framework vào project
  2. Cấu hình cho phép khởi tạo ZaloPay từ app, bằng cách thêm  zalozalopay và zalopay.api.v2 vào key  LSApplicationQueriesScheme
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>zp-redirect-3</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>zp-redirect-3</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>zalopay</string>
    <string>zalopay.api.v2</string>
</array>

Khởi tạo ZPDK

Trong AppDelegate.m, thêm lời gọi tới ZPDK để xử lý việc trao đổi dữ liệu giữa ZaloPay và app

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[ZaloPaySDK sharedInstance] initWithAppId:<appid>]; // Khởi tạo ZPDK
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
          annotation:(id)annotation {
  // gọi tới ZPDK để xử lý trao đổi dữ liệu giữa ZaloPay với app
  return [[ZaloPaySDK sharedInstance] application:application
                                      openURL:url
                            sourceApplication:sourceApplication
                                    annotation:annotation];
}

Lưu ý: Gọi hàm này vì ZPDK hiện đang check sourceApplication có đúng là của ZaloPay hay không.

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
          annotation:(id)annotation

Gọi hàm thanh toán

Gọi hàm để bắt đầu thanh toán

[ZaloPaySDK sharedInstance].delegate = self;
[[ZaloPaySDK sharedInstance] payOrder:zptranstoken];

Xử lý kết quả trả về

- (void)zalopayCompleteWithErrorCode:(ZPErrorCode)errorCode
                        transactionId:(NSString *)transactionId zpTranstoken:(NSString*)zptranstoken {
    NSLog(@"pay bill complete code = %ld transid = %@ zpTranstoken =%@",
              (long)errorCode, transactionId, zptranstoken);
}

Đối với Android

Tích hợp ZPDK

Để tích hợp ZaloPay ZPDK vào Android Studio bạn thực hiện các bước sau:

configurations.maybeCreate("default")
artifacts.add("default", file('zpdk-v1.0.114.aar'))

Khởi tạo ZPDK

Thêm lời khởi tạo ZPDK trong hàm onCreate của Application

@Override
public void onCreate() {
  super.onCreate();
  // Khởi tạo ZPDK
  ZaloPaySDK.getInstance().initWithAppId(3);
}

Gọi hàm thanh toán từ ZPDK và nhận callback

// Trước khi gọi thanh toán, cần forward lời gọi onActivityResult tới ZPDK
@Override
public void onActivityResult(Activity activity, int requestCode,
                              int resultCode, Intent data) {
    ZaloPaySDK.getInstance().onActivityResult(requestCode, resultCode, data);
}

// Gọi hàm thanh toán
ZaloPaySDK.getInstance().payOrder(
              getActivity(), zpTranstoken, new MyZaloPayListener()
);

// Implement interface PayOrderListener để nhận kết quả thanh toán 
private static class MyZaloPayListener implements ZaloPayListener {
  @Override
  public void onPaymentSucceeded(String transactionId, String zpTranstoken) {
    Log.d(TAG, "onSuccess: On successful with transactionId: " + transactionId + "- zpTransToken: " + zpTranstoken);
  }
  @Override
  public void onPaymentError(ZaloPayErrorCode errorCode, int paymentErrorCode, String zpTranstoken) {
    Log.d(TAG, String.format("onPaymentError: payment error with [error: %s,
                paymentError: %d], zptranstoken: %s", errorCode, paymentErrorCode, zpTranstoken));
  }
}

Ngoài ra cần đăng ký thêm broadcast để nhận callback của ZaloPay

Thêm định nghĩa receiver trong AndroidManifest:

<receiver
  android:name="vn.zalopay.sdk.MerchantReceiver"
  android:exported="true">
  <intent-filter>
    <action android:name="vn.zalopay.sdk.ZP_ACTION" />
    <category android:name="zlp" />
  </intent-filter>
</receiver>

Xử lý đăng ký và hủy receiver sau khi kết thúc tác vụ thanh toán:

MerchantReceiver reciver;
ItentFilter intentFilter;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_scan);
  receiver = new MerchantReceiver();
  intentFilter = new IntentFilter("vn.zalopay.sdk.ZP_ACTION");
}

@Override
protected void onResume() {
  super.onResume();
  registerReceiver(receiver, intentFilter);
}

@Override
protected void onDestroy() {
  super.onDestroy();
  unregisterReceiver(receiver);
}

Đối với React Native

Tích hợp và khởi tạo ZPDK

iOS

Android

  1. Mở project android bên trong project React Native đang làm việc bằng android studio
  2. Thực hiện các bước tiếp theo tương tự như phần Android ở trên
  3. Trong hàm getPackages(), thêm new PayZaloBridge() bên trong hàm Array.asList(...) như sau:
@Override
protected List<ReactPackage> getPackages() {
  return Array.asList(
    ...,
    new PayZaloBridge()
  );
}

Gọi hàm thanh toán

import {NativeModules, NativeEventEmitter} from 'react-native';
const { PayZaloBridge } = NativeModules;
const payZaloBridgeEmitter = new NativeEventEmitter(PayZaloBridge);

componentDidMount() {
  this.subscription = payZaloBridgeEmitter.addListener(
    'EventPayZalo',
    (data) => {
      if(data.returnCode == 1){
        alert('Giao dịch thành công!');
      } else{
        alert('Giao dịch thất bại!');
      }
    }
  );
}

componentWillUnmount() {
  this.subscription.remove();
}

let payZP = NativeModules.PayZaloBridge;
payZP.payOrder(zptranstoken);

Dữ liệu trả về của ZPDK

Tham số Kiểu dữ liệu Ý nghĩa
errorCode int

Kết quả giao dịch.

1: giao dịch thành công

#1: giao dịch thất bại, gọi thêm Api server để biết thêm thông tin

transactionId String Transaction ID của giao dịch nếu giao dịch thành công
zpTranstoken String ZPTranstoken từ ZPDK gửi qua app ZaloPay để phân biệt đơn hàng
Không tìm thấy kết quả phù hợp