Generate barCode URLs against the new endpoint

Adyen · Nov 6, 2024 · a3ea7b5 · a3ea7b5
1 parent 0ebf396
commit a3ea7b5
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/.changeset/clever-pants-cover.md b/.changeset/clever-pants-cover.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+A new barcode endpoint has been created on the backend. This PR generates barCode URLs against that endpoint.
diff --git a/packages/lib/src/components/Boleto/components/BoletoVoucherResult/BoletoVoucherResult.tsx b/packages/lib/src/components/Boleto/components/BoletoVoucherResult/BoletoVoucherResult.tsx
@@ -12,7 +12,7 @@ const BoletoVoucherResult = props => {
     const getImage = useImage();
     const { reference, expiresAt, downloadUrl } = props;
     const barcodeReference = reference.replace(/[^\d]/g, '').replace(/^(\d{4})(\d{5})\d{1}(\d{10})\d{1}(\d{10})\d{1}(\d{15})$/, '$1$5$2$3$4');
-    const barcodeUrl = `${loadingContext}barcode.shtml?data=${barcodeReference}&barcodeType=BT_Int2of5A&fileType=png`;
+    const barcodeUrl = `${loadingContext}utility/v1/barcode.png?data=${barcodeReference}&type=itf&clientKey=${props.clientKey}`;
 
     const paymentMethodType = 'boletobancario'; // overwrite the bank specific type of boleto, e.g. 'boletobancario_santander', to a more generic form
 

diff --git a/packages/lib/src/components/Oxxo/components/OxxoVoucherResult/OxxoVoucherResult.tsx b/packages/lib/src/components/Oxxo/components/OxxoVoucherResult/OxxoVoucherResult.tsx
@@ -13,7 +13,8 @@ const OxxoVoucherResult = (props: OxxoVoucherResultProps) => {
     const getImage = useImage();
     const { alternativeReference, reference, expiresAt, merchantReference, downloadUrl } = props;
 
-    const barcodeUrl = `${loadingContext}barcode.shtml?data=${reference}&barcodeType=BT_Code128C&fileType=png`;
+    const barcodeUrl = `${loadingContext}utility/v1/barcode.png?data=${reference}&type=code128c&clientKey=${props.clientKey}`;
+
     const voucherDetails: VoucherDetail[] = [
         ...(expiresAt
             ? [

diff --git a/packages/lib/src/components/Oxxo/types.ts b/packages/lib/src/components/Oxxo/types.ts
@@ -10,4 +10,5 @@ export interface OxxoVoucherResultProps {
     downloadUrl?: string;
     ref?: any;
     onActionHandled?: (rtnObj: ActionHandledReturnObject) => void;
+    clientKey?: string;
 }
diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
@@ -18,7 +18,7 @@ import useAutoFocus from '../../../utils/useAutoFocus';
 import { ANALYTICS_DOWNLOAD_STR, ANALYTICS_QR_CODE_DOWNLOAD } from '../../../core/Analytics/constants';
 import { PREFIX } from '../Icon/constants';
 
-const QRCODE_URL = 'barcode.shtml?barcodeType=qrCode&fileType=png&data=';
+const QRCODE_URL = 'utility/v1/barcode.png?type=qrCode&data=';
 
 class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
     private timeoutId;
@@ -153,7 +153,11 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
     render({ amount, url, brandLogo, brandName, countdownTime, type, onActionHandled }: QRLoaderProps, { expired, completed, loading }) {
         const { i18n, loadingContext } = useCoreContext();
         const getImage = useImage();
-        const qrCodeImage = this.props.qrCodeData ? `${loadingContext}${QRCODE_URL}${this.props.qrCodeData}` : this.props.qrCodeImage;
+
+        const qrCodeImage = this.props.qrCodeData
+            ? `${loadingContext}${QRCODE_URL}${this.props.qrCodeData}&clientKey=${this.props.clientKey}`
+            : this.props.qrCodeImage;
+
         const finalState = (image, message) => {
             const status = i18n.get(message);
             useA11yReporter(status);