Pay MCP

This document describes the steps required to integrate PayMCP into an EvoBuilder-generated project and enable the Orchestrator Oc component. Follow this guide when implementing PayMCP in a real product.

Introduction | Access Evo

1. Configure the MCP in EvoBuilder

Open EvoBuilder and navigate to MCP Settings.

Set the MCP URL to:

https://web-pay-mcp-uks-dev.azurewebsites.net/mcp

Set the MCP name:
```
PAY_MCP
```

2. Use the MCP in Prompting

When generating your application with EvoBuilder, include the following prompt:

Using the MCP, integrate the Orchestrator Oc.

This enables EvoBuilder to automatically include the Orchestrator Oc component based on the MCP definition.

3. Add OC Registry Script in `index.html`

After EvoBuilder finishes generating the project:

Open index.html.

In the <head> section, add the OC client scripts for your target environment:

Environment	PaySuite OC Registry Script	Pay MFE Registry Script
Demo	`<script src="https://oc-registry.stage.guestline.app/registry/oc-client/client.js"></script>`	`<script src="https://mfe.pay.accessacloud.com/registry/oc-client/client.js"></script>`
Production	`<script src="https://oc-registry.eu.guestline.app/registry/oc-client/client.js"></script>`	`<script src="https://mfe.pay.accessacloud.com/registry/oc-client/client.js"></script>`

Example (Demo):

<script src="https://oc-registry.stage.guestline.app/registry/oc-client/client.js"></script>
<script src="https://mfe.pay.accessacloud.com/registry/oc-client/client.js"></script>

Development environments use https://oc-registry.ci.guestline.app/registry/oc-client/client.js and https://mfe-test.pay.accessacloud.com/registry/oc-client/client.js.

4. orchestratorOc Component Requirements

Your generated project will contain a component named orchestratorOc. For development purposes, this component may contain hard-coded values.

import { EvoMfeApp, EvoMfesProvider } from '@access-evo/react-app-api';
import { useState } from 'react';

const COMPONENT_OPTIONS = [
  { value: 'onboarding', label: 'Onboarding' },
  { value: 'transactions-list', label: 'Transactions List' },
  { value: 'adyen-dispute', label: 'Adyen Dispute' },
  { value: 'pay-reporting', label: 'Pay Reporting' },
] as const;

// THIS ARE TEST CREDENTIALS FOR LOCAL DEV AND SANDBOX ENVIRONMENT, DO NOT USE IN PRODUCTION, REPLACE WITH YOUR OWN CREDENTIALS
const SANDBOX_APPLICATION_ID = '6bc086b7-4c22-4a0b-a246-37393eeebec9';
const SANDBOX_APPLICATION_SUBSCRIPTION_ID = 'dab36729-fbcb-48ee-9fc0-0f7aa283eccb';

// If you get the error: "Error rendering component: , error: Error loading component: view engine 'oc-template-react' not supported"
// you must add the following script in the <head> of your public/index.html, above
// <script src="https://app-framework.workspace.accessacloud.com/test/mfes"></script>
//
// <script src="https://oc-registry.ci.guestline.app/registry/oc-client/client.js"></script>
// For DEMO use: <script src="https://oc-registry.stage.guestline.app/registry/oc-client/client.js"></script>
// For PROD use: <script src="https://oc-registry.eu.guestline.app/registry/oc-client/client.js"></script>

// Example <head> section for public/index.html to support OC template React components:
//
// <head>
//   <meta charset="UTF-8" />
//   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//   <title>Evo App</title>
//   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:[email protected]" />
//   <style>
//     html,
//     body {
//       width: 100%;
//       height: 100%;
//       margin: 0;
//       font-family: 'Inter', sans-serif;
//     }
//     body {
//       background-color: #f4f5f7;
//     }
//     .dark body {
//       background-color: #191d22;
//     }
//   </style>
//   <script type="importmap">
//     {
//       "imports": {
//         "react": "https://esm.sh/[email protected]",
//         "react-dom/client": "https://esm.sh/[email protected]/client",
//         "i18next": "https://esm.sh/[email protected]",
//         "react-i18next": "https://esm.sh/[email protected]?external=react,i18next"
//       }
//     }
//   </script>
//   <!-- Add this script for OC template React support -->
//   <script src="https://oc-registry.ci.guestline.app/registry/oc-client/client.js"></script>
//   <script src="https://app-framework.workspace.accessacloud.com/test/mfes"></script>
// </head>

const orchestratorOc = () => {
  const [componentName, setComponentName] = useState<string>(COMPONENT_OPTIONS[0].value);

  return (
    <div className="p-6 max-w-4xl mx-auto bg-white text-black">
      <div>
        <label className="block text-sm font-medium mb-1">Component Name</label>
        <select
          value={componentName}
          onChange={(e) => setComponentName(e.target.value)}
          className="w-full px-3 py-2 border rounded-md bg-white"
        >
          {COMPONENT_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

      <div className="border-t pt-6">
        <h2 className="text-xl font-semibold mb-4">Component Preview</h2>
        {/* * For EVO Tab products, wrap your component with <EvoIframeMfesProvider> to enable seamless integration. https://evo-docs.access-workspace.com/docs/mfes/hosting-mfes

        * Example usage:
          <EvoIframeMfesProvider>   
          <EvoMfeApp
            key={`${componentName}-${APPLICATION_ID}`}
            instanceId="b11aa345-55e9-4672-8a67-cd5f980c37cb"
            name="pay-group-payments-component-orchestrator"
            version="x.x.12"
            parameters={{
              componentName,
              componentVersion: 'x.x.x',
              applicationId: APPLICATION_ID,
              applicationSubscriptionId: APPLICATION_SUBSCRIPTION_ID,
            }}
          />
          </EvoIframeMfesProvider> */}
        <EvoMfesProvider
          hostName="YOUR_HOST_NAME"
          geography="uk"
          environment="preprod"
          getEvoUser={() =>
            Promise.resolve({
              id: '',
              firstName: '',
              lastName: '',
              emailAddress: '',
              organisation: {
                id: '',
                name: '',
              },
            })
          }
          getAccessToken={() => Promise.resolve('mocked-access-token-for-testing')}
        >
          <EvoMfeApp
            key={`${componentName}-${SANDBOX_APPLICATION_ID}`}
            instanceId="b11aa345-55e9-4672-8a67-cd5f980c37cb"
            name="pay-group-payments-component-orchestrator"
            version="x.x.6"
            parameters={{
              componentName,
              componentVersion: 'x.x.x',
              applicationId: SANDBOX_APPLICATION_ID,
              applicationSubscriptionId: SANDBOX_APPLICATION_SUBSCRIPTION_ID,
            }}
          />
        </EvoMfesProvider>
      </div>
    </div>
  );
};

export default orchestratorOc;

Important

In a production integration, these values must not remain hard-coded. A real product integrating the Orchestrator Oc must provide these fields dynamically, meaning that:

User and organisation information should come from the product's authentication and profile services.
Tokens (accessToken, buttonToken) must be obtained from secure backend API calls.
Application identifiers should reflect the product's actual configuration.

1. Configure the MCP in EvoBuilder​

2. Use the MCP in Prompting​

3. Add OC Registry Script in index.html​

4. orchestratorOc Component Requirements​

Important​

1. Configure the MCP in EvoBuilder

2. Use the MCP in Prompting

3. Add OC Registry Script in `index.html`

4. orchestratorOc Component Requirements

Important