Hosted checkout

Using Vyne payments with our hosted checkout is the simplest way to start taking payments through your application. There are three parties involved in the payment flow.

The hosted checkout is fast and simple to integrate, with no need to build any interfaces. Before you proceed, make sure you understand the payment flow.

The checkout experience has 3 phases, starting with redirection to bank selection and ending with returning to the merchant's application.

1. Redirect to bank selection

The API response body of a PIRPIR - Payment Initiation Request contains everything necessary to present the payment to the consumer. The hosted checkout supports two media types for interacting with consumers, to fit a range of use cases.

Media type

Use case

Description

URL

Checkout button - integrating into an existing e-commerce checkout flow.

Vyne is presented as an option at checkout when consumers make online purchases. When selected by the consumer, the consumer is taken to the hosted checkout.

URL

E-mail or SMS link - offline sales with need for deposit or full purchase, such as car showroom or furniture retail. Follow up payment for contracted services such as home or auto-repair.

A link is sent to the consumer by e-mail or SMS to request payment. When clicked by the consumer, the consumer is taken to the hosted checkout.

QR code

Presenting a QR code on-screen for a consumer to initiate payment, such as PoS retail.

A QR code is presented to the consumer on-screen or printed. When scanned on the consumer's device using the camera, the consumer is taken to the hosted checkout.

PIRPIR - Payment Initiation Request response

{
  "redirectUrl": "<redirect_url>",
  "qrCodeUrl": "<qr_code_url>",
  "requestId": "adca2b6a077de1f5",
  "mediaType": "URL"
}

Parameter

Description

redirectUrl

The URL of the hosted checkout page to be presented to consumers. This value is returned when mediaType is URL.

qrCodeUrl

The URL of the QR code which encodes the URL of the payment page. This value is returned when mediaType is QR.

Vyne handles the bank selection and consent in the hosted checkout experience. Consumers are required to:

  1. Select the bank they wish to make the payment from
  2. Consent to payment
  3. Proceed to their bank for authorisation

Mobile hand-off

The Vyne hosted checkout presents consumers with a QR code, enabling them to hand-off the payment process to another device. Scanning the QR code opens a URL which will direct the consumer to the checkout on their device, allowing them to use mobile banking on their device.

After the user has handed-off to mobile device and continued the payment flow, the checkout is kept alive on the original device, and shows helpful instructions to preserve continuity with the mobile payment flow.

👍

Try it out

Mobile hand-off still allows for a faster payment experience than cards, even if the payment flow has been initiated on a desktop device. By completing the payment flow on mobile, payment can be authorised using biometrics on the mobile device without having to sign in to the bank on desktop.

2. Bank authentication and confirmation

Authentication and confirmation happens in three steps:

  1. Once the consumer selects a bank and taps the Go to bank button in the hosted checkout, the bank's mobile banking app will launch automatically if installed on their device. If the consumer does not have the bank's mobile banking app installed on their device, the bank’s online banking sign in page will be opened in the browser.
  2. When redirected to the bank, the consumer can use biometrics or credentials to sign in to their account. The method used is dependent on the bank and the consumer's preferences.
  3. Once signed in, the consumer is required to confirm the transaction, which is done in a single step. Once confirmed, the payment is immediately initiated and funds are transferred. Fees may also be deducted upon confirmation of funds received.

Mobile deep linking

Vyne makes use of the latest mobile deep linking technology in order to automatically open and redirect users to their mobile banking app. Mobile deep linking ensures consumers experience the smoothest and fastest payment flow, allowing them to utilise biometric authentication to their banking app if enabled.

If you're building Vyne into a mobile app, ensure that your make use of deep linking in your application to allow consumers to return to your app directly from their mobile banking app. Learn more about mobile deep linking depending on the platform of your app:

When considering how you present the hosted checkout to your consumers, it's helpful to be aware of the limitations of mobile deep linking and its use with older web technologies:

  • Mobile deep linking does not work when rendering a page within an HTML frame, such as an iframe. For this reason, you should not present the hosted checkout within an iframe.
  • On Android devices you can use a WebView to show the hosted checkout within your application.

3. Return to merchant

  1. When the consumer has confirmed the payment in their mobile banking app or online banking, they're automatically redirected to the redirect URL provided in the PIRPIR - Payment Initiation Request.
  2. A payload is appended to the callback URL containing a status so you can render feedback to consumers immediately. Vyne also sends webhook notifications to give you real-time updates on payment status.

Did this page help you?