Skip to content

Commit

Permalink
update receipt layout documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Magnusrm committed May 27, 2024
1 parent 0a0d097 commit c66a02e
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 10 deletions.
12 changes: 8 additions & 4 deletions content/app/guides/payment/frontend-configuration/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ weight: 3
Add a new layoutSet folder for your payment task, and update your layout-sets.json.

Your layout-sets.json may look something like this:

```json
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout-sets.schema.v1.json",
Expand All @@ -29,6 +30,7 @@ Your layout-sets.json may look something like this:
]
}
```

In your payment layoutSet folder, add a new file, payment.json, with the following layout:

```json
Expand All @@ -50,7 +52,7 @@ In your payment layoutSet folder, add a new file, payment.json, with the followi

This is required for payment to work, without it, your payment step will just render a white page.

### 2. Add OrderDetails component to your form.
### 2. Add OrderDetails component to your form

This will display a table showing the items the user will need to pay for.
You can put this anywhere in your app, but we recommend at the very least putting it on the last page before the user is prompted to pay.
Expand All @@ -72,9 +74,10 @@ the data fields used to calculate the order lines.
}
```

### 3. Add layout for the receipt
### 3. Add a layout for the receipt (Optional)

In order to display a legally valid receipt to the customer, you need to add a custom layout for it.
If you would like to display additional information by adding components the receipt presented to the customer,
you need to add a custom layout for it.

Add a custom layout file, f ex `receiptLayout.json`.

Expand Down Expand Up @@ -111,4 +114,5 @@ Update your layout set Settings.json file, specifying your receipt layout in the
}
```

This is all you need to render a valid receipt, however, you can also customize it by adding additional components to it, for example a Paragraph component if you want to add additional information.
This is all you need to render a valid receipt, however, you can also customize it by adding additional components to
`receiptLayout.json`, for example a Paragraph component if you want to add additional information.
13 changes: 7 additions & 6 deletions content/app/guides/payment/frontend-configuration/_index.nb.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ weight: 3
Legg til en ny layoutSet-mappe for betalingsoppgaven din, og oppdater `layout-sets.json` filen.

Din `layout-sets.json` kan se slik ut:

```json
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout-sets.schema.v1.json",
Expand All @@ -29,6 +30,7 @@ Din `layout-sets.json` kan se slik ut:
]
}
```

I din payment layoutSet mappe, legg til en ny fil, `payment.json`, med følgende layout:

```json
Expand All @@ -50,7 +52,7 @@ I din payment layoutSet mappe, legg til en ny fil, `payment.json`, med følgende

Dette er nødvendig for at betaling skal fungere. Uten dette vil betalingssteget ditt bare vise en hvit side.

### 2. Legg til OrderDetails-komponenten i skjemaet ditt.
### 2. Legg til OrderDetails-komponenten i skjemaet ditt

Dette vil vise en tabell som viser elementene brukeren må betale for.
Du kan plassere dette hvor som helst i appen din, men vi anbefaler å i det minste sette det på den siste siden før brukeren blir bedt om å betale.
Expand All @@ -72,9 +74,9 @@ datafeltene som brukes til å beregne ordrelinjene.
}
```

### 3. Legg til layout for kvitteringen
### 3. Legg til layout for kvitteringen (Valgfritt)

For å vise en juridisk gyldig kvittering til kunden, må du legge til en tilpasset layout for den.
Hvis du vil vise mer informasjon på kvittering som vises til kunden, må du legge til en egen tilpasset layout for den.

Legg til en layout fil, f.eks. `receiptLayout.json`.

Expand Down Expand Up @@ -111,6 +113,5 @@ Oppdater din layoutSet-settings.json-fil, og spesifiser din kvitteringslayout i
}
```

Dette er alt du trenger for å vise en gyldig kvittering, men du kan også tilpasse den ved å legge til ytterligere komponenter, for eksempel en paragrafkomponent hvis du ønsker å legge til ytterligere informasjon.


Dette er alt du trenger for å vise en gyldig kvittering, men du kan også tilpasse `receiptLayout.json` ved å legge til
ytterligere komponenter, for eksempel en paragrafkomponent hvis du ønsker å legge til ytterligere informasjon.

0 comments on commit c66a02e

Please sign in to comment.