GoModal

Purpose

Prepares the opening of the modal form. The form will be displayed in the UI as a Javascript-based checkout.

Mandatory

Yes, if the plugin supports the Modal Form Workflow.

Input Parameters

An associative array that contains the following values:

Param name Description Type
config The plug-in configuration values saved in the Billing database. array
environment The Billing environment information. Environment
account_info The account's details. AccountDetails
vendor_info The vendor's details. AccountDetails
document_info The payment document description. DocumentInfo

transaction_category

The transaction category for merchant-initiated payments (relevant and available only for transaction_initiator = MIT). Possible values are:

  • C: for Unscheduled Credential on File payments,
  • R: for recurring payments (payments at regular intervals).
 string

transaction_moto

The parameter that defines whether it is the MOTO transaction. Possible values are:

  • true: for MIT payments on behalf of a customer,
  • transaction_moto is not sent: for CIT payments and recurring or renewing MIT payments.
 boolean

transaction_initiator

The transaction initiator. Possible values are:

 string
ref_no The Billing transaction identifier. integer
transaction_amount The transaction amount. double
currency_iso The currency of the transaction amount in the ISO format (for example, USD or EUR). string

current_lang

The current language. string
client_ip The IP from the client computer. string

The example of input parameters is shown below as a JSON object:

Copy 
{
    "config": {
        "auth_code": "421",
        "format": "json",
        "gateway_url": "https://plugin-gateway-url.com",
        "test_mode": "1"    },
    "environment": {
        "lang": "en",
        "notify_url": "https://example.sandboxes.int.zone\\/aps\\/2\\/resources\\/82699957-0fa8-44c4-a514-428434a7d3de\\/bss\\/redirect\\/12\\/notify",
        "return_url": "https://example.sandboxes.int.zone\\/aps\\/2\\/resources\\/82699957-0fa8-44c4-a514-428434a7d3de\\/bss\\/redirect\\/12\\/callback",
        "return_url_3dsecure": "https://example.sandboxes.int.zone\\/aps\\/2\\/resources\\/82699957-0fa8-44c4-a514-428434a7d3de\\/bss\\/redirect\\/12\\/3dsecure",
        "return_url_failed": "https://example.sandboxes.int.zone\\/aps\\/2\\/resources\\/82699957-0fa8-44c4-a514-428434a7d3de\\/bss\\/redirect\\/12\\/fail\\/callback",
        "return_url_ok": "https://example.sandboxes.int.zone\\/aps\\/2\\/resources\\/82699957-0fa8-44c4-a514-428434a7d3de\\/bss\\/redirect\\/12\\/ok\\/callback",
        "system_host": "bss.int.zone"    },
    "vendor_info": {
        "id": 1,
        "type": 0,
        "vendor_id": null,
        "is_corporate": true,
        "name": "ServicePro",
        "lang": "en",
        "admin_fname": "Charlie",
        "admin_mname": null,
        "admin_lname": "Root",
        "admin_email": "root@test.oss",
        "admin_phone": {
            "country_code": "1",
            "area_code": "408",
            "number": "4567890",
            "extention": null
        },
        "admin_fax": {
            "country_code": null,
            "area_code": null,
            "number": null,
            "extention": null
        },
        "billing_fname": "Charlie",
        "billing_mname": null,
        "billing_lname": "Root",
        "billing_email": "root@test.oss",
        "billing_phone": {
            "country_code": "1",
            "area_code": "408",
            "number": "4567890",
            "extention": null
        },
        "billing_fax": {
            "country_code": null,
            "area_code": null,
            "number": null,
            "extention": null
        },
        "technical_fname": "Charlie",
        "technical_mname": null,
        "technical_lname": "Root",
        "technical_email": "root@test.oss",
        "technical_phone": {
            "country_code": "1",
            "area_code": "408",
            "number": "4567890",
            "extention": null
        },
        "technical_fax": {
            "country_code": null,
            "area_code": null,
            "number": null,
            "extention": null
        },
        "tax_ex_number": null,
        "address_address1": "500 SW 39th Street, Suite 200",
        "address_address2": null,
        "address_city": "Renton",
        "address_state": "WA",
        "address_zip": "98057",
        "address_country": "us"    },
    "account_info": {
        "id": 1000001,
        "type": 3,
        "vendor_id": 1,
        "is_corporate": true,
        "name": "Hayes, Lindgr",
        "lang": "en",
        "admin_fname": "Derick",
        "admin_mname": null,
        "admin_lname": "Reilly",
        "admin_email": "sheldon.bosco5663@ingrammicro.tld",
        "admin_phone": {
            "country_code": "1",
            "area_code": "907",
            "number": "3935919",
            "extention": null
        },
        "admin_fax": {
            "country_code": "1",
            "area_code": "907",
            "number": "3935919",
            "extention": null
        },
        "billing_fname": "Derick",
        "billing_mname": null,
        "billing_lname": "Reilly",
        "billing_email": "sheldon.bosco5663@ingrammicro.tld",
        "billing_phone": {
            "country_code": "1",
            "area_code": "907",
            "number": "3935919",
            "extention": null
        },
        "billing_fax": {
            "country_code": "1",
            "area_code": "907",
            "number": "3935919",
            "extention": null
        },
        "technical_fname": "Derick",
        "technical_mname": null,
        "technical_lname": "Reilly",
        "technical_email": "sheldon.bosco5663@ingrammicro.tld",
        "technical_phone": {
            "country_code": "1",
            "area_code": "907",
            "number": "3935919",
            "extention": null
        },
        "technical_fax": {
            "country_code": "1",
            "area_code": "907",
            "number": "3935919",
            "extention": null
        },
        "tax_ex_number": null,
        "address_address1": "132 Blackwell Street",
        "address_address2": null,
        "address_city": "Shemya",
        "address_state": "AK",
        "address_zip": "99501",
        "address_country": "us"    },
    "document_info": {
        "id": 13,
        "total": "1.00",
        "currency": "USD",
        "description": "Pre-authorization Charge"    },
    "transaction_category": "C",
    "transaction_moto": true,
    "transaction_initiator": "MIT",
    "plugin": "DemoModal",
    "action": "GoModal",
    "ref_no": 12,
    "transaction_amount": "1.00",
    "currency_iso": "USD",
    "current_lang": "en",
    "client_ip": "10.194.251.244"}
"

Response

An associative array that should contains the following keys:

Param name

Description

Type
STATUS (Mandatory) The method execution status. Valid values for the GoModal method are:
  • MODAL: The request is successfully performed and a pop-up window will be embedded to the provider's website.
  • DECLINED: The request failed. The reason or error message can be sent in the TEXT parameter.
 string
TEXT (Optional) The array that contains the following parameters:
  • customer_message: Contains text that will be displayed to a customer as a status message (String, optional).
  • vendor_message: Contains text that will be displayed to a vendor (String, optional).
 array

MODAL_FORM

(Mandatory) Provides the attributes required for displaying the checkout modal form to the UI. The parameters are:

  • checkout_script_section: The ID of HTML <div> element that contains HTML elements required to open the form (String, mandatory).
  • checkout_script_src: The URL to vendor's Javascript required to build the form (String, optional).
  • checkout_script_handler: The Javascript code that launches the Javascript checkout script (String, mandatory).
  • checkout_script_html: The extra HTML code that can be used for checkout (String, optional).
 array
TRANSACTION_DETAIL

(Optional) The array that will be associated with the current transaction and will be represented back in an unchanged form as the value of the previous_transaction_data parameter at the next call of transaction processing methods of the plugin.

Note: Billing looks up the trans_id parameter that identifies a transaction on the gateway side to display it in the provider's UI. We highly recommend that you use this parameter.

 array

The example of a response is shown below as a JSON object:

Copy 
{
    "STATUS": "MODAL",
    "MODAL_FORM": {
        "checkout_script_section": "demoModal",
        "checkout_script_handler": "console.log('demoModal');document.getElementById('demoModal').style.display ='inline';window.closeModalForm = function() {var paymentSection = window.document.getElementById('demo');if (paymentSection) {paymentSection.parentNode.removeChild(paymentSection);} checkout_completion(); document.getElementById('demoModal').remove();};function getFormData() {var values = [];var els = document.getElementById('demoModal').getElementsByTagName('input');console.log(els);for (let el of els) {values.push(el.id +'= '+ el.value);console.log(el.id +'= '+ el.value);}return values.join('& ');}window.callbackFromModal = function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { console.log(xhr); modal_redirect(xhr.response); } } xhr.open('POST','https://example.sandboxes.int.zone/aps/2/resources/82699957-0fa8-44c4-a514-428434a7d3de/bss/redirect/12/notify', true);     xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send('fromModal = true & '+ getFormData()); document.getElementById('demoModal').remove();};",
        "checkout_script_html": "<style>.modal-wrapper {position:fixed; display:flex; width:100%; height:100%; justify-content:center; align-items:center; background:rgba(0,0,0,.7); z-index:999999;}.overlay { position:absolute; width:100%; height:100%; z-index:1;}.modal-window { width:300px; height:500px; z-index:2;}</style><div class='modal show modal-wrapper'id='modalForm'tabindex='- 1'role='dialog'aria-labelledby='myModalLabel'aria-hidden='true'><div class='modal-dialog modal-sm'role='document'><div class='modal-content'><div class='modal-header'dojoattachpoint='titleConNode'><button type='button'class='close'data-dojo-attach-event='ondijitclick: _onClose'><span aria-hidden='true'>\\u00d7</span></button><h3 class='modal-title'><span dojoattachpoint='titleNode'>Bank account details</span><small dojoattachpoint='descriptionNode'></small></h3></div><div class='modal-body mx-6'><div class='row'><div class='form-group'><label class='control-label'for='bic'>BIC</label><input type='text'id='bic'class='form-control input-sm input-text apsTextBox'></div></div><div class='row'><div class='form-group'><label class='control-label'for='iban'>IBAN</label><input type='text'id='iban'class='form-control validate'></div></div></div><div class='modal-footerd-flex justify-content-center'><div class='btn-toolbar apsToolbar'><button type='button'class='btn btn-success apsButton'onclick='window.callbackFromModal()'>Add<i class='fasfa-paper-plane-oml-1'></i></button><button type='button'class='btn btn-link apsButton'onclick='window.closeModalForm()'>Cancel<i class='fas fa-paper-plane-o ml-1'></i></button></div></div></div></div><div class='overlay'></div></div>"
    }
}

Example

The built-in DemoModal plugin supports the Modal Form workflow. The example below shows how this plugin implements the GoModal method:

Copy 
function DemoModal_GoModal($params)
{
    $callback_url = $params['environment']['notify_url'];
    $section = "demoModal";
    $handler = <<<SCRIPT

            console.log('$section');
            document.getElementById('$section').style.display = 'inline';

            window.closeModalForm = function() {
                var paymentSection = window.document.getElementById("demo");
                if (paymentSection) {paymentSection.parentNode.removeChild(paymentSection);}
            
                checkout_completion();
                document.getElementById('$section').remove();
            };
            
            function getFormData() {
                var values = [];
                var els = document.getElementById('$section').getElementsByTagName("input");
                console.log(els);
                for (let el of els) {
                    values.push(el.id + "=" + el.value);
                    console.log(el.id + "=" + el.value);
                }
                return values.join("&");
            }
            
            window.callbackFromModal = function() {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {                        
                    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                        console.log(xhr);
                        modal_redirect(xhr.response);
                    }
                }
                xhr.open("POST", '$callback_url', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send("fromModal=true&" + getFormData());
                document.getElementById('$section').remove();
            };

SCRIPT;

    $html = <<<SCRIPT
    <style>.modal-wrapper {
    position:fixed;
    display:flex;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.7);
    z-index:999999;
}

.overlay {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
}

.modal-window {
   width:300px;
   height:500px;
   z-index:2;
}
</style>    <div class="modal show modal-wrapper" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">              <div class="modal-dialog modal-sm" role="document">                <div class="modal-content">                <div class="modal-header" dojoattachpoint="titleConNode"><button type="button" class="close" data-dojo-attach-event="ondijitclick:_onClose"><span aria-hidden="true">×</span>                </button><h3 class="modal-title">                    <span dojoattachpoint="titleNode">Bank account details</span> 
                <small dojoattachpoint="descriptionNode"></small></h3>                </div>                  <div class="modal-body mx-6">                    <div class="row">                          <div class="form-group">                              <label class="control-label" for="bic">BIC</label>                              <input type="text" id="bic" class="form-control input-sm input-text apsTextBox">                        </div>                    </div>                    <div class="row">                        <div class="form-group">                             <label class="control-label" for="iban">IBAN</label>                              <input type="text" id="iban" class="form-control validate">                          </div>                    </div>                  </div>                  <div class="modal-footer d-flex justify-content-center">                      <div class="btn-toolbar apsToolbar">                         <button type="button" class="btn btn-success apsButton" onclick="window.callbackFromModal()">Add<i class="fas fa-paper-plane-o ml-1"></i></button>                        <button type="button" class="btn btn-link apsButton" onclick="window.closeModalForm()">Cancel<i class="fas fa-paper-plane-o ml-1"></i></button>                    </div>                  </div>                </div>              </div>              <div class="overlay"></div>            </div>SCRIPT;

    return array(
        STATUS     => STATUS_MODAL,
        MODAL_FORM => array(
            'checkout_script_section' => $section,
            'checkout_script_handler' => $handler,
            'checkout_script_html'      => $html
        )
    );
}

See Also

© 2024 Ingram Micro, Inc. All Rights Reserved. Privacy Policy, Terms of Use and Legal

CloudBlue, an Ingram Micro business, uses cookies to improve the usability of our site. By continuing to use this site and/or logging in you are accepting the use of these cookies. For more information, visit our Privacy Policy.
I accept