gabfiocchi / ngx-mercadopago

🚀 MercadoPago PX bridge for Angular and Ionic - Angular

ngx-mercadopago

An Angular wrapper for Mercado Pago SDK for JavaScript.

MercadoPago Docs

💡 Requirements

Angular 6 or higher.

To go to production it is necessary that you have an SSL certificate and that the payment form be made available on an HTTPS page.

📲 Installation

First time using Mercado Pago? Create your Mercado Pago account, if you don’t have one already.

First you need to install the npm module:

npm install ngx-mercadopago --save

Copy the public key in the credentials section of the page.

Usage

1. Import the NgxMercadopagoModule:

Finally, you can use ngx-mercadopago in your Angular project. You have to import NgxMercadoPago.forRoot() in the root NgModule of your application.

The forRoot static method is a convention that provides and configures services at the same time. Make sure you only call this method in the root module of your application, most of the time called AppModule. This method allows you to configure the NgxMercadoPago by specifying a publish key and/or a path for JS SDK.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxMercadopagoModule } from 'ngx-mercadopago';

@NgModule({
    imports: [
        BrowserModule,
        NgxMercadopagoModule.forRoot({
            publishKey: 'Your Publish Key',
            pathSDK: 'https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js'
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Import the NgxMercadopagoService:

...
import { NgxMercadopagoService } from 'ngx-mercadopago';
...

export class MpPaymentPage implements OnInit {
    constructor(
        private ngxMpService: NgxMercadopagoService
    ) { }
    
    ngOnInit() {
        await this.ngxMpService.initialize();
    }

    getPaymentMethods() {
        const PaymentMethods = this.ngxMpService.getPaymentMethods();
    }

    async createToken() {
        const cardToken = await this.ngxMpService.createToken(form).toPromise();
    }

    async getInstallments() {
        const issuer = await this.ngxMpService.getInstallments({
          payment_type_id: 'XX',
          payment_method_id: 0,
          bin: 000000
        }).toPromise();
    }
    async getPaymentMethod() {
        const paymentMethod = await this.ngxMpService.getPaymentMethod({
            bin: 0000 
        }).toPromise();
    }
}

Cordova / Ionic

<platform name="android">
    <preference name="Scheme" value="https" />
</platform>

<platform name="ios">
    <preference name="Hostname" value="myName" />
</platform>

Capacitor

{
    "server": {
        "androidScheme": "https",
        "iosScheme": "myName"
    }
}

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

License

Distributed under the MIT license. See LICENSE for more information.

This project was generated with Angular CLI version 10.0.2.

ngx-mercadopago's Issues

Can we create a version compatible with Angular Ivy

Can we create a version compatible with Angular Ivy? (for @angular/[email protected] if possible)

Error when registering credit card in producton enviroment

Hi, after firing the createToken method, it freezes up on IOS, and on android it gets the token but after sending the card token the sdk or the api return:
{code: "120", description: "card not found"}.

By the way thank you so much for this plugins it makes life a lot easier with mercadopago and angular.

variables

Can you give me a one example how to use on ionic 5 html 👍 ?

Compatibilidad con Angular v12

Agregar compatibilidad con la nueva versión de Angular 12

Undefined en inicializacion de Servicio

Gabriel. Antes que nada excelente trabajo con esta lib.

Tengo 2 problemas que te los reporto.

Problema 1)
Si inicializo la lIb desde app.module y pasandole al constructor (private ngxMpService: NgxMercadopagoService) + en el NgOnInit this.ngxMpService.initialize() como tenes en la documentación, me da error de undefined.

FacturaPayComponent.html:1 ERROR TypeError: Cannot read property 'getPaymentMethod' of undefined
at FacturaPayComponent.getPaymentMethod (factura-pay.component.ts?1483:190)
at Object.eval [as handleEvent] (VM14255 FacturaPayComponent.ngfactory.js:866)
at handleEvent (core.js?f18e:43993)
at callWithDebugContext (core.js?f18e:45632)
at Object.debugHandleEvent [as handleEvent] (core.js?f18e:45247)
at dispatchEvent (core.js?f18e:29804)
at eval (core.js?f18e:31837)
at SafeSubscriber.schedulerFn.__isAsync [as _next] (core.js?f18e:35379)
at SafeSubscriber.__tryOrUnsub (Subscriber.js?ee8f:183)
at SafeSubscriber.next (Subscriber.js?ee8f:122)

El W/A que encontré es en el component en el constructor instancio e inicializo el service desde ahí pasandole el objecto NgxMercadopagoConfiguration

this.mercadoPagoConf.publishKey = 'TEST-XXXXXXXXXXXXXX';
this.mercadoPagoConf.pathSDK = 'https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js';
this.ngxMpService = new NgxMercadopagoService(this.mercadoPagoConf);

Problema 2)

No existe en ngx-mercadopago.service.d.ts el método que solicita MercadoPago getIssuers

function getIssuers(paymentMethodId) {
window.Mercadopago.getIssuers(
paymentMethodId,
setIssuers
);
}

Desde ya gracias por esta lib.

Abrazo