Voucher widget

The Voucher widget presents the instructions or reference generated for a supported voucher or cash-based payment method. It uses an existing order token; it does not create or pay a second order.

Voucher lifecycleAsk Athia about this#

Open the widgetAsk Athia about this#

await DeunaSDK.initVoucherWidget({
  orderToken,
  language: 'en',
  callbacks: {
    onSuccess: (data) => showVoucherInstructions(data),
    onError: (error) => showRecovery(error),
    onClosed: () => showPaymentMethods(),
    onPaymentProcessing: () => disableDuplicateActions(),
  },
});

await deunaSDK.initVoucherWidget({
  orderToken,
  mode: 'modal',
  language: 'en',
  callbacks: {
    onSuccess: showVoucherInstructions,
    onError: showRecovery,
    onClosed: showPaymentMethods,
    onDownloadFile: ({type, data}) => saveVoucher({type, data}),
  },
});

let callbacks = VoucherCallbacks()
callbacks.onSuccess = { data in showVoucherInstructions(data) }
callbacks.onError = { error in showRecovery(error) }
callbacks.onClosed = { _ in showPaymentMethods() }

deunaSDK.initVoucher(
    orderToken: orderToken,
    callbacks: callbacks,
    language: "en"
)

val callbacks = VoucherCallbacks().apply {
    onSuccess = { data -> showVoucherInstructions(data) }
    onError = { error -> showRecovery(error) }
    onClosed = { showPaymentMethods() }
}

deunaSDK.initVoucherWidget(
    context = this,
    orderToken = orderToken,
    callbacks = callbacks,
    language = "en"
)

ParametersAsk Athia about this#

Completion and payment stateAsk Athia about this#

onSuccess means the voucher experience completed its supported client action. Voucher settlement commonly occurs later, outside the app. Keep the order pending in your interface until your backend observes the final state through a verified webhook or an API retrieval.

Receipts and file deliveryAsk Athia about this#

A reference-payment response can contain a reference_processors array. Each available processor entry can provide a barcode, expiration date, processor name, and hosted HTML or PDF receipt URL. Because this field is an array, the hosted Voucher experience can present more than one receipt when the processed payment returns multiple reference processors.

The processor decides which receipt fields are present. Do not synthesize a PDF URL from a barcode or assume that every reference method has both HTML and PDF formats.

For React Native, branch on the discriminator instead of assuming the payload is always a file body:

import {DownloadType} from '@deuna/react-native-sdk';

const onDownloadFile = async ({type, data}) => {
  if (type === DownloadType.URL) {
    await openTrustedReceiptUrl(data);
    return;
  }

  await saveBase64VoucherImage(data);
};

Validate any URL before opening or fetching it, use HTTPS, keep downloaded files inside an appropriate protected or user-selected location, and do not log receipt contents. A saved receipt is customer-facing evidence; it is not authoritative payment-settlement confirmation.

Mobile and accessibilityAsk Athia about this#

• Present Voucher from a visible screen, not from a background callback.
• Keep download, copy, and close actions reachable at 200% text size.
• On React Native, request only the storage or sharing capability needed by your save implementation.
• Restore focus to the control that opened the modal and announce load errors through the platform accessibility API.
• Test the reference with long merchant names, long localized instructions, and narrow devices.

TroubleshootingAsk Athia about this#

Related referencesAsk Athia about this#