{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-@l10n/zh-Hans/payments/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["img","tabs","tab","partial"]},"type":"markdown"},"seo":{"title":"PicPay","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":"picpay","__idx":0},"children":["PicPay"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pic-pay-component.989d62492d9c5f4d186226181961e03952c7e51bbad0c0165b4704efa9a161a3.ee87f053.png","alt":"PicPay component","framed":false,"withLightbox":true,"width":"350","style":{"borderRadius":"8px"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"示例","__idx":1},"children":["示例"]},{"$$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=\"checkoutPicPayField\"></div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"javascript","header":{"title":"javascript","controls":{"copy":{}}},"source":"import { PicPay } from '@paykka/card-checkout-ui'\n\nconst checkoutPicPay = paykkaCheckout.create(PicPay, {\n  onSubmit: formValidateError => {\n    console.log('PicPay 支付提交：', formValidateError)\n  },\n  onSuccess: data => {\n    console.log('PicPay 支付成功：', data)\n  },\n  onError: error => {\n    console.log('PicPay 支付失败：', error)\n  }\n})\n\ncheckoutPicPay.mount('#checkoutPicPayField')\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=\"checkoutPicPayField\"></div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"javascript","header":{"title":"javascript","controls":{"copy":{}}},"source":"const { PicPay } = PayKKaCardCheckoutUI\n\nconst checkoutPicPay = paykkaCheckout.create(PicPay, {\n  onSubmit: formValidateError => {\n    console.log('PicPay 支付提交：', formValidateError)\n  },\n  onSuccess: data => {\n    console.log('PicPay 支付成功：', data)\n  },\n  onError: error => {\n    console.log('PicPay 支付失败：', error)\n  }\n})\n\ncheckoutPicPay.mount('#checkoutPicPayField')\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":"picpayprops","__idx":3},"children":["PicPayProps"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["调用 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create"]}," 方法创建 PicPay 时传入。"]},{"$$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":"名称"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["名称"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"300px","data-label":"说明"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["说明"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"类型"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["类型"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"110px","data-label":"默认值"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["默认值"]}," "]}]}]},{"$$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":["是否展示邮箱。",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["配置 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," 但创建收银台时已传，则展示禁用状态。"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["配置 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," 但创建收银台时未传，则正常展示。"]}]}]},{"$$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":["是否展示地址。",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["配置 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," 但创建收银台时已传，则正常展示。"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["配置 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," 但创建收银台时未传，则正常展示。"]}]}]},{"$$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":["是否隐藏支付按钮。隐藏后可通过组件 ref 的 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment()"]}," 方法自定义触发支付。"]},{"$$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":["支付提交回调，点击支付按钮后触发。",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formValidateError"]}," 为表单校验不通过的错误信息。"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["返回 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," 可阻止继续提交支付。"]}]}]},{"$$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":["支付成功后的回调。",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaymentSuccessData"]}," 为支付成功后返回的信息，请",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#paymentsuccessdata"},"children":["参考"]},"。"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["风控滞留时也会触发该回调。"]}]}]},{"$$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":["支付失败后的回调，可重新提交进行支付。",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}," 为 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayKKaError"]}," 实例，通常包含以下属性：",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["type"]},"：错误类型。"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["message"]},"：错误信息。"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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":["支付超时后的回调，可重新提交进行支付。"]},{"$$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":["支付时收银台已过期的回调，无法再次支付。"]},{"$$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":"picpayref","__idx":4},"children":["PicPayRef"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["PicPay 暴露的方法和属性，可通过 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create"]}," 方法创建出的 PicPay 实例调用，如：",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkoutPicPay.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":"名称"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["名称"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"说明"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["说明"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"类型"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["类型"]}]}]}]},{"$$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":["进行支付，在支付按钮配置为",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["不可见"]},"时启用。"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["下面对一些数据类型进行说明："]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"paymentsuccessdata","__idx":5},"children":["PaymentSuccessData"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["支付成功后返回的信息。"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface PaymentSuccessData {\n  /** 支付成功后可跳转的 URL */\n  returnUrl?: string\n}\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"PicPay","id":"picpay","depth":1},{"value":"示例","id":"示例","depth":2},{"value":"Attributes","id":"attributes","depth":2},{"value":"PicPayProps","id":"picpayprops","depth":3},{"value":"PicPayRef","id":"picpayref","depth":3},{"value":"PaymentSuccessData","id":"paymentsuccessdata","depth":3}],"frontmatter":{"seo":{"title":"PicPay"}},"lastModified":"2026-07-13T07:32:02.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/zh-hans/payments/docs/developer-resources/pic-pay-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}