Sample: Custom Checkout with Mercado Pago from SD App

Unofficial Content

This article shows an example of the checkout process with Mercado Pago using Credit or Debit Cards, from a Smart Device application. It simulates the last step of an e-commerce app, the payment or checkout process.

You can download the Knowledge Base from Mercado Pago Checkout - Sample for Smart Device

Checkout Panel

It starts asking the user e-mail.

If the user already exists in the Seller Mercado Pago's site, the user payment option will appear on the main screen to just confirm the payment.

ScreenShot2019-12-02at15_38_48_2019122154025_1_png

    &ErrorCode = MercadoPago.Users.SearchCustomerWithCards(&CustomerEmail,&SearchUserWithCardsSDT,&Message)
    IF &ErrorCode = 0
        If &SearchUserWithCardsSDT.paging.total=1  //Customer exists
            For &user in &SearchUserWithCardsSDT.results        
                &CustomerId = &user.id
                &DefaultCardId = &user.default_card
            Endfor
            If &user.cards.Count > 0
                &HasCard = True
                For &card in &user.cards   // search the customer stored credit card
                    If &card.id = &DefaultCardId
                        &CardId = &card.id
                        &CardIssuerName = &card.issuer.name    
                        &CardLastFourDigits = &card.last_four_digits
                        &CardPaymentMethod = &card.payment_method.id
                        &CardImage.FromURL(&card.payment_method.secure_thumbnail)
                        CardList_LabelCard.Caption = format("**** **** %1", &CardLastFourDigits.ToString())
                    Endif
                Endfor
            Else
                &HasCard = False
            Endif
        Endif
    Endif

After entering the CVV, the payment can be accomplished.

Event 'Confirm'
    Composite
        // Get CardToken
        If &CardSecurityCode.IsEmpty()
            msg('Enter the Card security code')
        Else        
            &GetCardTokenSDT = new()
            &GetCardTokenSDT = MercadoPagoCheckout.GetSavedCardToken(&CardId, &CardSecurityCode)
            &CardToken = &GetCardTokenSDT.id.Trim()
            If &CardToken.IsEmpty()
                msg("Error code " + &GetCardTokenSDT.Error.ToString().Trim())
            Else                    
                //Create Payment
                GeneXus.Common.UI.Progress.ShowWithTitle('Processing payment...')                
                CreatePayment(&CardToken, &ProductPrice, &CustomerEmail, &CustomerId, &CardPaymentMethod, &Notification_Url, &Message) 
                msg(&Message.Description)
            Endif        
        Endif
    endcomposite
Endevent

My Cards Panel

If the customer does not exist, or no card has been added for them, or you just want to add another payment option, press Payment options.

ScreenShot2019-12-02at15_38_53_png

The grid will be loaded with the cards already registered for that customer.

Event Grid1.Load
    &ErrorCode = MercadoPago.Users.SearchCustomerWithCards(&CustomerEmail,&SearchUserWithCardsSDT,&Message)
    IF &ErrorCode = 0
        If &SearchUserWithCardsSDT.paging.total=1  //Customer exists
            For &user in &SearchUserWithCardsSDT.results        
                &CustomerId = &user.id
            Endfor
            If &user.cards.Count > 0
                &HasCard = True
                For &card in &user.cards   // search the customer stored credit card
                    &CardId = &card.id
                    &CardIssuerName = &card.issuer.name    
                    &CardLastFourDigits = &card.last_four_digits
                    &CardImage.FromURL(&card.payment_method.secure_thumbnail)
                    CardList_LabelCard.Caption = format("**** **** %1", &CardLastFourDigits.ToString())
                    load
                Endfor
            Else
                &HasCard = False
            Endif
        Endif
    Else
        Log.Error(format("Cannot retrieve Customer & Cards'- Error Detail: %1", &Message.Description), &Pgmname)
    Endif
Endevent

New Card Panel

When no cards have been added, through the "Add Card" button you can securely register a new credit or debit card.

ScreenShot2019-12-02at15_39_12_png

 

Event 'Add Card'
    Composite
        GeneXus.Common.UI.Progress.ShowWithTitle('Adding payment preference...')    
        // Add Customer (if not exists) and their Card
        &CustomerId = GetCustomerId(&CustomerEmail)    
        IF not &CustomerId.IsEmpty()
            // Add Card to Customer
            &GetCardTokenSDT = MercadoPagoCheckout.GetCardToken(&CardPaymentMethod, &CardNumber, &CardCVV, &CardHolderName, &DocumentNumber, &DocumentType,&CardExpMonth, &CardExpYear)        
            &CardTokenErrorCode = &GetCardTokenSDT.Error        
            If &CardTokenErrorCode = MercadoPagoErrorCode.OK        
                &ErrorCode = AddCard(&CustomerId, &GetCardTokenSDT.id.Trim(), &Message)
                If &ErrorCode = 0
                    Msg('Payment method sucessfully added')
                    return
                Else
                    Msg(&Message.Description)
                Endif    
                /* PENDING - Set as default card */
            Else
                Do 'Get Error Description'
                Msg(format('Error %1 - %2', &CardTokenErrorCode, &ErrorDescription))
            Endif
        Else
            Msg('Invalid Customer_Id')
        Endif
    Endcomposite
Endevent