Payment Initiation Service Provider Checkout Page implementation Options
Your Payment Initiation checkout page may be implemented in one of the following ways:
- REDIRECT
- SELF_HOSTED
- SELF_HOSTED_CALLBACK
- CHECKOUT
Tip: The CHECKOUT integration can be problematic in the mobile flow on some devices. For that reason we recommend that clients who want to use the Nuapay User Interface select the REDIRECT option. For users who currently use CHECKOUT, your integration will continue to be supported but we recommend that you consider moving to the REDIRECT flow. Please contact your Account Manager if you require assistance with this.
The implementation you choose determines if you:
- Use the default Nuapay user interface or implement your own design.
- Choose the
merchantPostAuthUrl; this is the URL that is used to signal to merchants/partners that the PSU is finished interacting with the ASPSP.
What is the Callback URL?
To understand the Callback URL, and how it is used in Nuapay Open Banking, take the following “Happy” flow for an Open Banking payment…
In an Open Banking payment the PSU:
- Decides to pay via an account-to-account transfer (an Open Banking payment) and is presented with a list of banks from which to choose.
- Selects the bank with which he/she holds an account.
- Is re-directed to the selected bank’s online banking system.
- Logs on to the online banking system as normal and approves the payment.
- Is automatically logged off from the online banking session (having approved the open banking payment) and is redirected back to the open banking eco system using the callback URL.
The implementation approach you take determines on which URL (defined in the callback) your payer finishes his/her Open Banking payment journey.
Implementation Overview
The following summarises the options available to both merchants and partners (acting on behalf of merchants):
| Implementation |
Details |
| Redirect |
In this implementation mode:
- The merchant/partner creates a payment using the POST /payments endpoint with
integrationType = REDIRECT and the merchantPostAuthUrl supplied as a mandatory parameter.
- The TPP creates the payment and sends back the userInterfacePaymentId to the merchant/partner.
- The merchant/partner redirects the PSU to the redirect URI specified with the `userInterfacePaymentId`. (The merchant/partner must build a URI that can be used on a web page or sent by e-mail to the customer, for example).
- The PSU uses the URI to launch the TPP-UI with the ASPSP selection window being opened in a new browser window.
- The TPP processes the callback.
- The TPP redirects the PSU to the merchantPostAuthURl with parameters indicating success/failure and the paymentId so that the merchant/partner can correlate the redirect with the originally created payment.
|
| Self-Hosted |
In this implementation mode:
- The user interface is handled by you for Bank Selection.
- The signal that the PSU and ASPSP have finished interacting is sent via a POST to the URL defined in the
merchantPostAuthUrl of the /tpp/payment request. For more on this see Processing the Callback
|
| Self-Hosted-Callback |
In this implementation mode:
- You handle the user interface and you also manage the ASPSP OAuth Callback URL
- The signal that the PSU and ASPSP are finished interacting is sent via a POST to the URL defined in the
merchantPostAuthUrl of the /tpp/payment request.
- The details of how to process this callback differs from the SELF_HOSTED flow. You need to process the OAUTH callback from the ASPSP directly, parse the information and send it back to the Nuapay TPP platform. For more on this see Processing the Callback
- This option is useful if you want to style your callback handler or have mobile apps handle the callbacks using mobile deeplinking.
- In the context of mobile apps, Deep Linking consists of using a uniform resource identifier (URI) that is opened within a mobile app rather than simply launching a Web browser.
|
| Checkout* |
In this implementation mode:
- You use the Nuapay user interface for the Bank Selection and you don’t set any
merchantPostAuth URL in the request to /tpp/payments.
- The signal that the PSU and ASPSP have finished interacting is sent via a JavaScript event to the Web page hosting the NuaPay Payment User Interface.
- You will need to configure a Listener for this close event.
* If you want to use the Nuapay UI we recommend opting for the REDIRECT approach.
|
For a good overview and introduction to
Mobile Deep Linking see this
Wikipedia article
Note that it is possible to interact with the Nuapay TPP as a merchant or as a partner. For a high-level view of the endpoints you need to call, based on your integration, jump to Quick Start for Partners or Quick Start for Merchants.
If you think you know the implementation that best suits your needs, select from the options below to dive right in: