签名
允许嵌入的轻量级模式组件 电子签名 通过一个模式弹出 在你的应用程序。 它会通过签名过程生命周期的回调给您信息. 兼容最小依赖的移动取景口.
安维尔是什么?
安维尔 为所有文件提供方便的API.
- PDF 填补 API - 填写一个PDF模板,其中包含网络请求和结构化的JSON数据.
- PDF 生成 API - 发送标记下来或HTML和Anvil会把它变成PDF.
- Etch 带有 API 的 E 签名 - 可自定义的、可嵌入的、带有API的电子签名平台,以控制签名过程的端到端.
- 工作流量(w/ API) - Webforms + PDF + E- sign 带有强大的无码构建器. 轻松地收集结构化数据,生成PDF,并请求签名.
学着点 Anvil 开发者页面。 。 。 .
使用量
yarn add @anvilco/react-signature-modal
npm install @anvilco/react-signature-modal
import AnvilSignatureModal from '@anvilco/react-signature-modal'
import '@anvilco/react-signature-modal/dist/styles.css'
<AnvilSignatureModal
iframeURL={iframeURL}
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onLoad={() => setLoading(false)}
onEvent={(eventObject) => {
console.log(eventObject)
// See https://www.useanvil.com/docs/api/e-signatures/#iframe-event-details
// for all event details.
//
// Example:
//
// {
// action: 'signerComplete',
// signerStatus: 'completed',
// signerEid: 'Jc1ZJisPnpF5lHyfyqBW',
// nextSignerEid: 'WBqyfyHl5FpnPsiJZ1cJ',
// documentGroupStatus: 'partial',
// documentGroupEid: 'nEKq2eGim0ijSqKd98nG',
// etchPacketEid: 'XzfmVPfGUEyBc1XyylFo',
// }
}}
/>
从v1升级到v2
截至二零零年代 AnvilSignatureModal 现在使用 AnvilEmbedFrame 在引擎盖下。 道具略有变化:
signURL- > (中文)iframeURLonFinishSigning- > (中文)onEvent。检查eventObject.action === 'signerComplete'以检测签名器已签名onError- > (中文)onEvent。检查eventObject.error以确定是否存在错误
// v1.x
<AnvilSignatureModal
// Changed props, see below
signURL={signURL}
onFinishSigning={(eventObject) => console.log(eventObject)}
onError={(eventObject) => console.log(eventObject)}
// Unchanged!
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onLoad={() => setLoading(false)}
/>
// v2.x
<AnvilSignatureModal
// New
iframeURL={iframeURL}
onEvent={(eventObject) => {
console.log(eventObject)
if (eventObject.action === 'signerComplete') {
// Signer has finished signing
} else if (eventObject.error) {
// There has been an error
}
}}
// Unchanged!
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onLoad={() => setLoading(false)}
/>
道具
编号
字符串 - html id属性,压倒 id 还会删除所有默认样式 react-siganture-modal。如果想要覆盖特定样式元素,则使用 anvilFrameProps 见下文.
框架
字符串( 需要) - 从该数据库生成的Anvil签名页面的URL generateEtchSignURL 图QL 变异。签名框将通过此 URL 显示签名页面.
示例
iframeURL={`https://app.useanvil.com/etch/8iJDbq8dkEmjrsNw7Dnb/sign?token=dsa...`}
打开
布尔 - 如果 isOpen 这是真的.
关闭
函数 - 在右上角单击 X 按钮时,此函数被调用.
示例
onClose={() => setIsOpen(false))}
活动
函数 - 调用函数 payload 作为参数。 当一个用户成功完成签名时,它就会被调用 .
示例
onEvent={(eventObject) => console.log(eventObject)}
/*
{
action: "signerComplete",
signerEid: "kJzR6mcIWKoZs6KOxV4w",
signerStatus: "completed",
nextSignerEid: "HRLhx4khticpfxsUFSpj",
documentGroupEid: "9fQnvfy51p7oKrEYajMh",
documentGroupStatus: "partial",
etchPacketEid: "J1phQTO6WQH6gZcMJAG5", // If from an EtchPacket
weldDataEid: "J1phQTO6WQH6gZcMJAG5", // If from a workflow
}
*/
见 我们的电子签名文件 关于所有iframe事件的全部细节.
onEvent 当用户尝试签名时遇到错误时,也叫它。 详情见文件 如何从错误中恢复。 。 。 .
示例出错有效载荷 :
{
action: "signerError",
errorType: "tokenExpired", tokenExpired || tokenInvalid || notFound
error: "Token Expired",
message: "Error specific message",
signerEid: "kJzR6mcIWKoZs6KOxV4w",
// depending on the errorType, you may or may not receive the following
signerStatus: "sent",
nextSignerEid: "HRLhx4khticpfxsUFSpj",
documentGroupEid: "9fQnvfy51p7oKrEYajMh",
documentGroupStatus: "sent",
etchPacketEid: "J1phQTO6WQH6gZcMJAG5", // If from an EtchPacket
weldDataEid: "J1phQTO6WQH6gZcMJAG5", // If from a workflow
}
登录
函数 - 当签名页面装入完成时,此函数被调用 .
示例
onLoad={() => setLoading(false)}
模式
字符串 - 通过一个查询选择器 识别您的应用程序的根。 在模式打开时隐藏其他页面内容 屏幕阅读器和其他无障碍目的.
默认 : #root
显示关闭
布尔 - 显示模式右上方的相近图标, 如果真实的话.
iframewarning 方案
对象 - 如果用户的浏览器不支持iframes,将自定义道具传入显示的段落标记.
示例
iframeWarningProps={{ className: 'warning-text' }}
紫外线
对象 - 将自定义道具传入模式内显示的 Iframe 标记.
示例
anvilFrameProps={{
style: { background: 'white' },
}}
图标关闭选项
对象 - 将自定义道具传入模式内显示的删除按钮的 svg 标签.
示例
iconCloseProps={{ className: 'red-delete-button' }}
样式
通过导入您的 CSS 样式表来自定义组件 。 将ID或类名通过作为道具传递来取代.
Anvil Etch 电子签名文件
链接 QQ
页:1
- 要启用 Iframe 嵌入: 请访问您在 Anvil 中的组织设置, 并启用 API 部分的 “ Iframe Embedding ” .
- 反应 QQ v16.0 需要.
错误
请为错误、 缺少文档或意外行为存档 .
问题或反馈
请发电子邮件给我们 支持@useanvil.com。 。 。 .