Merge pull request #116 from icaldana/release/0.0.20

Release 0.0.20
mercadopago · Dec 17, 2024 · c6e8ad5 · c6e8ad5
2 parents 0392c6c + 289c711
commit c6e8ad5
Show file tree

Hide file tree

Showing 46 changed files with 197 additions and 97 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -1,14 +1,16 @@
 repos:
-  - repo: https://github.com/mercadolibre/fury_websec-git-hooks
-    rev: v1.0.5
+  - repo: https://github.com/melisource/fury_websec-git-hooks
+    rev: v2.0.0
     hooks:
       - id: pre_commit_hook
         stages: [commit]
       - id: post_commit_hook
         stages: [post-commit]
-  - repo: https://github.com/mercadolibre/fury_datasec-git-hooks
-    rev: 1.0.1
+  - repo: https://github.com/melisource/fury_datasec-git-hooks
+    rev: 1.2.0
     hooks:
       - id: pre_commit_hook
         stages: [commit]
         verbose: true
+      - id: post_commit_hook
+        stages: [post-commit]
diff --git a/README.md b/README.md
@@ -329,21 +329,27 @@ const cardToken = await createCardToken({
 
 ## Run SDK project
 
-To use Mercado Pago React SDK, follow the steps:
+> Replace the `<YOUR_PUBLIC_KEY>` on `examples/contants` with your public key.
 
-Install project:
+To run Mercado Pago React SDK, follow the steps:
+
+Install project dependencies:
 
 ```
-npm i
+npm install
 ```
 
-Execute project build:
+Execute project build (_optional_):
 
 ```
-npm build
+npm run build
 ```
 
-Execute `npm run start` to initialize storybook.
+Execute storybook:
+
+```
+npm run start
+```
 
 <br/>
 

diff --git a/examples/bricks/BrandBrick/0-Simple.tsx b/examples/bricks/BrandBrick/0-Simple.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Brand from '../../../src/bricks/brand';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-bfe30303-c7de-4da3-b765-c4be61b4f88b', {
+initMercadoPago(PUBLIC_KEY, {
   locale: 'es-AR',
 });
 

diff --git a/examples/bricks/BrandBrick/1-Visual-Customization.tsx b/examples/bricks/BrandBrick/1-Visual-Customization.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Brand from '../../../src/bricks/brand';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-bfe30303-c7de-4da3-b765-c4be61b4f88b', {
+initMercadoPago(PUBLIC_KEY, {
   locale: 'es-AR',
 });
 

diff --git a/examples/bricks/CardPayment/0-Simple.tsx b/examples/bricks/CardPayment/0-Simple.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Card from '../../../src/bricks/cardPayment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 const App = () => {
   return (
     <Card

diff --git a/examples/bricks/CardPayment/1-Customization.tsx b/examples/bricks/CardPayment/1-Customization.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Card from '../../../src/bricks/cardPayment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const customization = {
@@ -25,7 +26,7 @@ const App = () => {
       .then((cardFormData) => {
         console.log('cardFormData received, creating payment...', cardFormData);
       })
-      .catch((error) => {});
+      .catch((error) => console.log(error));
   }
 
   return (

diff --git a/examples/bricks/CardPayment/2-UpdateAmount.tsx b/examples/bricks/CardPayment/2-UpdateAmount.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Card, { useCardPaymentBrick } from '../../../src/bricks/cardPayment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const { update } = useCardPaymentBrick();

diff --git a/examples/bricks/CardPayment/3-Custom-ContainerId.tsx b/examples/bricks/CardPayment/3-Custom-ContainerId.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Card from '../../../src/bricks/cardPayment';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
+
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
+
+const App = () => {
+  return (
+    <Card
+      initialization={{ amount: 100 }}
+      id="custom-container-id"
+      onSubmit={async (param) => {
+        console.log(param);
+      }}
+    />
+  );
+};
+
+export default App;
diff --git a/examples/bricks/Payment/0-Simple.tsx b/examples/bricks/Payment/0-Simple.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Payment from '../../../src/bricks/payment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const initialization = {

diff --git a/examples/bricks/Payment/1-Visual-Customization.tsx b/examples/bricks/Payment/1-Visual-Customization.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Payment from '../../../src/bricks/payment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const initialization = {

diff --git a/examples/bricks/Payment/2-UpdateAmount.tsx b/examples/bricks/Payment/2-UpdateAmount.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Payment, { usePaymentBrick } from '../../../src/bricks/payment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const { update } = usePaymentBrick();

diff --git a/examples/bricks/Payment/3-Review-Confirm-Simple.tsx b/examples/bricks/Payment/3-Review-Confirm-Simple.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import Payment from '../../../src/bricks/payment';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+import { PUBLIC_KEY } from '../../constants';
 
-initMercadoPago('TEST-d198443d-7e9f-4e5f-a770-e5b23ae627cb', { locale: 'es-MX' });
+initMercadoPago(PUBLIC_KEY, { locale: 'es-MX' });
 
 // This feature is temporarily exclusive for MLM (México) 🇲🇽 and MLA (Argentina) 🇦🇷
 const App = () => {

diff --git a/examples/bricks/Payment/4-Review-Confirm-Full.tsx b/examples/bricks/Payment/4-Review-Confirm-Full.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Payment from '../../../src/bricks/payment';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-d198443d-7e9f-4e5f-a770-e5b23ae627cb', { locale: 'es-MX' });
+initMercadoPago(PUBLIC_KEY, { locale: 'es-MX' });
 
 // This feature is temporarily exclusive for MLM (México) 🇲🇽 and MLA (Argentina) 🇦🇷
 const App = () => {

diff --git a/examples/bricks/Payment/5-Marketplace.tsx b/examples/bricks/Payment/5-Marketplace.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Payment from '../../../src/bricks/payment';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const ExamplePaymentBrickMarketplace = () => {
   return (

diff --git a/examples/bricks/StatusScreen/0-Simple.tsx b/examples/bricks/StatusScreen/0-Simple.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import StatusScreen from '../../../src/bricks/statusScreen';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const initialization = {

diff --git a/examples/bricks/StatusScreen/1-Visual-Customization.tsx b/examples/bricks/StatusScreen/1-Visual-Customization.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import StatusScreen from '../../../src/bricks/statusScreen';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const initialization = {

diff --git a/examples/bricks/StatusScreen/2-Error-Status.tsx b/examples/bricks/StatusScreen/2-Error-Status.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import StatusScreen from '../../../src/bricks/statusScreen';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-2b00e5a0-b421-4588-b9cb-846a553d760e', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const initialization = {

diff --git a/examples/bricks/StatusScreen/3-3DS-Challenge.tsx b/examples/bricks/StatusScreen/3-3DS-Challenge.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import StatusScreen from '../../../src/bricks/statusScreen';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 import { IStatusScreenBrickInitialization } from '../../../src/bricks/statusScreen/types';
 
-initMercadoPago('TEST-2b00e5a0-b421-4588-b9cb-846a553d760e', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   const initialization: IStatusScreenBrickInitialization = {

diff --git a/examples/bricks/WalletBrick/0-Simple.tsx b/examples/bricks/WalletBrick/0-Simple.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83');
+initMercadoPago(PUBLIC_KEY);
 
 const ExampleSimpleWalletBrick = () => {
   return <Wallet initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }} />;

diff --git a/examples/bricks/WalletBrick/1-Visual-Customization.tsx b/examples/bricks/WalletBrick/1-Visual-Customization.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83');
+initMercadoPago(PUBLIC_KEY);
 
 const ExampleVisualCustomizationWalletBrick = () => {
   return (

diff --git a/examples/bricks/WalletBrick/2-Preference-onSubmit.tsx b/examples/bricks/WalletBrick/2-Preference-onSubmit.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83');
+initMercadoPago(PUBLIC_KEY);
 
 const ExampleOnSubmitWalletBrick = () => {
   function onSubmit() {

diff --git a/examples/bricks/WalletBrick/3-Hide-Value-Prop.tsx b/examples/bricks/WalletBrick/3-Hide-Value-Prop.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83');
+initMercadoPago(PUBLIC_KEY);
 
 const ExampleVisualCustomizationWalletBrick = () => {
   return (

diff --git a/examples/bricks/WalletBrick/4-ValueProp-Customization.tsx b/examples/bricks/WalletBrick/4-ValueProp-Customization.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83');
+initMercadoPago(PUBLIC_KEY);
 
 const ExampleValuePropCustomizationWalletBrick = () => {
   return (

diff --git a/examples/bricks/WalletBrick/5-Marketplace.tsx b/examples/bricks/WalletBrick/5-Marketplace.tsx
@@ -1,12 +1,23 @@
 import React from 'react';
 import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
 
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83');
+initMercadoPago(PUBLIC_KEY);
+
+// Chech the API reference for more details about how to create the preferenceId
+// https://www.mercadopago.com.br/developers/en/reference/preferences/_checkout_preferences/post
 
 const ExampleWalletBrickMarketplace = () => {
-  return <Wallet initialization={{ preferenceId: '207446753-ea3adb2e-a4f2-41dd-a656-11cb01b8772c', marketplace: true }} />;
+  return (
+    <Wallet
+      initialization={{
+        preferenceId: '<PREFERENCE_ID>',
+        marketplace: true,
+      }}
+    />
+  );
 };
 
 export default ExampleWalletBrickMarketplace;
diff --git a/examples/bricks/WalletBrick/6-Custom-ContainerId.tsx b/examples/bricks/WalletBrick/6-Custom-ContainerId.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Wallet from '../../../src/bricks/wallet';
+import { PUBLIC_KEY } from '../../constants';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago(PUBLIC_KEY);
+
+const ExampleSimpleWalletBrick = () => {
+  return (
+    <Wallet initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }} id="custom-container-id" />
+  );
+};
+
+export default ExampleSimpleWalletBrick;
diff --git a/examples/constants.ts b/examples/constants.ts
@@ -0,0 +1 @@
+export const PUBLIC_KEY = '<YOUR_PUBLIC_KEY>';
diff --git a/examples/secureFields/CardNumber/0-Simple.tsx b/examples/secureFields/CardNumber/0-Simple.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 
+import { PUBLIC_KEY } from '../../constants';
 import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 import CardNumber from '../../../src/secureFields/cardNumber';
 
-initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+initMercadoPago(PUBLIC_KEY, { locale: 'pt-BR' });
 
 const App = () => {
   return (
-    <CardNumber 
-      placeholder='Card Number'
-      style={{ fontFamily: "sans-serif" }}
+    <CardNumber
+      placeholder="Card Number"
+      style={{ fontFamily: 'sans-serif' }}
       onReady={(event) => console.log('Card number ready!!', event)}
       onError={(error) => console.log(error)}
     />