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

Thêm framework ZPDK.framework vào project
Cấu hình cho phép khởi tạo ZaloPay từ app, bằng cách thêm zalo, zalopay 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:

Vào menu File -> New -> New module... -> Import .JAR/.AAR Package
Chọn file zpdk-release.aar, đặt tên cho module mớ
Kiểm tra file build.gradle của module zpdk có dạng như 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

Mở project android bên trong project React Native đang làm việc bằng android studio
Thực hiện các bước tiếp theo tương tự như phần Android ở trên
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

Content-Type: application/json

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

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

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

Mô hình tích hợp

App to App

Ngữ cảnh sử dụng

Luồng xử lý

Luồng xử lý chính

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

Tải về ZPDK

Đối với iOS

Tích hợp ZPDK

Khởi tạo ZPDK

Gọi hàm thanh toán

Đối với Android

Tích hợp ZPDK

Khởi tạo ZPDK

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

Đối với React Native

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

iOS

Android

Gọi hàm thanh toán

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