diff --git a/examples/bricks/CardPayment/2-UpdateAmount.tsx b/examples/bricks/CardPayment/2-UpdateAmount.tsx
new file mode 100644
index 0000000..0fe157c
--- /dev/null
+++ b/examples/bricks/CardPayment/2-UpdateAmount.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Card, { useCardPaymentBrick } from '../../../src/bricks/cardPayment';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+
+const App = () => {
+ const { update } = useCardPaymentBrick();
+
+ return (
+ <>
+
+
+ {
+ console.log(param);
+ }}
+ />
+ >
+ );
+};
+
+export default App;
diff --git a/examples/bricks/Payment/2-UpdateAmount.tsx b/examples/bricks/Payment/2-UpdateAmount.tsx
new file mode 100644
index 0000000..e20ef5d
--- /dev/null
+++ b/examples/bricks/Payment/2-UpdateAmount.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Payment, { usePaymentBrick } from '../../../src/bricks/payment';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+
+const App = () => {
+ const { update } = usePaymentBrick();
+
+ const initialization = {
+ amount: 100,
+ preferenceId: '207446753-ea3adb2e-a4f2-41dd-a656-11cb01b8772c',
+ };
+
+ const customization = {
+ paymentMethods: {
+ atm: 'all',
+ ticket: 'all',
+ bankTransfer: ['pix'],
+ creditCard: 'all',
+ debitCard: 'all',
+ mercadoPago: 'all',
+ },
+ };
+
+ return (
+ <>
+
+
+ {
+ console.log(param);
+ }}
+ />
+ >
+ );
+};
+
+export default App;
diff --git a/package.json b/package.json
index 27bf540..83f41b5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@mercadopago/sdk-react",
- "version": "0.0.13",
+ "version": "0.0.14",
"description": "Mercado Pago SDK React",
"main": "index.js",
"keywords": [
@@ -10,7 +10,7 @@
"Checkout"
],
"scripts": {
- "start": "start-storybook -p 6006",
+ "start": "npm run build && start-storybook -p 6006",
"build": "rm -rf ./dist && tsc -b ./tsconfig.prod.json && cp package.json ./dist && cp LICENSE ./dist && cp README.md ./dist",
"test": "jest --c ./jest.config.ts"
},
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index ae10997..7d85848 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -1,4 +1,5 @@
-import { Field } from "../secureFields/util/types";
+import { UpdateValues } from '../bricks/util/types/common';
+import { Field } from '../secureFields/util/types';
export {};
@@ -7,10 +8,22 @@ declare global {
MercadoPago: any;
paymentBrickController: {
unmount: () => void;
+ /**
+ * Updates data in Payment Brick preserving the current instance.
+ *
+ * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/payment-brick/additional-customization/update-data Payment Brick # Default rendering} documentation.
+ */
+ update: (updateValues: UpdateValues) => boolean;
};
cardPaymentBrickController: {
unmount: () => void;
getFormData: () => Promise;
+ /**
+ * Updates data in Card Payment Brick preserving the current instance.
+ *
+ * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/card-payment-brick/additional-customization/update-data Payment Brick # Default rendering} documentation.
+ */
+ update: (updateValues: UpdateValues) => boolean;
};
walletBrickController: {
unmount: () => void;
diff --git a/src/bricks/cardPayment/index.tsx b/src/bricks/cardPayment/index.tsx
index cbecb59..ad3a54b 100644
--- a/src/bricks/cardPayment/index.tsx
+++ b/src/bricks/cardPayment/index.tsx
@@ -8,6 +8,7 @@ import {
} from '../util/initial';
import { initBrick } from '../util/renderBrick';
import { TCardPayment } from './type';
+import { UpdateValues } from '../util/types/common';
/**
* Card Payment Brick allows you to offer payments with credit and debit card at yout checkout.
@@ -74,4 +75,18 @@ const CardPayment = ({
return ;
};
+const useCardPaymentBrick = () => {
+ const update = (updateValues: UpdateValues) => {
+ if (window.cardPaymentBrickController) {
+ window.cardPaymentBrickController.update(updateValues);
+ } else {
+ console.warn(
+ '[Checkout Bricks] Card Payment Brick is not initialized yet, please try again after a few seconds.',
+ );
+ }
+ };
+ return { update };
+};
+
export default CardPayment;
+export { useCardPaymentBrick };
diff --git a/src/bricks/payment/index.tsx b/src/bricks/payment/index.tsx
index 360a0a6..b110c71 100644
--- a/src/bricks/payment/index.tsx
+++ b/src/bricks/payment/index.tsx
@@ -8,6 +8,7 @@ import {
} from '../util/initial';
import { initBrick } from '../util/renderBrick';
import { TPaymentType } from './type';
+import { UpdateValues } from '../util/types/common';
/**
* Payment Brick allows you to add several payment methods to a store and save card data for future purchases with just one Brick.
@@ -32,7 +33,7 @@ import { TPaymentType } from './type';
*
* @tutorial {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/payment-brick/introduction Payment Brick documentation} for more information.
*/
-const BrickPayment = ({
+const Payment = ({
onReady = onReadyDefault,
onError = onErrorDefault,
onSubmit = onSubmitDefault,
@@ -42,7 +43,7 @@ const BrickPayment = ({
locale,
}: TPaymentType) => {
useEffect(() => {
- // CardPayment uses a debounce to prevent unnecessary reRenders.
+ // Payment uses a debounce to prevent unnecessary reRenders.
let timer: ReturnType;
const PaymentBrickController = {
settings: {
@@ -73,4 +74,18 @@ const BrickPayment = ({
return ;
};
-export default BrickPayment;
+const usePaymentBrick = () => {
+ const update = (updateValues: UpdateValues) => {
+ if (window.paymentBrickController) {
+ window.paymentBrickController.update(updateValues);
+ } else {
+ console.warn(
+ '[Checkout Bricks] Payment Brick is not initialized yet, please try again after a few seconds.',
+ );
+ }
+ };
+ return { update };
+};
+
+export default Payment;
+export { usePaymentBrick };
diff --git a/src/bricks/util/types/common.ts b/src/bricks/util/types/common.ts
index 580be52..637859b 100644
--- a/src/bricks/util/types/common.ts
+++ b/src/bricks/util/types/common.ts
@@ -152,3 +152,10 @@ export interface IBrickCustomVariables {
borderRadiusFull?: string;
formPadding?: string;
}
+
+/**
+ * Available update values.
+ */
+export type UpdateValues = {
+ amount: number;
+};