Personal Loan Application


Embed the signing experience, or send an email (remote)
Set an Access Code for this customer to enter before signing documents
Enable Phone Authentication to receive a verification phone call before signing documents (Learn More)
* This can be enabled when using your own account

Personal Loan Application



This Sample Features:

  • Single Signer
  • DOCX Import
  • Auto-Place (Anchor) Tab Positioning
  • Embedded Signing (Recipient View)
  • Access Code Authentication

Code Flow:

Step 1

When the form is submitted we use the Envelopes: create API to send the signature request with the corresponding form information. The envelope we construct contains a document, a recipient of type signer, and tabs which contain the form fields information. If embedded signing is selected we must also set the clientUserId property on the recipient.

Multi-factor authentication can be added using an accessCode or additional Authentication (Phone or ID Check). Note that this example uses the Auto-Place feature for placing tabs on the document.

To create and send an envelope send an http POST request to:

POST /v2/accounts/{accountId}/envelopes

{
  "status": "sent",
  "emailSubject": "Personal Loan Application",
  "emailBlurb": "Please sign the Loan application to start the application process.",
  "documents": [
    {
      "documentId": "1",
      "name": "Document",
      "fileExtension": "docx",
      "documentBase64": "-- Base64-encoding document bytes are here --"
    }
  ],
  "recipients": {
    "signers": [
      {
        "tabs": {
          "signHereTabs": [
            {
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "X:",
              "anchorXOffset": "100",
              "anchorYOffset": "-2"
            }
          ],
          "fullNameTabs": [
            {
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Name:",
              "anchorXOffset": "100",
              "anchorYOffset": "-2"
            }
          ],
          "textTabs": [
            {
              "name": "Phone",
              "locked": "false",
              "tabLabel": "Phone",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Phone:",
              "anchorXOffset": "100",
              "anchorYOffset": "-2"
            },
            {
              "name": "AddressLine1",
              "value": "123 Disneyland Ave",
              "locked": "false",
              "tabLabel": "AddressLine1",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Address:",
              "anchorXOffset": "100",
              "anchorYOffset": "-2"
            },
            {
              "name": "AddressLine2",
              "locked": "false",
              "tabLabel": "AddressLine2",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Address:",
              "anchorXOffset": "100",
              "anchorYOffset": "35"
            },
            {
              "name": "AddressCityStateZip",
              "value": "Anaheim, CA 90210",
              "locked": "false",
              "tabLabel": "AddressCityStateZip",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Address:",
              "anchorXOffset": "100",
              "anchorYOffset": "70"
            }
          ],
          "numberTabs": [
            {
              "name": "Amount",
              "locked": "false",
              "tabLabel": "Amount",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Amount:",
              "anchorXOffset": "100",
              "anchorYOffset": "-2"
            },
            {
              "name": "PaymentDuration",
              "locked": "false",
              "tabLabel": "PaymentDuration",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Payment Duration:",
              "anchorXOffset": "200",
              "anchorYOffset": "-2"
            }
          ],
          "emailTabs": [
            {
              "name": "Email",
              "value": "-- RECIPIENT EMAIL HERE --",
              "tabLabel": "Email",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "E-mail:",
              "anchorXOffset": "100",
              "anchorYOffset": "-2"
            }
          ],
          "formulaTabs": [
            {
              "formula": "[Amount]/[PaymentDuration]",
              "name": "MonthlyPayment",
              "tabLabel": "MonthlyPayment",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1",
              "anchorString": "Monthly Payment:",
              "anchorXOffset": "200",
              "anchorYOffset": "-2"
            }
          ]
        },
        "name": "-- RECIPIENT NAME HERE --",
        "email": "-- RECIPIENT EMAIL HERE --",
        "recipientId": "1",
        "accessCode": "12345",  // if access code selected
        "clientUserId": "1001"  // if embedded signing selected
      }
    ]
  }
}
Step 2

If Embedded Signing was selected we next use the EnvelopeViews: createRecipient API to generate a signing URL for the recipient. For this to work the clientUserId property must be set on the recipient when the envelope was sent during step 1.

Once the envelope is sent we save the envelope ID and Recipient information to our session then redirect to the /sign/embedded page. There we retrieve the envelope ID and recipient info from our session and create the recipient view by generating the URL and displaying in a full-width and full-height iframe.

To create the recipient view of the envelope we send an http POST request to:

POST /v2/accounts/{accountId}/envelopes/{envelopeId}/views/recipient

{
  "clientUserId": "1001",
  "userName": "-- RECIPIENT NAME HERE --",
  "email": "-- RECIPIENT EMAIL HERE --",
  "recipientId": "1",
  "returnUrl": "-- RETURN URL HERE --",
  "authenticationMethod": "email"
}