Direct Integration - Scope
The direct integration sees the merchant site initiate the transaction when the consumer presses the merchants “Pay” button on their own checkout page.
Checkout currently supports three different operation modes when integrating directly, all of which are referred to individually within this document as scope.
Full Re-Direct
The consumer is redirected to the Checkout payment page hosted by us. As this is a full re-direct the consumer will leave the merchant site whilst the payment is being made and re-directed back once complete. Using this method ensures that the merchant site has no visibility of any card data as all sensitive data is entered on the hosted page.
The default user interface for the re-direct is shown below.
On the host website’s ‘Checkout’ page (the button where the consumer is provided with the option to pay) a JS-library link is required to be added with the method window.DNAPayments.openPaymentPage() chosen.
Within the window.DNAPayments.openPaymentPage() method the Payment Request parameters need to be supplied.
JavaScript Lightbox (iFrame)
As an alternative approach to the full re-direct Checkout offers the ability for the merchant to display a JavaScript Lightbox window on their site to accept payment. This approach is often preferred to a re-direct as it allows the consumer to appear to stay on the merchant site while making payment (the host site will still show in the background).
Checkout offers two configuration options around the provision of the JavaScript Lightbox. The first of which sees the content of the JavaScript Lightbox populated via an iFrame. This allows us to host the fields where the data is being entered and as such provides the protection from sensitive card data for the merchant.
On the host website’s ‘Checkout’ page (the button where the consumer is provided with the option to pay) a JS-library link is required to be added with the method window.DNAPayments.openPaymentIframeWidget() chosen.
Within the window.DNAPayments.openPaymentPage() method the Payment Request parameters need to be supplied.
JavaScript Lightbox (Locally Hosted)
The second JavaScript Lightbox option looks identical to the consumer but has one key difference - the code used to generate the data entry fields are hosted locally on the merchant website rather than hosted by us.
On the host website’s ‘Checkout’ page (the button where the consumer is provided with the option to pay) a JS-library link is required to be added with the method window.DNAPayments.openPaymentIframeWidget() chosen.
Within the window.DNAPayments.openPaymentPage() method the Payment Request parameters need to be supplied.
Locally Hosting typically requires you to handle raw card data and is discouraged. Unless specifically requested or required, this functionality is not enabled.
Branding
It is possible to apply custom branding to all the above operation modes for a merchant or partner, please contact us to discuss further or see some examples.