An agent’s payment UI is served by the PCI services vendor (e.g. PCI Pal). You can configure the UI to load in a webpage iframe or in an embedded browser.
To configure the UI to open in an iframe, create a dynamic form that submits two input values to the iframeUrl
location. The form requires the following data:
method="POST"
action="{iframeUrl}"
where {iframeUrl}
is the value of the ‘iframeUrl’ parameter returned by the request to the POST /api/v1/session
(Create agent assist session) endpointtarget="paymentframe"
where “paymentframe” is the name of the iframename="X-BEARER-TOKEN" value="{agentAccessToken}"
where {agentAccessToken}
is the value of the agentAccessToken
parameter returned by the request to the POST /api/v1/session
(Create agent assist session) endpointname="X-REFRESH-TOKEN" value="{agentRefreshToken}"
where {agentRefreshToken}
is the value of the agentRefreshToken
parameter returned by the request to the POST /api/v1/session
(Create agent assist session) endpointFor example:
<iframe name="paymentframe" src="about:blank"></iframe> ... <form action="https://<payment host URL>/view/59aab1be-d652-426e-a7a8-1bf4ca15e2ab/framed" id="initForm" target="paymentframe" method="POST"> <input name="X-BEARER-TOKEN" value="eyJ0...Nvtr" type="hidden"> <input name="X-REFRESH-TOKEN" value="f9d8...c999" type="hidden"> </form> <script> document.getElementById("initForm").submit(); </script> |
UI in an embedded browser
To configure the UI to open in an embedded browser, then open the URL specified in the iframeUrl
parameter returned by the request to the POST /v1/session
(Create agent assist session) endpoint with the following headers:
X-BEARER-TOKEN
- set the value of X-BEARER-TOKEN
to the value of the agentAccessToken
parameter returned by the request to the POST /v1/session
(Create agent assist session) endpointX-REFRESH-TOKEN
- set the value of X-REFRESH-TOKEN
to the value of the agentRefreshToken
parameter returned by the request to the POST /v1/session
(Create agent assist session) endpoint