Skip to content

Latest commit

 

History

History
267 lines (198 loc) · 7.84 KB

status-screen.md

File metadata and controls

267 lines (198 loc) · 7.84 KB
Raw

BricksBuilder.create(brick, target, settings)

Example:

mp.bricks().create('statusScreen', 'statusScreenBrick_container' , {
    initialization: {
        paymentId: '1234567890'
    },
    callbacks: {
        onReady: () => {
            // handle form ready
        },
        onError: (error) => {
            // handle error
        }
    }
});

Params:


brick | string, REQUIRED

Selected Brick. Possible values are: statusScreen.


target | string, REQUIRED

Id of the container that the brick will be rendered in. Can be any HTML element.


settings | object, REQUIRED

The settings object has properties to initialize and customize the brick being created.

Setting key Type Description
initialization object Defines the initialization data. See more REQUIRED
callbacks object Defines the callback functions. See more REQUIRED
customization object Defines custom properties. See more OPTIONAL
locale string Defines locale. OPTIONAL

Initialization


Initialization is an object with the properties the brick will initialize with.

Initialization key Type Description
paymentId string The ID of the payment generated via Mercado Pago. REQUIRED

Callbacks


The callbacks object contains the callbacks functions the brick will call during its life cycle.

Callback key Description Params Returns
onReady It is called when the brick finishes loading REQUIRED void void
onError It is called when there is an error in the Brick REQUIRED BrickError void

BrickError

{
    type: 'non_critical' | 'critical';
    message: string;
    cause: ErrorCause;
}

ErrorCause

{
    'invalid_sdk_instance',
    'container_not_found',
    'incorrect_initialization',
    'already_initialized',
    'settings_empty',
    'missing_amount_property',
    'amount_is_not_number',
    'missing_required_callbacks',
    'missing_container_id',
    'missing_locale_property',
    'missing_site_property',
    'missing_texts',
    'fields_setup_failed',
    'fields_setup_failed_after_3_tries',
    'missing_payment_information',
    'missing_payment_type',
    'null_date',
    'wrong_date_format',
    'incomplete_fields',
    'validations_parameter_null',
    'get_payment_methods_failed',
    'card_token_creation_failed',
    'get_identification_types_failed',
    'get_card_bin_payment_methods_failed',
    'get_card_issuers_failed',
    'get_payment_installments_failed',
    'get_saved_cards_failed',
    'get_address_data_failed',
    'unauthorized_payment_method',
    'get_payment_data_failed'
}

Customization


Customizations object is used to load Brick under different conditions.

Customization key Type Description
backUrls object Controls whether the brick will show the user a button to navigate back to the seller's website OPTIONAL
visual object Control the visual aspects of the brick. Contains style, font, texts, hidePaymentButton and hideFormTitle OPTIONAL
visual.texts CustomTexts Defines custom texts for the Brick (available custom texts vary by Brick). OPTIONAL
visual.font string Defines the custom font URL. This only applies to the Secure Fields. OPTIONAL
visual.style Style Defines custom theme and CSS variables OPTIONAL
visual.showExternalReference boolean Shows the external_reference field from the Payments API OPTIONAL
visual.hideTransactionDate boolean Controls if the transaction date is shown in the Brick OPTIONAL
visual.hideStatusDetails boolean Controls if the status detail of the payment is shown in the Brick OPTIONAL

backUrls

Controls whether the brick will show the user a button to navigate back to the seller's website. The url must be in the same domain and subdomain that the Brick is loaded on, urls in another domain will be ignored.

key Type Description
error string Defines the url that will be shown to the user in case of error in the payment. OPTIONAL
return string Defines the url that will be shown to the user in all scenarios of the brick. Useful to return to shopping page. OPTIONAL

CustomTexts

Accepted properties are:

Property Type
ctaGeneralErrorLabel string
ctaCardErrorLabel string
ctaReturnLabel string

Style


Style is an object with keys for theme and custom CSS variables.

Style key Type Description
theme string Defines theme for Brick. Possible values: default, dark, flat, bootstrap OPTIONAL
customVariables object Defines custom variables to be applied. Possible values OPTIONAL

style

{
    theme: 'dark',
    customVariables: {
        textPrimaryColor: 'blue'
    }
}
Custom Variables

Accepted properties are:

Property Type
textPrimaryColor string
textSecondaryColor string
inputBackgroundColor string
formBackgroundColor string
baseColor string
baseColorFirstVariant string
baseColorSecondVariant string
errorColor string
successColor string
warningColor string
outlinePrimaryColor string
outlineSecondaryColor string
buttonTextColor string
fontSizeExtraSmall string
fontSizeSmall string
fontSizeMedium string
fontSizeLarge string
fontSizeExtraLarge string
fontSizeExtraExtraLarge string
fontWeightNormal string
fontWeightSemiBold string
formInputsTextTransform string
inputVerticalPadding string
inputHorizontalPadding string
inputFocusedBoxShadow string
inputErrorFocusedBoxShadow string
inputBorderWidth string
inputFocusedBorderWidth string
borderRadiusSmall string
borderRadiusMedium string
borderRadiusLarge string
borderRadiusFull string
formPadding string

Note: All sizing properties accept values in: px, rem, em, and %


Returns: Promise<BRICK CONTROLLER>


Brick Controller

The Brick Controller contains methods that allow the integrator to interact with the rendered Brick.
unmount METHOD

Brick Controller.unmount()


The unmount methods removes the rendered Brick from the page.


Params

None.

Returns

void