lamantin-group / react-native-yandex-payment

Library for implement Yandex Checkout functionality on React Native environment.
MIT License
32 stars 11 forks source link

3D Secure #16

Open Edemik opened 4 years ago

Edemik commented 4 years ago

Приветствую!

Можно примерчик по работе с 3D Secure?

Adigezalov commented 4 years ago

@Edemik вы решили вопрос с 3d secure?

novseje commented 4 years ago

Если вкратце, то у нас реализовано так: Добавляем returnUrl в параметры. Это страница на нашем бэк-энде при успешной оплате.

 // Инициализация оплаты. Получаем токен, передаем на бэк-энд, получаем ответ
    initPayment = async order => {
        let orderPrice = parseFloat(this.state.order.order_pay_sum);
        const shop: Shop = {
            id: GLOBALS.PAYMENT_SHOP_ID,
            token: GLOBALS.PAYMENT_SHOP_TOKEN,
            name: GLOBALS.PAYMENT_SHOP_NAME,
            description: GLOBALS.PAYMENT_SHOP_DESCRIPTION,
            applePayMerchantIdentifier: GLOBALS.PAYMENT_APPLEPAY_MERCHANT_IDENTIFIER,
            returnUrl: GLOBALS.PAYMENT_RETURN_URL + '?oid=' + this.state.orderId,
        }
        const payment: Payment = {
            amount: orderPrice,
            currency: 'RUB', // 'RUB' | 'USD' | 'EUR'
            types: ['BANK_CARD', 'PAY'], // 'YANDEX_MONEY' | 'BANK_CARD' | 'SBERBANK' | 'PAY'. PAY - means Google Pay or Apple Pay
        }
        const paymentResult = await YandexPayment.show(shop, payment);
        const paymentToken = this.paymentToken = paymentResult.token; // payment token
        const paymenType = paymentResult.type; // payment type: 'BANK_CARD', 'PAY'

        this.props.navigation.navigate('PaymentWait', {
            orderId: this.state.orderId,
            paymentToken: paymentToken,
            paymenType: paymenType,
        });
    }

На бэк-энде поучаем токен и генерируем confirmation_url. Далее отправляем пользователя на новый экран, где открываем в WebView наш confirmation_url.

   componentDidMount() {
        this.sendUsualRequest(
            API_URIs.PAYMENT_INIT,
            {
                paymentToken: this.state.paymentToken,
                paymenType: this.state.paymenType,
                orderId: this.state.orderId,
            },
            responseJson => {
                if (responseJson.data.payment_status === 'pending') {
                    this.paymentConfirmationUrl = responseJson.data.payment_confirmation.confirmation_url;

                    this.setState({
                        paymentConfirmationStep: true,
                        loading: false,
                    });
                }
                else {
                    // payment_status == 'succeeded'
                    this.successPayment();
                }
            }
        );
return (
            <View style={{ flex: 1 }}>
                <WebView
                    source={{ uri: this.paymentConfirmationUrl }}
                    style={PaymentWaitStyle.WebView}
                    scalesPageToFit={true}
                    renderError={() => this.onNetworkError({message: 'Ошибка при открытии страницы подтверждения оплаты.'}, this.paymentConfirmationUrl)}
                    onLoad={() => this.hideWebViewLoader()}
                //    injectedJavaScript={INJECTEDJAVASCRIPT}
                />
                {this.state.showWebViewLoader && (
                    <View style = {PaymentWaitStyle.loaderContainer}>
                        <View style = {LoaderScreenStyle.loaderBlock}>
                            <ActivityIndicator
                                color = '#000'
                                size = "large"
                                style = {LoaderScreenStyle.activityIndicator}/>
                            <Text>Проверяем состояние платежа...</Text>
                        </View>
                    </View>
                )}
            </View>
        );