Launching the Payment & E-Mandate Setup Flow

In order to launch the Open Banking Payment and E-Mandate signup flow, the merchant needs:

• A User Interface Payment ID (the userInterfacePaymentId returned in the Create Payment request).
• A reference to the Direct Debit scheme to be used.
  • For GBP payments, a Bacs Service User Number - SUN is required.
  • For EUR payments, the SEPA Scheme Identifier is required.
  • In both Bacs and SEPA, this identifier is passed in the creditorSchemeIdentifier. Call GET /schemes (List Schemes) to retrieve your scheme identifier.

These elements are required for both the CHECKOUT and the REDIRECT integrations.

CHECKOUT Mode

In CHECKOUT mode, in order to launch the Payment & E-Mandate flow, you will need to:

• Call the Create Payment endpoint to retrieve the userInterfacePaymentId.
• Apply CSS and JS file references to your payment page.
• Add a Pay button, which calls the showPaymentUI function.

Calling the Create Payment Endpoint

The Open Banking payment endpoint returns a payment identifier on a successful invocation.

To generate a payment ID:

1. Generate a server-to-server call to /payments.
2. Ensure that you have referenced your API Key or OAuth token in the request.
3. The /payments service is described in Create Payment.
4. In the response, you will need to store the userInterfacePaymentId.

Adding the CSS and JS File References

On your payment page you will need to add the following:

For Sandbox

<script src="https://sandbox.nuapay.com/tpp-ui/js/nuapay-open-banking.js"></script>
<link rel="stylesheet" type="text/css" href="https://sandbox.nuapay.com/tpp-ui/css/nuapay-open-banking.css" />

For Production

<script src="https://api.nuapay.com/tpp-ui/js/nuapay-open-banking.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.nuapay.com/tpp-ui/css/nuapay-open-banking.css" />

Adding The Open Banking Pay Button

At this point you have:

• Retrieved the userInterfacePaymentId (via the Create Payment service).
• Added the JS and CSS references to your payment page.

To enable the PAY button you will need to add an onclick event. See the (GBP Bacs) example below:

<a class="btn btn-primary" href="#" onclick="NuapayOpenBanking.showPaymentUI('123456', 772d0ef5-596b-43de-a6a0-832c9ab7a7a5';'https://sandbox.nuapay.com/tpp-ui/’);">Pay Now</a>

The function takes three parameters:

1. The creditorSchemeId (i.e. the SUN; 123456 in the example above): this is the actual SUN and not its encoded value.
2. The userInterfaceIdentifier (772d0ef5-596b-43de-a6a0-832c9ab7a7a5 in the example above)
3. The url (https://sandbox.nuapay.com/tpp-ui/)

Note that you will need to specify the correct URL based on whether you are testing or working in Production:

REDIRECT Mode

To launch the Payment and E-Mandate flow In REDIRECT mode:

• Call the Create Payment endpoint to retrieve the userInterfacePaymentId.
• Constuct the required URL to pass to the PSU as a payment link.

In the standard REDIRECT Open Banking payment, a URL similar to the following is used:

To launch the Payment and E-Mandate flow, the URL becomes:

Note that the URL:

• Includes /paymentui/
• The value of the SUN is the 6-digit identifier (not the encoded identifier).