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.