I tried to get the answer through reading their documentation but I was unable to get clear payment plan for powerforms.
On
PowerForms are useful when you don't want to write any code to integrate DocuSign into your website. They are a quick way to gather signatures if you don't know who is going to sign. They do have a bunch of limitations, one of them is that you can't really customize the experience for your users. PowerForms come with Business Pro Plan and above - see https://ecom.docusign.com/plans-and-pricing/esignature for more information about features and prices.
I would suggest you use Embedded Signing and maybe even look into the Focused View option that gives you more control, more smooth experience and the ability to either redirect after the user signs, or not even leave your site, so you just use a JavaScript event that calls your code to update the page however you like after the user signed.
https://developers.docusign.com/docs/esign-rest-api/how-to/request-signature-focused-view/
HTML:
-->
<br />
<h2>The document has been embedded with focused view.</h2>
<br />
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\" />
<title>Signing</title>
<style>
html,
body {
padding: 0;
margin: 0;
font: 13px Helvetica, Arial, sans-serif;
}
.docusign-agreement {
width: 75%;
height: 800px;
}
</style>
</head>
<body>
<div class=\"docusign-agreement\" id=\"agreement\"></div>
</body>
</html>
<p><a>Continue</a></p>
<script src='https://js.docusign.com/bundle.js'></script>
<script>
window.DocuSign.loadDocuSign('" . $integrationKey . "')
.then((docusign) => {
const signing = docusign.signing({
url: '" . $url . "',
displayFormat: 'focused',
style: {
/** High-level variables that mirror our existing branding APIs. Reusing the branding name here for familiarity. */
branding: {
primaryButton: {
/** Background color of primary button */
backgroundColor: '#333',
/** Text color of primary button */
color: '#fff',
}
},
/** High-level components we allow specific overrides for */
signingNavigationButton: {
finishText: 'You have finished the document! Hooray!',
position: 'bottom-center'
}
}
});
signing.on('ready', (event) => {
console.log('UI is rendered');
});
signing.on('sessionEnd', (event) => {
/** The event here denotes what caused the sessionEnd to trigger, such as signing_complete, ttl_expired etc../ **/
console.log('sessionend', event);
window.close();
});
signing.mount('#agreement');
})
.catch((ex) => {
// Any configuration or API limits will be caught here
});
</script>
<!--
This video (by me!) is all about the programming options for Powerforms.
As Inbar says, PowerForms have limitations. But they're far easier to program. So you'll need to determine if PowerForms are the right solution for your use case.