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; +};