[SalesForce] calling docusign vf url from Lightning component,

My requirement is to have a component which I will be calling from a button which should redirect me to a docusign page.

I want to pass the docusign parameters int the vf url.

How can a docusign vf page be called from a lightning component.

What I am trying to do here is:

Component:::

<aura:component controller="OnBoardingDocusignHelper"
                implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction">

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="oppRecord" type="Object" />
    <aura:attribute name="recordError" type="String" />

    <aura:attribute name="docusignpageUrl" type="String" />

    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
    <aura:attribute name="renderVal" type="boolean" default='true'/>

   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <force:recordData aura:id="recordEditor"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordError}"
                      targetRecord="{!v.record}"
                      targetFields ="{!v.oppRecord}"
                      fields="Name, StageName, Probability, Sender_Notification__c, OwnerId, Owner.Name, Product_Specialist2__c"
                      mode="EDIT"/>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>

</aura:component>

controller::::::

({
    doInit : function(component, event, helper) {

        let action = component.get("c.getDocusignUrl");
        action.setParams({
            "sourceId": component.get("v.recordId")
        });
        action.setCallback(this,function(response){
            //check state and do error handling
            component.set("v.docusignpageUrl",response.getReturnValue());
            console.log("docusignpageUrl => ",response.getReturnValue());

        });
        $A.enqueueAction(action);
    },

    onRender : function(component, event, helper) {
        var opportunity = component.get('v.oppRecord');
        if(opportunity != null) {
            console.log('opportunity:::::::::::::: ' + opportunity);
            var probability = component.get('v.oppRecord.Probability');
            console.log('probability:::::::::::::: ' + probability);
            var name = component.get('v.oppRecord.Name');
            var stageName = component.get('v.oppRecord.StageName');
            var owner = component.get('v.oppRecord.Owner.Name');
            var productOwner = component.get('v.oppRecord.Product_Specialist2__c');

            //setting the checkbox true
            component.set("v.oppRecord.Sender_Notification__c", true);

            var renderVal=component.get('v.renderVal')
            if(probability >= 50 && renderVal) {
                console.log('inside LC');

                component.find("recordEditor").saveRecord(function(saveResult) {
                    console.log('saveresult:::::::::::' + saveResult.state);
                    if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                        var resultsToast = $A.get("e.force:showToast");
                        resultsToast.setParams({
                            "title": "Saved",
                            "message": "The record was saved."
                        });
                        resultsToast.fire();

                        var urlEvent = $A.get("e.force:navigateToURL");
                        urlEvent.setParams({                        
                            "url" :  component.get('v.docusignpageUrl') 
                        });
                        urlEvent.fire();
                    }
                });
            } else if(probability < 50){ 

                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Error!",
                    "message": "Opportunity should be more than 50%.",
                    "type" : "error"
                });
                toastEvent.fire();
                $A.get("e.force:closeQuickAction").fire();
            } 
        }
    }
})

apex class::::::

public class OnBoardingDocusignHelper {

    @AuraEnabled(cacheable=true)
    public static string getDocusignUrl(String sourceId){
        Pagereference pg = Page.dsfs__DocuSign_CreateEnvelope;
        pg.getParameters().put('SourceID',sourceId);
        pg.getParameters().put('DST','**-**-**-**-**');
        pg.getParameters().put('LA','0');
        return pg.getUrl();
    }
}

Error: The link you followed isn’t valid. This page requires a CSRF confirmation token. Report this error to your Salesforce administrator
I need the url be something like this. Appreciate the response.