Skip to main content

Payment process

Detail information selection

As mentioned before there are two pages for the selection of the details of the order. One of the two is in case the order is free and the other is for payment needed tickets.
For the free order we simply need to ask the user to give his wished type of delivery method, but if the user needs to pay further down the line, we need to ask for his preferred payment type as well as his wished currency for the payment.
Within the routing section we have to simply add the two pages with a slight difference in the path.

AppRouter.js code-snipped

Code for free ticket

Code for payment-needed tickets

Each of the three Http-Call uses an Enum in their URL to set their corresponding attribute in the order. As to make the process of displaying them all easier, we created an array with their information and Enum-number. But in case you were to only allow certain types of attribute configuration you can simply remove those attributes from the array.

Recap and payment

After having gathered all the needed information about the order and customer, we can display a quick recap of the whole order and all their chosen settings. Afterwards we will have to split the code again. For orders that are entirely free, you should simply request the user to make an action in which he confirms the order and states that everything is correct. Thereafter, you can simply confirm the order and the process has been completed.
Yet for order that need a payment action it is different. In such cases the user needs to refer on to our system. Our system will then give a response if something can be executed on our own system, as an example an Invoice. But if were to pay with a creditcard we will display a pop-up which is based on “Datatrans” a 3rd-party service we incorporate for such cases.

As the user can now see his recap and possibly might want to delete/remove a ticket, we will also add such a button to re-route him to an extra page for that function. 

Recap page code

Datatrans explaination

In case a payment is not handled directly by our own system will make a pop-up appear in which the remaining payment-methods are usable. But to make that pop-up appear we need to prepare certain data so that we can properly start the datatrans process. 
The metioned data will be created within the API-call "DigitalSignature". This will hand over all the needed data in their correct form. Afterwards we will fill a form with the data and will start the datatrans, which needs to be imported in the index.html, with the "window.Datatrans.startpayment" and over our form to said call. Below you can specifically find the the code, this code is copyable, since it has no reference besides the form in the "html" part.

To be able to access the Datatrans script we need to import it to the website. The file we need to import is a simple JavaScript file which is ready made by the Datatrans-Developer for usage. 
This File needs to be imported in the index.html which can be found in the public folder. This is needed to be done this way to due to, how react compiles the project, when the project gets launched. 

The line that needs to be inserted:
<script src=""></script>

All the displayed information has been put together by the Developmentteam. This page is here to help 3rd party users to impement our system correctly.