Mapas e Rotas com React Native - #12 Respostas do Mercado Pago

Nessa videoaula vamos aprender a como manipular os dados dentro do componente webview, verificando por exemplo se a compra foi efetuada no Mercado Pago.

Entendendo Webview por dentro

Controller.js

No Controller vamos adicionar mais uma propriedade a nossa requisição ao Mercado Pago. Ficará da seguinte forma:

let preference = {
    items:[{
        title: req.body.address,
        quantity: 1,
        currency_id: 'BRL',
        unit_price: parseFloat(req.body.price)
    }],
    payer:{
        name:"Thiago",
        email: "demo@mail.com"
    },
    back_urls:{
        failure:"https://www.webdesignemfoco.com/failure",
        pending:"https://www.webdesignemfoco.com/pending",
        success:"https://www.webdesignemfoco.com/success",
    },
    payment_methods: {
        installments:3,
        excluded_payment_types: [
            {"id":"ticket"},
            {"id":"debit_card"}
        ]
    },
};

views/Checkout.js

Vamos implementar a função stateChange que receberá as mudanças do checkout e redirecionará o usuário:

//Mudança de estado de navegação
async function stateChange(state)
{
    let url=state.url;
    if(state.canGoBack == true && !url.includes('mercadopago')){
        if(url.includes("approved")){
            props.navigation.navigate('Tracking');
        }else{
            props.navigation.navigate('Home');
        }
    }
}

views/Tracking.js

Vamos criar a view Tracking que receberá o usuário após aprovado o seu pagamento.

import React from 'react';
import { Text, View } from 'react-native';
import {css} from '../assets/css/Css';

export default function Tracking(props) {

    return (
        <View style={css.container}>
           <Text>Seu pagamento foi aprovado.</Text>
        </View>
    );
}

views/index.js

Não esqueça de importar essa nova screen no arquivo index:

import Home from './Home';
import Checkout from './Checkout';
import Tracking from './Tracking';

export {Home, Checkout, Tracking};

App.js

No nosso entry point App.js precisamos inserir essa nova screen:

import {Home, Checkout, Tracking} from './views';
<Stack.Screen name="Tracking" component={Tracking} options={{headerShown:false}} />

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com