Redirect Customer
After creating a redirect session the customer has to be redirected to Zastrpay Redirect Website for generation of a transaction intent or QR Code.
Zastrpay is providing a js library for that, which can be included directly as a script:
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<button id="test" type="button">Test</button>
<script type="module">
import * as Zastrpay from "https://www.unpkg.com/@zastrpay/redirect-session@1.0.1/index.js"
const button = document.querySelector("#test");
button.addEventListener("click", () =>
Zastrpay.redirect({
token:
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgSldUIEJ1aWxkZ" +
"XIiLCJpYXQiOjE2NzM5NjU1NzUsImV4cCI6MTcwNTUwMTU3NSwiYXVkIjoid3d3LmV4YW1" +
"wbGUuY29tIiwic3ViIjoianJvY2tldEBleGFtcGxlLmNvbSIsIkdpdmVuTmFtZSI6Ikpva" +
"G5ueSIsIlN1cm5hbWUiOiJSb2NrZXQiLCJFbWFpbCI6Impyb2NrZXRAZXhhbXBsZS5jb20" +
"iLCJSb2xlIjpbIk1hbmFnZXIiLCJQcm9qZWN0IEFkbWluaXN0cmF0b3IiXX0.8KKEXtI1Z" +
"vNUAKPYZ3P8DTTT797phyLYsgtaUmZJf9k",
redirectUrl: "https://pay.dev.zastrpay.com",
}),
);
</script>
</body>
</html>
Alternatively the npm module can be used:
npm install @zastrpay/redirect-session --save
Example usage with typescript
import { redirect } from '@zastrpay/redirect-session';
// the operation to create an redirect session which contains the token and redirect url
const redirectSession = .....
redirect({
token: redirectSession.token,
redirectUrl: redirectSession.redirectUrl,
});
After the customer is redirected to Zastrpay, the customer authenticates and depending on the customer's account balance either a QR Code is generated and the customer is asked to go to a shop, or the transaction is completed immediately.
Either way, there will be a frontend redirect back to the merchant website (to the submitted in the previously described API call fields successUrl
, failureUrl
, abortUrl
and qrCodeSuccessUrl
.
Additionally, Zastrpay Backend will send webhook notifications send to Merchant Backend, which are explained in the next 2 sections.
Do not rely/use frontend redirects for updating the transaction status in the Merchant System, as these may be manipulated (e.g. triggered directly), and are unreliable (browser may crash, redirect may not work due to network down). Instead, implement the webhooks which (being executed on a backend-to-backend channel) are secure (api key + source IP restriction) and reliable (Zastrpay is retrying multiple times to send the notification).