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

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function DetailsFree() {
//Variables

const { orderId, eventId } = useParams();
    let navigate = useNavigate();
    const baseUrl = "api.ticketino.com";
    const maxIdleTime = 10;

const [userDeliveryMethod, setUserDeliveryMethod] = useState();

//Array of possible selections
    const delivery = [
        { "display": "Print at home", "value": 1 },
        { "display": "Post mail", "value": 2 },
        { "display": "Print and handout manually", "value": 3 },
    ];

//Methods
    useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

}).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });
        }

}, []);

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);;
        const currentDate = new Date();

if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateDetails() {

if (checkIdleTime()) {
            setDeliviery();

nextPage();
        } else {
            navigate("/home");
        }

}

function setDeliviery() {
        axios.put(`${baseUrl}/ShopBasket/Order/DeliveryMethod/${userDeliveryMethod}`).then((result) => {
            localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function nextPage() {

updateDetails();
        navigate(`/recap/${orderId}/${eventId}`);
    }

function previousPage() {
        navigate(`/form/${orderId}/${eventId}`);
    }

//HTML Display

return (
        <div className="page-container">
            <section className="section" id="sectionHome">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Detail</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the detail-information, you whish for your transaction to upheld!
                            </p>
                        </div>
                        <div className="container">
                            <div className="deliveryDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished Deliverymethod</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => { setUserDeliveryMethod(e.currentTarget.value) }}
                                    >
                                        <option defaultValue="CHF">CHF</option>
                                        {delivery.map((object, key) => {
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })

}
                                    </select>
                                </div>
                                <></>
                            </div>

</div>
                    </div>
                    <div className="flex-end">
                        <button className="btn button btn-light" onClick={() => { updateDetails() }} >
                            Procced
                        </button>
                        <button className="btn mx-2 button btn-light" onClick={() => { previousPage() }} >
                            Previous
                        </button>
                    </div>
                </div>
            </section>
        </div>
    )
}

export default DetailsFree;

Code for payment-needed tickets

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Details() {
    //Variables

const { orderId, eventId } = useParams();
    let navigate = useNavigate();
    const baseUrl = "api.ticketino.com";
    const maxIdleTime = 10;

const [userCurrencySelect, setUserCurrencySelect] = useState();
    const [userDeliveryMethod, setUserDeliveryMethod] = useState();
    const [userPaymentMethod, setUserPaymentMethod] = useState();

//Array of possible selections
    const currency = [
        { value: "CHF", display: "CHF" },
        { value: "EUR", display: "EUR" },
        { value: "USD", display: "USD" },
        { value: "GBP", display: "GBP" },
    ]

const delivery = [
        { "display": "Print at home", "value": 1 },
        { "display": "Post mail", "value": 2 },
        { "display": "Print and handout manually", "value": 3 },
    ];

const payment = [

{ "display": "Mastercard", "value": 1 },
        { "display": "Invoice", "value": 2 },
        { "display": "Reservation", "value": 3 },
        { "display": "Organizer", "value": 4 },
        { "display": "Free", "value": 5 },
        { "display": "Point of Sale", "value": 6 },
        { "display": "Visa", "value": 7 },
        { "display": "Amex", "value": 8 },
        { "display": "Postfinance", "value": 9 },
        { "display": "Paypal", "value": 10 },
        { "display": "Sofort", "value": 11 },
        { "display": "SepaDirectDebit", "value": 12 },
        { "display": "Creditcard on site", "value": 13 },
        { "display": "Twint", "value": 14 },
        { "display": "External Payment", "value": 15 },
        
    ]

//Methods
    useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });
            }).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });
        }

}, []);

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);;
        const currentDate = new Date();

if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateDetails() {

if (checkIdleTime()) {

setCurrency();
            setPayment();
            setDeliviery();
            nextPage();

} else {
            navigate("/home");
        }
    }

function setCurrency() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/Currency/${userCurrencySelect}`).then((result) => {

localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function setPayment() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/PaymentType/${userPaymentMethod}`).then((result) => {

localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function setDeliviery() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/DeliveryMethod/${userDeliveryMethod}`).then((result) => {

localStorage.setItem("lastInteraction", new Date());

}).catch((error) => {

});
    }

function nextPage() {

navigate(`/recap/${orderId}/${eventId}`);
    }

function previousPage() {
        navigate(`/form/${orderId}/${eventId}`);
    }

//HTML Display

return (
        <div className="page-container">
            <section className="section" id="sectionHome">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Details</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the detail-information, you whish for your transaction to upheld!
                            </p>
                        </div>
                        <div className="container">
                            <div className="currencyDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished currency</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => {setUserCurrencySelect(e.currentTarget.value)}}
                                    >
                                        <option defaultValue=""></option>
                                        {currency.map((object, key) => {
                                            //map through allowed values for selection
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })
                                        }
                                    </select>
                                </div>
                            </div>
                            <></>
                            <div className="paymentDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished paymentmethod</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => { setUserPaymentMethod(e.currentTarget.value) }}
                                    >
                                        <option defaultValue=""></option>
                                        {payment.map((object, key) => {
                                            //map through allowed values for selection
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })

}
                                    </select>
                                </div>
                            </div>
                            <></>
                            <div className="deliveryDiv" >
                                <h3 className="mb-4 row text text-light">Select your wished deliverymethod</h3>
                                <div className="mb-4 row">
                                    <select
                                        className="selectNum form-select"
                                        aria-label=""
                                        onChange={(e) => { setUserDeliveryMethod(e.currentTarget.value) }}
                                    >
                                        <option defaultValue=""></option>
                                        {delivery.map((object, key) => {
                                            //map through allowed values for selection
                                            return (
                                                <option value={object.value} key={key}>{object.display}</option>
                                            )
                                        })}
                                    </select>
                                </div>
                            </div>                           
                            <div className="flex-end">
                                <button className="btn button btn-light" onClick={() => { updateDetails() }} >
                                    Procced
                                </button>
                                <button className="btn mx-2 button btn-light" onClick={() => { previousPage() }} >
                                    Previous
                                </button>
                            </div>

</div>
                    </div>
                </div>
            </section>
        </div>
    )
}

export default Details;

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 3^rd-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

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Recap() {
//Variables
    const { orderId, eventId } = useParams();
    const baseUrl = "api.ticketino.com";
    let navigate = useNavigate();
    const maxIdleTime = 10;

const [orderInformation, setOrderInformation] = useState();
    const [address, setAddress] = useState();

const handledByDatatrans = [1, 7, 8, 9, 10, 11, 12, 14];
    const handledByTicketino = [2, 4, 5, 6];

//Methods

useEffect(() => {

let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {

axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//To be made calls for display
                retriveOrderInformation();

}).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display
            retriveOrderInformation();
        }

}, []);
    function removeTicket() {

navigate(`/delete/${orderId}/${eventId}`)
    }
    function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);;
        const currentDate = new Date();

if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function retriveOrderInformation() {

if (checkIdleTime()) {

axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {

setOrderInformation(result.data);

}).catch((error) => {
                //if order doesnt exist anymore, if someone entered via url

navigate("/home");
            });

axios.get(`${baseUrl}/Order/${orderId}/Address`).then((result) => {

setAddress(result.data);
            }).catch((error) => {

});
        } else {
            navigate("/home");
            
        }
        
    }

function confirmOrder() {
        axios.put(`${baseUrl}/ShopBasket/Order/${orderId}/Confirm`).then((result) => { navigate("/home") }).catch((error) => { });
    }

function finalStep() {
        if (orderInformation.totalPrice > 0) {

//check if paymentType is handled by Ticektino or Datatrans
            if (handledByDatatrans.includes(orderInformation.paymentMethodId)) {
                //Datatrans start
                startDatatrans();
            }
            else if (handledByTicketino.includes(orderInformation.paymentMethodId)) {
            }
        } else if (orderInformation.totalPrice = 0) {

}
    }

function returnToPreviousPage() {
        navigate(`form/${orderId}/${eventId}`);
    }

function startDatatrans() {
        //this will start the pop-up of the datatrans

axios
            .get(`https://localhost:44336/Datatrans/${orderId}/DigitalSignature`)
            .then((res) => {
                let element = document.getElementById("paymentForm");

//For showcase only, for real code include comment below and remove the data within the <form>
                // element.setAttribute("data-merchant-id", res.data.merchantId);
                element.setAttribute("data-amount", res.data.amount);
                element.setAttribute("data-currency", res.data.currency);
                element.setAttribute("data-refno", res.data.referenceNumber);
                element.setAttribute("data-reqType", res.data.reqType);
                element.setAttribute(
                    "data-upp-return-target",
                    res.data.uppReturnTarget
                );
                element.setAttribute("data-paymentMethod", res.data.paymentMethod);
                element.setAttribute("data-sign", res.data.digitalSignature);

for (const key in res.data.userInfo) {
                    element.setAttribute(key, res.data.userInfo[key]);
                }

for (const key in res.data.merchantSpecificParameters) {
                    element.setAttribute(key, res.data.merchantSpecificParameters[key]);
                }

// start datatrans
                startDatatransPayment();
            });
    }

function startDatatransPayment() {
        window.Datatrans.startPayment({
            form: "#paymentForm",
        });
    }

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="sectionTicket">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Your information</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please confirm your information if they are correct!
                            </p>
                        </div>
                        <div className="container">
                            <div>
                                <div className="row">
                                    <label className="col-2 text text-light"><h6>Firstname:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.firstName}</p>
                                    </div>
                                </div>
                                <></>
                                <div className="row">
                                    <label className="col-2 text text-light"><h6>Lastname:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.name}</p>
                                    </div>

</div>

<></>
                                <div className="row">

<label className="col-2 text text-light "><h6>Email:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.email}</p>
                                    </div>

</div>
                                <></>
                                <div className="row">

<label className="col-2 text text-light "><h6>Street:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{address?.street}</p>
                                    </div>
                                </div>

<></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>PLZ and City:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light">
                                            {address?.postCode} {address?.city}
                                        </p>
                                    </div>

</div>
                                <></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>Curreny:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{orderInformation?.currency}</p>
                                    </div>
                                </div>

<></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>Total price:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{orderInformation?.totalPrice}</p>
                                    </div>
                                </div>

<></>
                                <div className="row">
                                    <label className="col-2 text text-light "><h6>Amount of tickets:</h6></label>
                                    <div className="col-9">
                                        <p className="text text-light mb-1">{orderInformation?.tickets.length}</p>
                                    </div>
                                </div>
                                <></>
                            </div>

<div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { finalStep() }}>Finalice</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { returnToPreviousPage() }}>Return</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { removeTicket() }}>Remove Ticket</button>
                            </div>
                        </div>
                        <form id="paymentForm" data-merchant-id="1100004624"></form>
                    </div>
                </div>
            </section>
        </div>

)
}

export default Recap;

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.

function startDatatrans() {
        //this will start the pop-up of the datatrans

axios
            .get(`https://${baseUrl}/Datatrans/${orderId}/DigitalSignature`)
            .then((res) => {
                let element = document.getElementById("paymentForm");

//For showcase only, for real code include comment below and remove the data within the <form>
                // element.setAttribute("data-merchant-id", res.data.merchantId);
                element.setAttribute("data-amount", res.data.amount);
                element.setAttribute("data-currency", res.data.currency);
                element.setAttribute("data-refno", res.data.referenceNumber);
                element.setAttribute("data-reqType", res.data.reqType);
                element.setAttribute(
                    "data-upp-return-target",
                    res.data.uppReturnTarget
                );
                element.setAttribute("data-paymentMethod", res.data.paymentMethod);
                element.setAttribute("data-sign", res.data.digitalSignature);

for (const key in res.data.userInfo) {
                    element.setAttribute(key, res.data.userInfo[key]);
                }

for (const key in res.data.merchantSpecificParameters) {
                    element.setAttribute(key, res.data.merchantSpecificParameters[key]);
                }

// start datatrans
                startDatatransPayment();
            });
    }

function startDatatransPayment() {
        window.Datatrans.startPayment({
            form: "#paymentForm",
        });
    }

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="https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.js"></script>