Altinn / Altinn/app-frontend-react

Payment

Open
#1,736 2 comments 0 reactions 3 assignees Claimed by @Magnusrm View on GitHub
Epic kind/feature-request
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Frontend support for payment process step
The payment process step consists of a page with information about the order, and a button to go to the payment provider. The actual payment happens outside of the app. After payment is complete, the backend will get confirmation of this and redirect the user back to the same step. The frontend should then show a confirmation that the payment is completed, with a button to go to the next process step.

- [Design](https://github.com/Altinn/app-lib-dotnet/issues/399#issuecomment-1900380147)
- [Test app](https://dev.altinn.studio/repos/ttd/app-process-tests)
- [App-Lib branch](https://github.com/Altinn/app-lib-dotnet/tree/feat/payment-nets)

Payment step needs to:
- Have its own case in `ProcessWrapper`
- Have its own context provider that will identify the correct data element from the instance/process state and fetch and provide the order data.
- This way should be fine as long as we don't provide full customization, and will not lock us into any specific way to access this data should we make full customization available in the future.
- Have an "order overview" which shows the order data.
- Have a button to trigger the payment action. This should get a 30x response with a redirect url that we should redirect the browser to to go to the payment provider(?)
- If full customization is eventually provided, this should be done using the `CustomButton` since this is not a process action. In that case, the custom button needs to be able to follow a redirect somehow(?)
- Have a back button
- Periodically check the payment state in case the payment was completed elsewhere, and load the next process step if the payment has been completed (similar to the feedback step)
- Separate page for when payment is complete(?)

Considerations:
- Can we use Nets' test environment in end-to-end tests?
- Update DevTools permission editor to work with generic action permissions for easier testing

## Related issues
- https://github.com/Altinn/app-lib-dotnet/issues/399
- https://github.com/Altinn/app-lib-dotnet/issues/334

## Customization
It is probably best to create an MVP with only minor customization options like overriding displayed text using pre-defined text resources.

However, full customization could become a requirement in the future, so we should be mindful not to paint ourselves into a corner when implementing version 1.

### Full customization (out of scope)
- Should be able to specify a layout set
- Should be able to access other data models to display text with variables and use expressions
- Should be able to access the order data in text resources and expressions. This can either be done by:
- Treating the payment data as any ordinary data model (read only!). Or
- Creating a special data source for accessing this data in expressions and text resources.

### Additional Information

_No response_
```[tasklist]
### Tasks
- [x] https://github.com/Altinn/app-frontend-react/issues/1896
- [ ] https://github.com/Altinn/app-frontend-react/issues/1898
- [ ] https://github.com/Altinn/app-frontend-react/issues/1899
- [ ] https://github.com/Altinn/app-frontend-react/issues/1900
- [ ] https://github.com/Altinn/app-frontend-react/issues/1901
- [ ] https://github.com/Altinn/app-frontend-react/issues/1902
- [ ] https://github.com/Altinn/app-frontend-react/issues/1903
- [ ] https://github.com/Altinn/app-frontend-react/issues/1904
- [ ] https://github.com/Altinn/app-frontend-react/issues/1905
- [ ] https://github.com/Altinn/app-frontend-react/issues/1906
- [ ] https://github.com/Altinn/app-frontend-react/issues/1907
- [ ] https://github.com/Altinn/app-frontend-react/issues/1908
- [ ] https://github.com/Altinn/app-frontend-react/issues/1909
- [ ] https://github.com/Altinn/app-frontend-react/issues/1950
- [ ] https://github.com/Altinn/app-frontend-react/issues/2101
- [ ] https://github.com/Altinn/app-frontend-react/issues/2102
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.