// Visit Knowledgebase for adding Text Macros to PDF 
// https://apidocs.pdf.co/kb/Fill%20PDF%20and%20Add%20Text%20or%20Images%20(pdf-edit-add)/macros

$(document).ready(function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();
    $("#result").attr("href", '').html('');
});

$(document).on("click", "#submit", function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();
    $("#inlineOutput").text(''); // inline output div
    $("#status").text(''); // status div

    var apiKey = $("#apiKey").val().trim(); //Get your API key at https://app.pdf.co

    var inputText = $("#inputText").val();
    var fontName = $("#fontName").val();
    var fontSize = $("#fontSize").val();
    var fontColor = $("#fontColor").val();

    var destinationXCoordinate = $("#destinationXCoordinate").val();
    var destinationYCoordinate = $("#destinationYCoordinate").val();

    var formData = $("#SourceFile")[0].files[0]; // file to upload

    $("#status").html('Getting presigned url... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />');

    $.ajax({
        url: 'https://api.pdf.co/v1/file/upload/get-presigned-url?name=test.pdf&contenttype=application/pdf&encrypt=true',
        type: 'GET',
        headers: { 'x-api-key': apiKey }, // passing our api key
        success: function (result) {

            if (result['error'] === false) {
                console.log(result);
                var presignedUrl = result['presignedUrl']; // reading provided presigned url to put our content into
                var uploadedUrl = result['url']; // Uploaded URL

                $("#status").html('Uploading... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />');

                $.ajax({
                    url: presignedUrl, // no api key is required to upload file
                    type: 'PUT',
                    headers: { 'content-type': 'application/pdf' }, // setting to pdf type as we are uploading pdf file
                    data: formData,
                    processData: false,
                    success: function (result) {

                        // Request Url
                        var cUrl = 'https://api.pdf.co/v1/pdf/edit/add';

                        // Input Data
                        var data = {
                            name: 'result.pdf',
                            url: uploadedUrl,
                            annotations: [{
                                x: destinationXCoordinate,
                                y: destinationYCoordinate,
                                text: inputText,
                                fontname: fontName,
                                size: fontSize,
                                color: fontColor
                            }]
                        };

                        $("#status").html('Processing... &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />');
                        $.ajax({
                            url: cUrl,
                            type: 'POST',
                            headers: { 'x-api-key': apiKey, 'Content-Type': 'application/json'  },
                            processData: false,
                            contentType: false,
                            data: JSON.stringify(data),
                            success: function (result) {
                                $("#status").text('done processing.');

                                if (result.error) {
                                    $("#errorBlock").show();
                                    $("#errors").text(result.message);
                                } else {
                                    $("#resultBlock").show();
                                    $("#inlineOutput").text(JSON.stringify(result));
                                    $("#iframeResultPdf").prop("src", result.url);
                                }
                            }
                        });

                    },
                    error: function () {
                        $("#status").text('error');
                    }
                });
            }
        }
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cloud API JQuery sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="addTextToPDF.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
 
    <form id="form" enctype="multipart/form-data">
        <p>
            <label>Copy-paste your API Key for ByteScout Cloud API here</label>
            <input type="text" id="apiKey" placeholder="your cloud API Key" value=""/> 
            <a href="https://apidocs.pdf.co" target="_blank">no api key yet? sign up here</a>
        </p>
        <p>
            <label>Source PDF File Url</label>
            <input type="file" id="SourceFile" placeholder="Upload Source File" />
        </p>
        <p>
            <label>Text</label>
            <input type="text" id="inputText" placeholder="Input Text" value="APPROVED" />
        </p>
        <p>
            <label>Font Name</label>
            <input type="text" id="fontName" placeholder="Font Name" value="Times New Roman" />
        </p>
        <p>
            <label>Font Size</label>
            <input type="text" id="fontSize" placeholder="Font Size" value="24" />
        </p>
        <p>
            <label>Color</label>
            <input type="text" id="fontColor" placeholder="Color" value="FF0000" />
        </p>
        <p>
            <label>Destination Co-ordinates - </label>
            <b>X: </b> <input type="text" id="destinationXCoordinate" value="400" /> &nbsp;&nbsp;&nbsp;
            <b>Y: </b> <input type="text" id="destinationYCoordinate" value="600" /> 
        </p>
        <p>
            <label>Destination Image Size - </label>
            <b>Height: </b> <input type="text" id="destinationHeight" value="32" /> &nbsp;&nbsp;&nbsp;
            <b>Width: </b> <input type="text" id="destinationWidth" value="119" /> 
        </p>
        <button type="button" id="submit">Convert</button> <span id="status"></span>
    </form>

    <div id="errorBlock">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <ul id="errors"></ul>
    </div>
 
    <div id="resultBlock">
        <h2>Output:</h2>
        <pre id="inlineOutput"></pre><br/>
        <iframe id="iframeResultPdf" src="" width="100%" height="500px"></iframe>
    </div>
 
</body>
</html>