Repository navigation
feat(POINT-3675): show customer instructions on the native APM form - #286
Merged
anatolii-niagin-cko merged 5 commits intoNov 9, 2026
Merged
Conversation
The legacy native APM client (used by Dynamic Checkout) showed the customer message and QR code only on the pending view. A form step can carry them too: Kkiapay Orange CI shows a QR code / payment link next to an optional OTP field. The new apm client and the mobile SDKs already render them. - The form view renders the message (markdown) and the QR code above the inputs when the step sends them; steps without instructions don't change. A rendering error is caught, so the form always shows. - The barcode is read from both API shapes: an object on GET native-payment and flat keys on process native-payment. - Links in the form message open in a new window (a separate showdown converter), so a payment link doesn't replace the merchant page. The pending view is unchanged. - Without the markdown library the message is plain text; an invalid base64 barcode draws no QR code. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Payment instructions can remain unusable when the response arrives before the Markdown or QR libraries load because the form never refreshes after those libraries become ready.
1 open issue
What changed in this PR
This PR adds customer instructions to the legacy native APM form used by Dynamic Checkout, supporting payment links and QR codes alongside input fields.
Changes:
- Render Markdown messages and QR codes above form inputs, supporting both API barcode formats.
- Use a separate Markdown converter to open form links in a new window, with rendering fallbacks.
- Add helper tests and bump the package version to
1.9.19.
| File | Description |
|---|---|
test/support/loadNamespace.ts |
Adds a loader for testing the instructions helper. |
test/nativeapm/customer-instructions.test.ts |
Tests instruction parsing, rendering, and fallbacks. |
src/nativeapm/views/form.ts |
Displays customer instructions above inputs. |
src/nativeapm/views/customer-instructions.ts |
Adds message and QR-code rendering helpers. |
src/nativeapm/references.ts |
Registers the new helper in the namespace build. |
src/nativeapm/nativeapm.ts |
Passes instructions and a dedicated Markdown converter to forms. |
package.json |
Bumps the version to 1.9.19. |
Review effort: Balanced
| }) | ||
|
|
||
| form.appendChild(paymentProviderImage) | ||
| this.appendCustomerInstructions(form) |
Contributor
Author
There was a problem hiding this comment.
Good catch, fixed in b484a62: the instructions are drawn again once both libraries are loaded (or failed to load). The inputs show right away.
Review follow-up: a form rendered before the markdown or QR code library loaded kept raw markdown or an empty QR code. The instructions are now drawn again once both libraries are loaded (or failed to load); the inputs are there from the start. Forms without instructions get no container. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
anatolii-niagin-cko
marked this pull request as ready for review
November 3, 2026 08:35
anatolii-niagin-cko
requested review from
a team and
lukasz-k-bieszczad-cko
and removed request for
a team
November 4, 2026 08:19
Resolve conflict in test/support/loadNamespace.ts — keep both loadNativeApmCustomerInstructions (this branch) and loadActionHandler + FakeElement (master). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The action image / QR sat flush-left: it was a fixed-width (15rem) block with no horizontal centering. Add auto side margins so it centers within its container on the form, pending and success views. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tomasz-pazdziurek-cko
approved these changes
Nov 6, 2026
anatolii-niagin-cko
deleted the
feat/POINT-3675/nativeapm-form-instructions
branch
November 9, 2026 09:47
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Dynamic Checkout renders native APMs with the legacy
nativeapmclient. Its form view shows only the inputs: the customer message and the QR code are shown on the pending view only.Kkiapay Orange CI needs a QR code (desktop) or a payment link (mobile) next to an optional OTP field on the same step. The new
apmclient and the mobile SDKs already render instructions next to a form; this brings the legacy client in line.Solution
native-payment, flat keys on POSTnative-payment.Demo
Tested on localstack with this build in Dynamic Checkout (desktop and mobile user agents, French and English): the QR code and link page, an empty Continue, the payment in the app, a typed code, the OTP fallback.
Checklist
yarn bump-versionNotes
sandboxv2test gateway) sends instructions with a form step; I checked every tessel9 gateway. The others send them with pending or redirect steps only, so they don't change. Same behaviour as the newapmclient and the SDKs.https://mpayment.orange-money.comlinks.checkout-cdn.Jira Issue
https://checkout.atlassian.net/browse/POINT-3675
🤖 Generated with Claude Code