{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-payments/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["img","tabs","tab","partial"]},"type":"markdown"},"seo":{"title":"ZaloPay","description":"Learn how to Integration with PayKKa APIs","siteUrl":"https://docs.paykka.com","image":"/assets/logo.df495cc5e94d9633069f202c90e3a52a9aaff809e494405ba215cb8339e0714e.db81178d.png","keywords":"paykka, docs, doc, documentation, apis, api, portal","lang":"en-US"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"zalopay","__idx":0},"children":["ZaloPay"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/zalopay-component.ee818b53909bf137cc382577e1a3535b564a434d4c400df4a51e370af9e3dfaa.ee87f053.png","alt":"ZaloPay component","framed":false,"withLightbox":true,"width":"350","style":{"borderRadius":"8px"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":1},"children":["Example"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"npm","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","data-title":"html","header":{"title":"html","controls":{"copy":{}}},"source":"<div id=\"checkoutZaloPayField\"></div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"javascript","header":{"title":"javascript","controls":{"copy":{}}},"source":"import { Zalopay } from '@paykka/card-checkout-ui'\n\nconst checkoutZaloPay = paykkaCheckout.create(Zalopay, {\n  onSubmit: formValidateError => {\n    console.log('ZaloPay payment submitted:', formValidateError)\n  },\n  onSuccess: data => {\n    console.log('ZaloPay payment successful:', data)\n  },\n  onError: error => {\n    console.log('ZaloPay payment failed:', error)\n  }\n})\n\ncheckoutZaloPay.mount('#checkoutZaloPayField')\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"CDN","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","data-title":"html","header":{"title":"html","controls":{"copy":{}}},"source":"<div id=\"checkoutZaloPayField\"></div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"javascript","header":{"title":"javascript","controls":{"copy":{}}},"source":"const { Zalopay } = PayKKaCardCheckoutUI\n\nconst checkoutZaloPay = paykkaCheckout.create(Zalopay, {\n  onSubmit: formValidateError => {\n    console.log('ZaloPay payment submitted:', formValidateError)\n  },\n  onSuccess: data => {\n    console.log('ZaloPay payment successful:', data)\n  },\n  onError: error => {\n    console.log('ZaloPay payment failed:', error)\n  }\n})\n\ncheckoutZaloPay.mount('#checkoutZaloPayField')\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"attributes","__idx":2},"children":["Attributes"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"zalopayprops","__idx":3},"children":["ZalopayProps"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Passed when calling the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create"]}," method to create ZaloPay."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"160px","data-label":"Name"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Name"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"300px","data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"110px","data-label":"Default"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]}," "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["showEmail"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to display email.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," and email is already passed when creating the checkout, it will be displayed as disabled."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," and email is not passed when creating the checkout, it will be displayed normally."]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["showAddress"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to display address.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," and address is already passed when creating the checkout, it will be displayed normally."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," and address is not passed when creating the checkout, it will be displayed normally."]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["hidePaymentButton"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to hide the payment button. After hiding it, you can trigger payment manually through the component ref's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment()"]}," method."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["onSubmit"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment submission callback, triggered after clicking the payment button.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formValidateError"]}," is the error information when form validation fails."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to stop the payment submission."]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(formValidateError?: Record<string, FormValidateError[]>) => void | boolean | Promise<void | boolean>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["onSuccess"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback after successful payment.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaymentSuccessData"]}," contains the information returned after successful payment, please ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#paymentsuccessdata"},"children":["refer to"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["This callback is also triggered when risk control is pending."]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(data: PaymentSuccessData) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback after payment failure, can resubmit for payment.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}," is a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayKKaError"]}," instance, typically containing the following properties:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["type"]},": Error type."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["message"]},": Error message."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code"]},": Error code, when an API error occurs, it will return a specific error code."]}]}]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(error: PayKKaError) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["onTimeout"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback when payment times out, can resubmit for payment."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["onExpired"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback when the checkout counter has expired during payment, cannot pay again."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"zalopayref","__idx":4},"children":["ZalopayRef"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Methods and properties exposed by ZaloPay, can be called by the ZaloPay instance created via the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create"]}," method, e.g.: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkoutZaloPay.ref.payment()"]},"."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"160px","data-label":"Name"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Name"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["payment"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Make a payment, enabled when the payment button is ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not visible"]},"."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Below is an explanation of some data types:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"paymentsuccessdata","__idx":5},"children":["PaymentSuccessData"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Payment success information."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface PaymentSuccessData {\n  /** URL that can be redirected to after successful payment */\n  returnUrl?: string\n}\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"ZaloPay","id":"zalopay","depth":1},{"value":"Example","id":"example","depth":2},{"value":"Attributes","id":"attributes","depth":2},{"value":"ZalopayProps","id":"zalopayprops","depth":3},{"value":"ZalopayRef","id":"zalopayref","depth":3},{"value":"PaymentSuccessData","id":"paymentsuccessdata","depth":3}],"frontmatter":{"seo":{"title":"ZaloPay"}},"lastModified":"2026-07-13T07:32:02.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/payments/docs/developer-resources/zalopay-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}