4. Testing & Troubleshooting

For API integration testing of the PaymentRequest API, please refer to this detailed guide: Testing & integration - PaymentRequest API

Happy path UI testing

Successful payment - Pay By Bank

Successful payment - Bank Transfer

Exception Handling

The Pay by Bank UX solution includes exception handling so that merchants do not need to manage these complexities.

Should merchants want to simulate exception scenarios, they are detailed here for the UAT environment. There are particular PayIDs which trigger exception scenarios such as insufficient funds to assist you with error handling and end to end testing.

Pay by Bank - Ineligible PayID

Pay by Bank - Payment cannot be processed

Pay by Bank - Agreement not approved in time

Pay by Bank - Insufficient funds

Bank Transfer - overpayment

Handling of overpayment for a specified amount. Transaction complete with overpayment automatically refunded.

Bank Transfer - partial payment

Partial payment of specified amount. Automatic update with the remaining amount to pay.

UAT Test PayIDs

Refer to test accounts section for your own testing.

       <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
        window.addEventListener('message', (event) => {
            console.log('Event Data ' + JSON.stringify(event.data))
            console.log('Event Origin ' + JSON.stringify(event.origin))
            console.log('Event Ports ' + JSON.stringify(event.ports))
      if (event.data.EventType === 'UserInterface') {
            const clientIframe = document.getElementById('client-iframe');
            clientIframe.height = event.data.Data.height;
            const height = document.getElementById('height');
            height.innerText = event.data.Data.height;
        }
        if (event.data.EventType === 'PaymentRequest') {
            const status = document.getElementById('payment-request-status');
            status.innerText = event.data.Data.PaymentRequestStatus.status;
        }
    })

    const updateUrl = () => {
        const input = document.getElementById('payment-request');
        const url = input.value;
        const iframe = document.getElementById('client-iframe');
        iframe.src = url;
    }

</script>
</head>
<body>
<div>
    <div>
        <label for="payment-request">Put the encoded id of PR</label>
        <input id="payment-request" data-test="url-input"/>
        <button onclick="updateUrl()" data-test="submit">Submit</button>
    </div>
    <div>
        <div>Status:</div>
        <div data-test="payment-request-status" id="payment-request-status"></div>
    </div>
    <div>
        <div>Height:</div>
        <div data-test="height" id="height"></div>
    </div>
    <iframe id="client-iframe"
            title="PayID payment"
            src=""
            style="border: 1px solid #000000; width: 100%;"
    />
</div>
<div>
</div>
<script>
 </script>
</body>
</html>