s4mukka/react-sdk-mercadopago

react-sdk-mercadopago's Issues

TypeError: Cannot read property 'checkout' of undefined

TypeError: Cannot read property 'checkout' of undefined

MP Types

Hi @s4mukka! I used your library and added these types (according to the documentation at: https://github.com/mercadopago/sdk-js/tree/main/API).
I hope you can find it useful:

type MercadoPago = {
checkout: (params: checkoutParams) => Function
constructor: (params: UseMercadoPagoProps) => Function
getIdentificationTypes: () => Promise<identificationTypesResponse[]>
getPaymentMethods: (params: paymentMethodsParams) => Promise
getIssuers: (params: issuersParams) => Promise<issuersResponse[]>
getInstallments: (params: installmentsParams) => Promise<installmentsResponse[]>
createCardToken: (params: cardTokenParams) => Promise
};
interface Constructable {
new(key: string, options?: { locale?: string }): T
}
enum processingMode {
AGGREGATOR = 'aggregator',
GATEWAY = 'gateway'
}
interface checkoutParams {
preference: {
id: string;
}
theme?: {
elementsColor?: string;
headerColor?: string;
};
autoOpen?: boolean;
render?: {
container: string;
label: string;
type?: string;
}
}
interface UseMercadoPagoProps {
publicKey: string;
options?: {
locale?: string;
advancedFraudPrevention?: boolean;
trackingDisabled?: boolean;
}
}
interface identificationTypesResponse {
id: string;
name: string;
type: string;
min_length: number;
max_length: number;
}
interface paymentMethodsParams {
bin: string;
processingMode?: processingMode;
}
interface paymentMethodsResponse {
paging: {
total: number;
limit: number;
offset: number;
};
results: [{
secure_thumbnail: string;
min_accreditation_days: number;
max_accreditation_days: number;
id: string;
payment_type_id: string;
accreditation_time: number;
thumbnail: string;
marketplace: string;
deferred_capture: string;
labels: string[];
name: string;
site_id: string;
processing_mode: string;
additional_info_needed: string[];
status: string;
settings: {
security_code: {
mode: string;
card_location: string;
length: number
};
card_number: {
length: number;
validation: string
};
bin: {
pattern: string;
installments_pattern: string;
exclusion_pattern: string;
}
}[];
issuer: {
default: boolean;
name: string;
id: number;
};
}]
}
interface issuersParams {
paymentMethodId: string;
bin: string;
}
interface issuersResponse {
id: string;
name: string;
secure_thumbnail: string;
thumbnail: string;
processing_mode: string;
merchant_account_id?: string;
}
interface installmentsParams {
amount: string;
bin: string;
locale?: string;
processingMode?: processingMode;
}
interface installmentsResponse extends installmentsParams {
merchant_account_id?: string;
payer_costs: [{
installments: number;
installment_rate: number;
discount_rate: number;
labels: string[];
installment_rate_collector: string[];
min_allowed_amount: number;
max_allowed_amount: number;
recommended_message: string;
installment_amount: number;
total_amount: number;
payment_method_option_id: string;
}]
}
interface cardTokenParams {
securityCode: string;
cardNumber?: string;
cardholderName?: string;
expirationMonth?: string;
expirationYear?: string;
identificationType?: string;
identificationNumber?: string;
cardId: string;
}
interface cardTokenResponse extends cardTokenParams {
id: string;
}

[Report Only] Refused to frame 'https://www.mercadopago.com.ar/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.mercadolibre.com".

Issues on useMercadopago cleanup

Hi,

• I'm having an issue when a component using useMercadopago gets unmounted on a test site

v2.ts:32 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at http://localhost:3000/static/js/vendors~main.chunk.js:146474:23
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/vendors~main.chunk.js:111949:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/vendors~main.chunk.js:111998:20)
at invokeGuardedCallback (http://localhost:3000/static/js/vendors~main.chunk.js:112051:35)
at safelyCallDestroy (http://localhost:3000/static/js/vendors~main.chunk.js:131257:9)
at http://localhost:3000/static/js/vendors~main.chunk.js:131719:25
at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:152469:16)
at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:122836:14)
at commitUnmount (http://localhost:3000/static/js/vendors~main.chunk.js:131712:19)
at unmountHostComponents (http://localhost:3000/static/js/vendors~main.chunk.js:132082:11)
at commitDeletion (http://localhost:3000/static/js/vendors~main.chunk.js:132118:9)
at commitMutationEffects (http://localhost:3000/static/js/vendors~main.chunk.js:134398:15)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/vendors~main.chunk.js:111949:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/vendors~main.chunk.js:111998:20)
at invokeGuardedCallback (http://localhost:3000/static/js/vendors~main.chunk.js:112051:35)
at commitRootImpl (http://localhost:3000/static/js/vendors~main.chunk.js:134129:13)
at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:152469:16)
at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:122836:14)
at commitRoot (http://localhost:3000/static/js/vendors~main.chunk.js:134003:7)
at finishSyncRender (http://localhost:3000/static/js/vendors~main.chunk.js:133420:7)
at performSyncWorkOnRoot (http://localhost:3000/static/js/vendors~main.chunk.js:133406:11)
at http://localhost:3000/static/js/vendors~main.chunk.js:122890:28
at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:152469:16)
at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:122836:14)
at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/vendors~main.chunk.js:122885:11)
at flushSyncCallbackQueue (http://localhost:3000/static/js/vendors~main.chunk.js:122873:7)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/vendors~main.chunk.js:134495:7)
at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:152469:16)
at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:122836:14)
at flushPassiveEffects (http://localhost:3000/static/js/vendors~main.chunk.js:134436:16)
at http://localhost:3000/static/js/vendors~main.chunk.js:134315:15
at workLoop (http://localhost:3000/static/js/vendors~main.chunk.js:152413:38)
at flushWork (http://localhost:3000/static/js/vendors~main.chunk.js:152369:20)
at MessagePort.performWorkUntilDeadline (http://localhost:3000/static/js/vendors~main.chunk.js:151973:31)

• I am also experiencing several CORS issues on the console:

Access to XMLHttpRequest at 'https://events.mercadopago.com/v2/traffic-light' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-request-id is not allowed by Access-Control-Allow-Headers in preflight response.
POST https://events.mercadopago.com/v2/traffic-light net::ERR_FAILED

It is working on the sale perspective, at least with test credentials, but my site is now crashing on the component unmount because it can not find the DOM node to remove the script on THIS FILE line 32

Thank you in advance, I am willing to help if needed.