diff --git a/.changeset/stupid-papayas-dig.md b/.changeset/stupid-papayas-dig.md
new file mode 100644
index 00000000..61e26763
--- /dev/null
+++ b/.changeset/stupid-papayas-dig.md
@@ -0,0 +1,5 @@
+---
+"@godaddy/react": patch
+---
+
+This PR adds payment authorization integration to the MercadoPago checkout button component, implementing preference ID generation for brick initialization
diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx
index d43b11df..53950b6d 100644
--- a/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx
+++ b/packages/react/src/components/checkout/payment/checkout-buttons/mercadopago/mercadopago.tsx
@@ -9,6 +9,7 @@ import {
} from '@/components/checkout/payment/utils/use-confirm-checkout';
import { useIsPaymentDisabled } from '@/components/checkout/payment/utils/use-is-payment-disabled';
import { useLoadMercadoPago } from '@/components/checkout/payment/utils/use-load-mercadopago';
+import { useAuthorizeCheckout } from '@/components/checkout/payment/utils/use-authorize-checkout';
import { formatCurrency } from '@/components/checkout/utils/format-currency';
import { Button } from '@/components/ui/button';
import { useGoDaddyContext } from '@/godaddy-provider';
@@ -39,12 +40,21 @@ export function MercadoPagoCheckoutButton() {
const form = useFormContext();
const { isMercadoPagoLoaded } = useLoadMercadoPago();
const confirmCheckout = useConfirmCheckout();
+ const authorizeCheckout = useAuthorizeCheckout();
const [error, setError] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const [isBrickReady, setIsBrickReady] = useState(!!brickController);
+ const [isBrickReady, setIsBrickReady] = useState(false);
const elementId = 'mercadopago-brick-container';
+ const getPreferenceId = async () => {
+ const response = await authorizeCheckout.mutateAsync({
+ paymentToken: '',
+ paymentType: PaymentMethodType.MERCADOPAGO,
+ paymentProvider: PaymentProvider.MERCADOPAGO,
+ });
+ return response?.transactionRefNum;
+ }
+
const handleSubmit = useCallback(
async ({ formData }: any) => {
isSubmitting = true;
@@ -89,11 +99,10 @@ export function MercadoPagoCheckoutButton() {
if (canInitialize) {
if (brickController) {
- // Brick already exists, just mark as ready
+ // Brick already exists, onReady callback will mark as ready
setIsBrickReady(true);
} else if (brickCreationPromise) {
- // Brick creation in progress, wait for it
- brickCreationPromise.then(() => setIsBrickReady(true));
+ // Brick creation in progress, onReady/onError callbacks will handle state
} else {
// Create new brick
const renderBrick = async () => {
@@ -115,10 +124,13 @@ export function MercadoPagoCheckoutButton() {
const { bricksBuilderInstance: bricksBuilder } =
getMercadoPagoInstance(mercadoPagoConfig.publicKey);
+
+ const mercadoPagoPreferenceId = await getPreferenceId();
brickController = await bricksBuilder.create('payment', elementId, {
initialization: {
amount: total,
+ preferenceId: mercadoPagoPreferenceId,
payer: { email: 'dummy@testuser.com' },
},
customization: {
@@ -135,7 +147,7 @@ export function MercadoPagoCheckoutButton() {
},
callbacks: {
onReady: () => {
- setIsLoading(false);
+ setIsBrickReady(true);
const brickContainer = document.getElementById(elementId);
const formElement = brickContainer?.querySelector('form');
if (formElement) {
@@ -147,15 +159,18 @@ export function MercadoPagoCheckoutButton() {
}
},
onError: () => {
- setError(t.errors.errorProcessingPayment);
- setIsLoading(false);
+ // Only treat as initialization failure if the brick never became ready.
+ // Card validation errors are handled by the brick's own UI.
+ if (!brickController) {
+ setError(t.errors.failedToInitializePayment);
+ setIsBrickReady(false);
+ }
},
},
});
- setIsBrickReady(true);
} catch (_err) {
- setError(t.errors.errorProcessingPayment);
+ setError(t.errors.failedToInitializePayment);
setIsBrickReady(false);
brickCreationPromise = null;
}
@@ -184,7 +199,7 @@ export function MercadoPagoCheckoutButton() {
isMercadoPagoLoaded,
mercadoPagoConfig?.publicKey,
elementId,
- t.errors.errorProcessingPayment,
+ t.errors.failedToInitializePayment,
]);
const handleClick = async () => {
@@ -215,9 +230,16 @@ export function MercadoPagoCheckoutButton() {
size='lg'
type='button'
onClick={handleClick}
- disabled={isPaymentDisabled || isLoading || !isBrickReady}
+ disabled={isPaymentDisabled || authorizeCheckout.isPending || !isBrickReady}
>
- {t.payment.payNow}
+ {authorizeCheckout.isPending && !error ? (
+ <>
+
+ {t.payment.payNow}
+ >
+ ) : (
+ t.payment.payNow
+ )}
) : (