jocke/bilhej
1
0
Fork 0
Code Issues Pull requests 2 Projects Releases 1 Packages Wiki Activity Actions

Clarify Swish reference order ID on the payment page.

Browse source 
The full UUID is required as the Swish message but was easy to miss when
embedded only in instruction text.

- Show beställnings-ID in a dedicated box above payment summary
- Point Swish instructions to that ID instead of repeating inline
- Add PaymentRedirect unit test for full order ID display
This commit is contained in:
Joakim Mörling 2026-05-21 14:49:50 +02:00
parent dfb3e0dedc
commit b9a0bdb318
2 changed files with 45 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/__tests__/PaymentRedirect.spec.ts
View file

@ -74,6 +74,18 @@ describe('PaymentRedirect', () => {
expect(wrapper.text()).toContain('ABC123')
})
it('shows full order id for Swish reference', async () => {
const orderId = 'b82fb935-369e-4402-9d72-667bf59e4e29'
const { wrapper } = await mountPage(orderId, 'HDO732')
await vi.waitFor(() => {
expect(wrapper.text()).toContain('Beställnings-ID')
expect(wrapper.text()).toContain(orderId)
expect(wrapper.text()).toContain(
'Ange beställnings-ID ovan som meddelande i Swish-appen',
)
})
})
it('shows Swish payment button', async () => {
const { wrapper } = await mountPage()
await vi.waitFor(() => {

41
frontend/src/pages/PaymentRedirect.vue
View file

@ -54,6 +54,11 @@ async function confirmPayment() {
Registreringsnummer: <strong>{{ route.query.plate || '—' }}</strong>
</p>
<div class="payment__order-ref">
<p class="payment__order-ref-label">Beställnings-ID</p>
<p class="payment__order-id">{{ orderId }}</p>
</div>
<div class="payment__summary">
<div class="payment__row">
<span class="payment__label">Att betala</span>
@ -74,8 +79,7 @@ async function confirmPayment() {
<p class="payment__swish-label">Swisha till</p>
<p class="payment__swish-number">{{ swishNumber }}</p>
<p class="payment__swish-instruction">
Ange <strong class="payment__order-id">{{ orderId }}</strong>
som meddelande i Swish-appen.
Ange beställnings-ID ovan som meddelande i Swish-appen.
</p>
<p class="payment__swish-instruction">
Tryck sedan på knappen nedan för att bekräfta.
@ -140,11 +144,37 @@ async function confirmPayment() {
}
.page__plate {
margin: 0 0 var(--space-xl) 0;
margin: 0 0 var(--space-md) 0;
font-size: 0.875rem;
color: var(--color-muted);
}
.payment__order-ref {
margin: 0 0 var(--space-xl) 0;
padding: var(--space-md);
background: var(--color-border-light);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.payment__order-ref-label {
margin: 0 0 var(--space-xs) 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.payment__order-id {
margin: 0;
font-family: ui-monospace, monospace;
font-size: 0.8125rem;
color: var(--color-ink);
word-break: break-all;
line-height: 1.5;
}
.payment__summary {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
@ -205,11 +235,6 @@ async function confirmPayment() {
margin-top: var(--space-xs);
}
.payment__order-id {
word-break: break-all;
color: var(--color-ink);
}
.payment__submit {
width: 100%;
}