ZaloPay

Example

html

<div id="checkoutZaloPayField"></div>

javascript

import { Zalopay } from '@paykka/card-checkout-ui'

const checkoutZaloPay = paykkaCheckout.create(Zalopay, {
  onSubmit: formValidateError => {
    console.log('ZaloPay payment submitted:', formValidateError)
  },
  onSuccess: data => {
    console.log('ZaloPay payment successful:', data)
  },
  onError: error => {
    console.log('ZaloPay payment failed:', error)
  }
})

checkoutZaloPay.mount('#checkoutZaloPayField')

Attributes

ZalopayProps

Passed when calling the create method to create ZaloPay.

Name	Description	Type	Default
showEmail	Whether to display email. If set to `true` and email is already passed when creating the checkout, it will be displayed as disabled. If set to `false` and email is not passed when creating the checkout, it will be displayed normally.	`boolean`	`false`
showAddress	Whether to display address. If set to `true` and address is already passed when creating the checkout, it will be displayed normally. If set to `false` and address is not passed when creating the checkout, it will be displayed normally.	`boolean`	`false`
hidePaymentButton	Whether to hide the payment button. After hiding it, you can trigger payment manually through the component ref's `payment()` method.	`boolean`	`false`
onSubmit	Payment submission callback, triggered after clicking the payment button. `formValidateError` is the error information when form validation fails. Return `false` to stop the payment submission.	`(formValidateError?: Record<string, FormValidateError[]>) => void \| boolean \| Promise<void \| boolean>`	`undefined`
onSuccess	Callback after successful payment. `PaymentSuccessData` contains the information returned after successful payment, please refer to. This callback is also triggered when risk control is pending.	`(data: PaymentSuccessData) => void`	`undefined`
onError	Callback after payment failure, can resubmit for payment. `error` is a `PayKKaError` instance, typically containing the following properties: `type`: Error type. `message`: Error message. `code`: Error code, when an API error occurs, it will return a specific error code.	`(error: PayKKaError) => void`	`undefined`
onTimeout	Callback when payment times out, can resubmit for payment.	`() => void`	`undefined`
onExpired	Callback when the checkout counter has expired during payment, cannot pay again.	`() => void`	`undefined`

ZalopayRef

Methods and properties exposed by ZaloPay, can be called by the ZaloPay instance created via the create method, e.g.: checkoutZaloPay.ref.payment().

Name	Description	Type
payment	Make a payment, enabled when the payment button is not visible.	`() => void`

Below is an explanation of some data types:

PaymentSuccessData

Payment success information.

interface PaymentSuccessData {
  /** URL that can be redirected to after successful payment */
  returnUrl?: string
}