Mapas e Rotas com React Native - #11 Checkout com Webview

Nesse tutorial exibiremos o checkout para pagamento dentro do app criado com React Native usando o módulo Webview.

Checkout Mercado Pago com React Native

Vamos começar instalando o módulo do webview:

expo install react-native-webview
expo start --android

views/Checkout.js

Vamos importar o módulo do webview no top level da página e chamar o checkout:

import { WebView } from 'react-native-webview';

const [url,setUrl] = useState(null);

//Mudança de estado de navegação
async function stateChange(state)
{
    console.log(state);
}

return (
    <View style={css.container}>
        {url &&
            <WebView
                    originWhitelist={['*']}
                    source={{uri: url}}
                    style={css.checkoutmp}
                    startInLoadingState={true}
                    onNavigationStateChange={state=>stateChange(state)}
            />
        }

    </View>
);

assets/css/Css.js

Vamos criar a classe css relativa ao checkout:

checkoutmp:{
    flex:1,
    marginTop: 30
}

Controller.js

No Controller.js quanto mais informações enviarmos do nosso comprador e dos itens que estão sendo adquiridos mais fácil será a transação com o Mercado Pago.

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"
    },
    payment_methods: {
        installments:3,
        excluded_payment_types: [
            {"id":"ticket"},
            {"id":"debit_card"}
        ]
    },
};

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

Precisando de assessoria? webdesignemfoco@gmail.com