startCashier

Note

Please contact Zalopay Team to be granted permission to use this functionality.

Description

Open Cashier checkout page to make payment for orders.
Support both single and multi orders on

zpa

(Zalopay App) and

zpi

(Zalopay in Zalo App).

Parameters

Param	Data type	Required	Description
orders	Array<Order>	Yes	List orders to checkout.
options	Map<string, string>	No	Optional data to customize, adjust Cashier's features and operations.
callback	(data: CallbackData) => ()	No	Callback function during payment (ex: cancel payment/result appeared/result closed...).

Order

type Order = {
  order_type: 1;
  order: {
      app_id: number;
      zp_trans_token: string;
  };
}

Options

Key	Value	Description	Availability
"cashier.auto_checkout_vietqr"	"true"/"false"	Automatically opens the VietQR screen, if VietQR money source is available.	ZPI ZPA
"rp.redirect_data.type"	string - 0: default value, close Zalopay webview on ZPI/ back to home on ZPA - 1: only close result page - 2: close result page & redirect on ZPI/launch deeplink on ZPA to url (must have rp.redirect_data.url)	Redirect behavior when click "Đóng" at Result page	ZPI ZPA
"rp.redirect_data.url"	string	Redirect url when click "Đóng" at Result page (when rp.redirect_data.type: 2)	ZPI ZPA
"rp.bottom_action.label"	string	Title secondary button show at bottom Result Page.	ZPI
"rp.bottom_action.url"	string	Redirect url when click secondary button at bottom Result Page.	ZPI

Callback

type CallbackData = {
    payment_event: string;
    data: EventData;
};

type EventData = EventAppearedClosed | EventCancel | EventComplete;

//callback data of event: 'RESULT_APPEARED', 'RESULT_CLOSED'
type EventAppearedClosed = {
  payment_event: 'RESULT_APPEARED'/'RESULT_CLOSED';
  data: {
      orders: OrderCallback[];
  }
};

//callback data of event: 'PAYMENT_CANCEL'
type EventCancel = {
  payment_event: 'PAYMENT_CANCEL';
  data: {
      reason: string;
   }
};

//callback data of event: 'PAYMENT_COMPLETED'
type EventComplete = {
  payment_event: 'PAYMENT_COMPLETED';
  data: {
        previous_event: PaymentEvent;
        data: { // data of previous event
          orders: OrderCallback[];
        };
     };
};

type OrderCallback = {
  app_id: string | number;
  app_trans_id: string;
  zp_trans_id: string;
  status: number;  //Failed = 0, Success = 1, Processing = 2,
}

Sample Code

window.zlpSdk.Payment.startCashier({
      orders: [{
        order_type: 1,
        order: {
          app_id: 61,
          zp_trans_token: 'ACUntME9BYhsTZZvdop5Il6w',
        }
      },
      {
        order_type: 1,
        order: {
          app_id: 2390,
          zp_trans_token: 'ACLS6M-vR4w6dqTnGDrmTWSw',
        }
      }],
      options: {
        'rp.bottom_action.label': 'Nạp thêm',
        'rp.bottom_action.url': '/topup',

        'rp.redirect_data.type': '2',
        'rp.redirect_data.url': '/telco-data'
      },
      callback: (data) => {
         // handle callback here
         console.log('callback data', data)
      }
  })