multiplexing-example

Integration of VGS Collect.js with VGS Muptiplexing App

The VGS Multiplexing app facilitates payment multiplexing with integrations to 120+ gateways. This example shows how you can secure data through VGS Collect.js while using our payment gateway multiplexer.

Flow diagram

1. Run Multiplexing application

Follow the instructions and run Multiplexing app. Please reach out to our [email protected] and request access to the repo if you're interested in the product.

2. Setup Collect.js Form

• Download and open locally multiplexing.html file in the browser.

• Change the link below to the latest VGS Collect library link:

<script src="https://js.verygoodvault.com/vgs-collect/<version>/vgs-collect.js"></script>

Full list of available versions with release notes you can find in our Changelog.

• Replace the placeholders to your vault id and environment in order to use Collect form:

const form = VGSCollect.create(
  "<vault-id>",
  "<environment>",
  function (state) {}
);

3. Setup Inbound Route

Skip this step if you already have configured Inbound Route for the Multiplexing app.

• Download inbound.yaml provided above and replace destination_override_endpoint in line 3 with the Multiplexing app public URL.

• Import fixed inbound.yaml file to the Dashboard. Navigate to the Dashboard -> Routes -> Add Route -> YAML file:

3. Submit Form

Fill in and submit the form with the test data. With provided Collect.js setup, a secure form will make a request to the /api/v1/financial_instruments endpoint with the following data structure:

{
  "data": {
    "type":"financial_instruments",
    "attributes": {
      "instrument_type":"card",
      "details": {
        "first_name":"John",
        "last_name":"Doe",
        "number":"4111111111111111",
        "month":"1",
        "year":"2029",
        "verification_value":"111"
      }
    }
  }
}

The response should contain aliased card number:

"number": "XXXX-XXXX-XXXX-1111"