At many companies, it’s common to have the ability to generate purchase orders from data housed in your CRM, ERP, or backend systems. What’s missing is automating the process of getting those documents signed and approved following your company’s business practices.

You need a solution that offers seamless integration with your existing systems and is easy to customize to match your company’s unique business processes. Efficiency in implementation is a plus; the quicker you can set up and automate your processes, the better.

Electronic Signature Security and Compliance

The solution also needs to comply with eSignature  laws and regulations and ensure data security to protect confidential documents and information.

eSignature: E-Sign Act, UETA

Data Privacy: GDPR, CPRA, HIPAA-ready

Data Security: SOC 2 Type II, SHA-256 encryption

How to Dynamically Generate Purchase Orders and Embed eSignature In Your App

In this tutorial, we’ll demonstrate how to generate professional documents populated with backend data using Document Automation Hub. We’ll show how to conditionally display terms and conditions based on region, add signature, and seamlessly integrate document workflow and eSignature inside your Next.js or React applications.

Purchase Order App

A basic React app simulating data retrieval from an existing system.

Purchase Order Document

A DOCX file, that will be used to dynamically generate the purchase order with the provided data. It will conditionally display terms and conditions based on the selected region.

Embedded Signing

Embed eSignature in your application, website or CRM.

Setup: Download the Code

We’ll use a Next.js app to simulate data retrieval from your backend systems by passing data in via an HTML form. Download the code here or clone it to a local repository.

git clone https://github.com/edshin24/purchase-order-app

Key Concepts

We’ll use Document Automation Hub, an API for automating document workflows, to dynamically pre-fill the document, conditionally display terms and conditions, and generate a link for document signing.

Authentication: JWT Grant

1. Create a free developer account
2. Log into the Automation Hub Dashboard
3. Click Add Application, and enter:

Generate JWT Token

1. Click on the application you just created → under Recent Applications
2. Click JWT Token
3. Create RSA → Copy your private key
4. Click “Generate token” → Paste your Private key and set the Expiration date

Copy the JSON Web Token → We’ll need this to make our API calls.

Document Generation

Document Generation gives you the ability to dynamically generate PDFs from Microsoft Word documents by adding custom variables that are later populated with specific data.

Automating this step can add time savings, accuracy and consistency to your documents. And using a Word document gives you full control over branding so you can exactly match your business requirements and design.

Dynamic Content

Our purchase order contains text tags, conditionals, and a signature field.

See “IT Purchase Order.docx” in the root directory of the project to see how it works, or manually add them to your own Word document to get hands-on experience.

Tip: Use straight quotes (not curly quotes!) when adding the signature field.

Base64 Encode

To prepare the document(s) for upload, we need to encode them in Base64 format.

For simplicity, “IT Purchase Order.docx” has already been encoded as “IT Purchase Order.docx.base64”.

To Base64 encode your documents:

1. Use a free online Base64 encoder.
2. Use encodeDocxToBase64.js to encode your documents on your local machine.

node encodeDocxToBase64.js

Note: You can find “IT Purchase Order.docx.base64” and “encodeDocxToBase64.js” in the root directory of the project.

Create Template

Next, let’s create the Template. A template represents the workflow configuration, documents and forms for your workflow.

Let’s take a look at the curl request example from the docs to see how it works:

curl --request POST \
  --url https://api.airslate.io/v1/organizations/organization_id/templates \
  --header 'Accept: application/json' \
  --header 'Authorization: Bearer undefined' \
  --header 'Content-Type: application/json' \
  --data '{
    "name": "My Template",
    "description": "Template for HR Office",
   "redirect_url": "https://www.pdffiller.com/?mode=view"
  }'

Organization ID

To get the organization ID, let’s take a look at the curl request example from the docs:

curl --request GET \
  --url https://api.airslate.io/v1/organizations \
  --header 'Accept: application/json' \
  --header 'Authorization: Bearer undefined'

This call gets all organizations we belong to. We’re also going to take care of a few housekeeping items here to simplify the rest of our API calls.

Optional: You can log in with your free developer account to create an organization (workspace) at https://www.airslate.com/.

Implement with Axios and Next.js

It’s straightforward to map the example curl request using axios.

1. endpoint: url + query parameters
2. options: headers for authentication and expected data formats
3. payload: data; none in this case

// api.js -> API calls to https://api.airslate.io/v1
const getOrganization = async () => {
  try {
    const endpoint = `${BASE_URL}/organizations?per_page=100`;
    const response = await axios.get(endpoint, { headers: await getHeaders() });
    return response.data.data.find(org => org.name === ORGANIZATION);

. . .

// getHeaders()
const getHeaders = async () => {
  const accessToken = await getAccessToken();
  return {
    'Accept': 'application/json',
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json',
  };
}; 

Get Access Token

We’re also going to use this initial API call to check if we have a valid access token and obtain a new one if we don’t have one or if it’s expired.

// api.js -> getOrganization (cont’d)
  
. . .
  
} catch (error) {
    if (error.response && error.response.status === 401) {
      console.warn('Unauthorized request when fetching organizations. Attempting token refresh.');


      const newToken = await obtainAccessToken();
      setAccessToken(newToken);

Create Template with Axios

Now that we have the organization ID and access token, we’ll create the template by passing in the organization ID, name, description, and redirect_url.

const TEMPLATE = "Purchase Order Template";
const REDIRECT_URL = "https://www.google.com";

const createTemplate = async (organizationId) => {
  const endpoint = `${BASE_URL}/organizations/${organizationId}/templates`;


  const payload = {
    name: TEMPLATE,
    description: "Purchase Order Template",
    redirect_url: REDIRECT_URL
  };


  const response = await axios.post(endpoint, payload, { headers: await getHeaders() });


  return response.data;
};

Upload Document

After creating the template, we’ll upload one or more documents or forms. In our case, we’re uploading a Word document so we’ll set type to “DOC_GENERATION” and pass in our Base64 encoded document.

const DOCUMENT = "IT Purchase Order.docx";


const uploadDocument = async (organizationId, templateId) => {
  const endpoint = `${BASE_URL}/organizations/${organizationId}/templates/${templateId}/documents`;


  const payload = {
    name: DOCUMENT,
    type: "DOC_GENERATION",
    content: getBase64Content()
  };


  return await axios.post(endpoint, payload, { headers: await getHeaders() });
};

const getBase64Content = () => {
  const filePath = path.join(process.cwd(), 'IT Purchase Order.docx.base64');
  const base64Content = fs.readFileSync(filePath, 'utf-8');
  return base64Content;
};

Pre-Fill via API Bot

Document Automation Hub leverages airSlate to handle the embedded signing session. To configure the signing session to pre-fill our documents via the API:

1. Log into airslate.com using your free developer account
2. Click All Templates
3. Click Configure Template

4. Click All Bots (lower right of screen)

5. Click Add Bot
6. Search for “Pre-fill via API”
7. Click Install Bot

8. Click Publish

Create Flow

Next, we’ll create a Flow → an actionable copy of our documents and forms. This is the step where we’ll pass in our data to dynamically generate our document.

Note: orderData contains the data from the HTML form.

const createFlow = async (organizationId, templateId, document, orderData) => {
  const endpoint = `${BASE_URL}/organizations/${organizationId}/templates/${templateId}/flows`;


  const payload = {
    documents: [
      {
        id: document.id,
        fields: [
          {
            "id": getFieldIdByName(document, "Order_Date"),
            "type": "date",
            "name": "Order_Date",
            "value": orderData.date,
            "placeholder": ""
          },
          ...
          {
            "id": getFieldIdByName(document, "Client_Name"),
            "type": "text",
            "name": "Client_Name",
            "value": orderData.clientName,
            "placeholder": ""
          }
        ]
      }
    ]
  };


  const response = await axios.post(endpoint, payload, { headers: await getHeaders() });
  return response.data;
};

Create a Link to the Flow

Now we’re ready to send out our first Flow. The documents or forms provided in the link can only be submitted once and expires after a set duration of time (in minutes).

Note: roleId is returned in the response when we create a Flow.

// createPurchaseOrder.js
roleId = flow.available_roles[0].id;

// api.js
const distributeFlow = async (organizationId, templateId, flowId, roleId) => {
  const endpoint = `${BASE_URL}/organizations/${organizationId}/templates/${templateId}/flows/${flowId}/share`;


  const payload = {
    data: [
      {
        auth_method: "none",
        expire: 60,
        role_id: roleId
      }
    ]
  };


  return await axios.post(endpoint, payload, { headers: await getHeaders() });
};

Embed eSignature In Your App

We’ll use the URL we retrieved in the last step to embed the signing session within our app.

return (
  

    

      
Technology Solutions, Inc.
    
    



Free Developer Account



As a developer or technical product owner, we know you have a lot of technologies to keep up with and would love to have you join our ecosystem.



Document Automation Hub is a useful addition to your toolkit with a suite of API capabilities that go beyond eSignature, and includes document workflow, web forms, embedded PDF editing, and PDF tools that easily integrate with your existing systems.



Head over to our developer page to create a free developer account and get 250 flows for free. And check out our Stack Overflow community to post questions on this demo or on how to use any of our APIs. We regularly check in on questions asked by developers there.



Document Automation Hub docs:



Document Generation



Get Organizations



Create Template



Upload Document



Create a Flow → Pre-fill document with specific data



Create a Flow Link → Embed or send for signature
Happy coding! We hope this article helps you automate document workflows and eSignature for your purchase orders.



Are you interested in demos for other document automation use cases? Please let us know any other demos you’d like to see!





Access every API you need to transform users’ experience.

Try for free




Competitive Metrics: Ignore



Integration with Existing Systems: A solution that seamlessly integrates with existing CRMs, ERPs, or bespoke systems without requiring a significant overhaul. The easier the integration, the better.



Scalability: As businesses grow, so do their needs. The chosen solution should be scalable to accommodate an increasing number of purchase orders and users.



Customizability: Businesses often have unique processes. The solution should be customizable to adapt to specific workflows, branding, or requirements.



Security & Compliance: Secure handling of documents, especially financial ones, is paramount. Ensuring data integrity, GDPR compliance (or any other regional data protection law), and proper authentication mechanisms are crucial.



Cost & Efficiency: Solutions that are resource-intensive or expensive to maintain and scale might not be viable in the long run. Efficient solutions that optimize resources and cost would be more attractive.



Documentation & Support: Good API documentation, developer community support, and responsive customer service can make or break the adoption of a solution.



Speed & Performance: Slow or laggy solutions can result in user frustration and inefficiencies. Speed and robust performance are therefore critical.



Error Handling & Debugging: The ability to quickly identify, debug, and rectify any issues is essential. Clear error messages and extensive logging capabilities are a boon.
The post Automate eSignature and document workflows for purchase orders: A developer’s guide appeared first on airSlate Blog | Business automation.