WIP

src/i18n/locales/en.json

@@ -425,7 +425,10 @@
       "card": "Credit card",
       "cash_on_delivery": "Cash on delivery",
       "edenred": "Edenred",
-      "edenred+card": "Edenred"
+      "edenred+card": "Edenred",
+      "conecs": "Titres-restaurant",
+      "swile": "Swile",
+      "restoflash": "Restoflash"
     },
     "CASH_ON_DELIVERY_DISCLAIMER": "You are going to pay by cash on delivery. Please prepare the exact amount and make sure to be reachable.",
     "STORES": "Stores",

src/navigation/checkout/Payment.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Center } from 'native-base';
-import { View } from 'react-native';
+import { Linking, View } from 'react-native';
 import { connect } from 'react-redux';
 
 import {
@@ -42,8 +42,12 @@ class CreditCard extends Component {
       'edenred+card': 'CheckoutPaymentMethodEdenred',
     };
 
-    this.props.setPaymentMethod(type, () => {
-      this.props.navigation.navigate(routesByMethod[type]);
+    this.props.setPaymentMethod(type, (result) => {
+      if (result.redirectUrl) {
+        Linking.openURL(result.redirectUrl);
+      } else {
+        this.props.navigation.navigate(routesByMethod[type]);
+      }
     })
   }
 

src/navigation/checkout/components/CreditCardPaygreen.js

@@ -29,6 +29,8 @@ const CreditCardPaygreen = ({ baseURL, paymentDetails, loadPaymentDetails, cart,
     loadPaymentDetails()
   }, []);
 
+  console.log('paymentDetails', paymentDetails)
+
   if (!paymentDetails?.paygreenWebviewUrl) {
     return <Text>LOADING</Text>
   }

src/navigation/checkout/components/PaymentMethodIcon.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Icon } from 'native-base';
+import { Image } from 'react-native';
+import { Box, Icon } from 'native-base';
 import Foundation from 'react-native-vector-icons/Foundation';
 import Svg, { Path, G } from 'react-native-svg';
+import ConecsIcon from './PaymentMethodIcon/ConecsIcon';
 
 const icons = {
   card: 'credit-card',
@@ -19,16 +21,47 @@ const PaymentMethodIcon = ({ type }) => {
     />)
   }
 
+  if (type === 'conecs') {
+    return (
+      <Icon size="xl" mr="2">
+        <ConecsIcon />
+      </Icon>
+    )
+  }
+
+  if (type === 'restoflash') {
+    return (
+      <Box mr="2">
+        <Image
+          resizeMode="contain"
+          source={require('../../../../assets/images/restoflash.png')}
+          style={{ width: 30, height: 30 }} />
+      </Box>
+    )
+  }
+
+  if (type === 'swile') {
+    return (
+      <Box mr="2">
+        <Image
+          resizeMode="contain"
+          source={require('../../../../assets/images/Swile_black.png')}
+          style={{ width: 40, height: 40 }} />
+      </Box>
+    )
+  }
+
   if (type === 'edenred' || type === 'edenred+card') {
     return (
-      <Icon size="xl" viewBox="0 0 413.24 265.47" mr="2">
+      <Icon size="xl" mr="2">
         <Svg
           xmlns="http://www.w3.org/2000/svg"
           xmlSpace="preserve"
           id="Layer_1"
           x={0}
           y={0}
           fill={ '#000000' }
+          viewBox="0 0 413.24 265.47"
         >
           <Path
             d="M160.43 117.34c-6.79 0-11.1 4.42-12.44 10.28h24.16c-.82-6.47-5.35-10.28-11.72-10.28zM95.86 119.91c-8.64 0-14.09 5.96-14.09 14.29 0 8.23 5.55 14.39 14.09 14.39s14.29-5.86 14.29-14.39c0-8.53-5.76-14.29-14.29-14.29z"

src/redux/Checkout/actions.js

@@ -1937,12 +1937,14 @@ export function setPaymentMethod(paymentMethod, cb) {
         },
       )
       .then(res => {
+        console.log('setPaymentMethod', JSON.stringify(res))
+        console.log('redirectUrl', res.redirectUrl)
         // We update the state with the same cart
         // We can't use response, because it's not a cart
         // TODO Use the payments returned
         // https://github.com/coopcycle/coopcycle-app/issues/1925
         dispatch(updateCartSuccess(cart));
-        cb()
+        cb(res)
       })
       .catch(e => dispatch(checkoutFailure(e)));
   };