Skip to content

Latest commit

 

History

History
189 lines (139 loc) · 6.92 KB

checkout-pro.md

File metadata and controls

189 lines (139 loc) · 6.92 KB
Raw

Checkout PRO

Initializing the Checkout

To initialize the checkout you need to call the .bricks() and then .create function from the SDK along with some parameters

.create("wallet", "<DOM_CONTAINER>", settings)

Parameter Type Description
wallet string Defines the checkout experience. This value is fixed.
<DOM_CONTAINER> string The identifier of the element where the payment button should be displayed
settings object Include additional configurations such as initialization options

Checkout

mercadopago.bricks().create("wallet", "<DOM_CONTAINER>", {
  initialization: {
    preferenceId: "<PREFERENCE_ID>",
  },
});

Returns: Promise<CONTROLLER>. See more

Parameters

Option name Type Attributes Description
initialization object preferenceId: string Payment preference REQUIRED
initialization object redirectMode: string Customize the opening schema OPTIONAL

Opening scheme

There are three ways to open the checkout experience: redirect on the same tab, which is the default, redirecting to a new tab or using a modal.

Option name value Description
redirectMode self [Default] Keeps the redirect on the same page
redirectMode blank Makes the redirect to a new page
redirectMode modal Opens the checkout experience in modal mode
HTML/JS 
mercadopago.bricks().create("wallet", "<DOM_CONTAINER>", {
  initialization: {
    preferenceId: "<PREFERENCE_ID>",
    redirectMode: "modal",
  },
});
ReactJS 
<Wallet
  initialization={{ preferenceId: "<PREFERENCE_ID>", redirectMode: "modal" }}
/>

Additional configurations

You can pass some other configurations as params to the .create function:

The customization object

customization.checkout.theme | object | OPTIONAL : Visual customization data.
Option name Type Description
elementsColor string Checkout elements color (e.g., buttons, labels)
headerColor string Color for the checkout header
customization.texts | object | OPTIONAL : Display alternative labels on button
Option name Type Description
action string Checkout button label
valueProp string Displayed below the checkout button

The alternative values, which are optional, override the default. To check alternatives values, see the developers site

customization.visual | object | OPTIONAL : Change button's apperance and style
Option name Type Description
buttonBackground string Checkout button background. Available options: default, black, blue, white.
buttonHeight string Checkout button height. Default is 48px
borderRadius string Checkout button border radius. Default is 6px.
valuePropColor string Checkout button value prop color. Available options: grey, white and the default is grey.
verticalPadding string Checkout button vertical padding. Default is 16px
horizontalPadding string Checkout button horizontal padding. Default is 16px

The alternative values, which are optional, override the default. To check alternatives values, see the developers site

The callbacks object

callbacks | object | OPTIONAL : Auxiliary lifecycle callbacks.
Callback key Description
onSubmit It is called when the user clicks on the submit button OPTIONAL
onReady It is called when the button finishes loading. OPTIONAL
onError It is called when there is an error in the integration OPTIONAL

Rendering the Checkout

mercadopago.bricks.create()

Renders the Checkout Button in a given container. This button has the trigger to open the checkout.

controller. unmount()
Unmount example 
const bricksBuilder = mp.bricks();
const renderComponent = async (bricksBuilder) => {
  const settings = {
    initialization: {
      preferenceId: "<PREFERENCE_ID>",
    },
  };
  window.brickController = await bricksBuilder.create(
    "wallet",
    "wallet_container",
    settings
  );
};
renderComponent(bricksBuilder);

// Somewhere in your flow
controller.unmount();

Manually unmounts the opened iframe element. It can be used to generate a new integration instance.

Integration examples

HTML/JS 
<div class="component_container"></div>
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
 const mercadopago = new MercadoPago('YOUR_PUBLIC_KEY')
 const bricksBuilder = mercadopago.bricks();
 const renderComponent = async (bricksBuilder) => {
   const settings = {
     initialization: {
       preferenceId: '<PREFERENCE_ID>'
     },
   };
   const controller = await bricksBuilder.create(
     'wallet',
     'component_container',
     settings
   );

 };
 renderComponent(bricksBuilder);
</script>
ReactJS 
import { initMercadoPago, Wallet } from '@mercadopago/sdk-js'
initMercadoPago('YOUR_PUBLIC_KEY');

<Wallet initialization={preferenceId: "<PREFERENCE_ID>"} />