react-native-yuno-zulu

YunoSDK to React-Native Android and IOS React Native library that implements Yuno CheckoutLite flow using purely native code.

Getting started

Installation

npm install react-native-yuno-zulu

or

yarn add react-native-yuno-zulu

Mostly automatic installation

1. $ react-native link react-native-yuno-zulu. Check the result, if iOS and/or Android project files are unchanged, do the steps described in Manual installation.
2. [Android] Add classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${project.ext.kotlinVersion}" and kotlinVersion = "1.6.10" in android/build.gradle.
3. [Android] Add maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" } in android/build.gradle.
4. [Android] Add apply plugin: 'kotlin-android' and implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.10" and implementation 'com.yuno.payments:android-sdk:1.0.9' in android/app/build.gradle.
5. [Android] Convert files Java to Kotlin Click right in option File -> Convert to File Kotlin.
6. [Android] Add import com.yuno.payments.core.Yuno and Yuno.initialize(this, "YOUR_API_KEY") under super.onCreate() in MainApplication.kt.
7. [Android] Add implementation 'androidx.core:core-ktx:1.7.0 and implementation 'androidx.appcompat:appcompat:1.4.1 in android/app/build.gradle.
8. [Android] Add import com.yuno.payments.features.payment.startCheckout in MainApplication.kt.
9. [Android] Add in MainActivity.kt.

  private fun onTokenUpdated(token: String?) {
    token?.let {}
  }

  private fun onPaymentStateChange(paymentState: String?) {
    paymentState?.let {}
  }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    startCheckout(
      checkoutSession = "",
      countryCode = "",
      callbackOTT = this::onTokenUpdated,
      callbackPaymentState = this::onPaymentStateChange,
    )
  }

1. [iOS] Change platform :ios, '13.0' to your Podfile.

2. [iOS] Edit your AppDelegate.m as follows:

   UINavigationController *rootViewController = [UINavigationController new];

At this point you should be able to build both Android and iOS.

Usage

if you are in IOS must be init SDK

 import { initSdkYuno } from 'react-native-yuno-zulu';

 useEffect(() => {
     initSDK();
   }, []);

   async function initSDK() {
     if (Platform.OS == 'ios') {
       try {
         const result = await initSdkYuno(
           'API_KEY'
         );
         console.log('result', result);
       } catch (error) {
         console.log('ERROR -> ', error);
       }
     }
   }

First Create a Customer with POST/customers.

const [user, setUser]: any = useState(null);

const createCustomer = async () => {
     try {
       const data = {
         merchant_customer_id: '',
         first_name: '',
         last_name: '',
         email: '',
         country: '',
       };
       const result = await axios.post(
         'https://api-sandbox.y.uno/v1/customers',
         data,
         {
           headers: {
            'accept': 'application/json',
           'public-api-key': publicKey,
           'private-secret-key': privateKey,
            'content-type': 'application/json',
           },
         }
       );
       setUser(result.data);
     } catch (error: any) {
       console.log('ERROR', error.request.response);
     }
   };

Generate a checkout_session on your backend by creating a Checkout Session with POST/checkouts/sessions.

const [session, setSession]: any = useState(null);

 const createSession = async () => {
     try {
       const data = {
         amount: { currency: 'COP', value: 15000 },
         customer_id: user?.customer_id,
         merchant_order_id: user?.merchant_customer_id,
         payment_description: 'test_description',
         callback_url: 'http://localhost:3000',
         country: 'CO',
         account_id,
       };
       const result = await axios.post(
         'https://api-sandbox.y.uno/v1/checkout/sessions',
         data,
         {
           headers: {
             ...headers,
             'content-type': 'application/json',
           },
         }
       );
       setSession(result.data);
     } catch (error) {
       console.log('ERROR', error);
     }
   };

Get the available payment methods you have enabled via the Yuno integration GET/checkout/sessions/{{checkout_session}}/payment-methods.

  const [paymentMethods, setPaymentMethods]: any = useState(null);

  const handleGetPayments = async () => {
     try {
       const result = await axios.get(
         `https://api-sandbox.y.uno/v1/checkout/sessions/${session?.checkout_session}/payment-methods`,
         {
           headers,
         }
       );
       setPaymentMethods(result.data[0]);
     } catch (error) {
       console.log('ERROR', error);
     }
   };

Display in your checkout frontend the payment methods. Here the user will select the payment method he wants to pay within your platform.

You have to start checkout.

 import { startCheckout } from 'react-native-yuno-zulu';

 const handleStartCheckout = async () => {
     try {
       await startCheckout(session?.checkout_session, session?.country);
     } catch (error) {
       console.log('ERROR', error);
     }
   };

The YUNO SDK will generate a payment_method_token when the customer submits their payment data.

Create a payment using the payment_method_token via the Payments API POST/payments.

If the response indicates a require_sdk_action, you'll need to invoke the SDK to render the next steps.

 import { startPaymentLite, continuePayment } from 'react-native-yuno-zulu';

 const handleStartPaymentLite = async () => {
     try {
       const resultToken = await startPaymentLite(paymentMethods?.type);
       const body = {
         amount: { currency: 'COP', value: '18000' },
         checkout: { session: session?.checkout_session },
         payment_method: { token: resultToken },
         customer_payer: user,
         account_id,
         merchant_order_id: account_id,
         description: 'test_description_payment',
         country: 'CO',
       };
       const result = await axios.post('https://api-sandbox.y.uno/v1/payments', body, {
         headers: {
           ...headers,
           'X-idempotency-key': (Math.random() + 1).toString(36).substring(7),
         },
       });
       if (result.data.checkout?.sdk_action_required) {
           await continuePayment();
       }
     } catch (error: any) {
       console.log('ERROR', error);
     }
   };

Create customer sessions

  const customerSessions = async () => {
    try {
      const data = {
        account_id: 'ACCOUNT_ID',
        country: 'COUNTRY_ID',
        customer_id: 'CUSTOMER_ID',
        callback_url: ''
      };
      const result = await axios.post(
        'https://api-sandbox.y.uno/v1/customers/sessions',
        data,
        {
          headers: {
            ...headers,
            'content-type': 'application/json',
          },
        },
      );
      setCustomerSession(result.data)
    } catch (error: any) {
      console.log('ERROR', error.request.response);
    }
  };

Get payments aviable to enrollment

  const handleGetPaymentsMethodsEnrollments = async () => {
    try {
      const result = await axios.get(
        `https://api-sandbox.y.uno/v1/checkout/customers/sessions/CUSTOMER_SESSION/payment-methods`,
        {
          headers: {
            ...headers,
            'content-type': 'application/json',
          },
        },
      );
      setPaymentMethodsEnrollment(result.data.payment_methods[0]);
    } catch (error) {
      console.log('ERROR', error);
    }
  };

Enrollment payment with customer

 const handleEnrollmentPyament = async () => {
    try {
      const data = {
        account_id: 'ACCOUNT_ID',
        payment_method_type: paymentMethodsEnrollment.type,
        country: customerSession.country
      };
      const result = await axios.post(
        `https://api-sandbox.y.uno/v1/customers/sessions/${CUSTOMER_SESSIONS}/payment-methods`,
        data,
        {
          headers: {
            accept: 'application/json',
            'content-type': 'application/json',
            'public-api-key': publicKey,
            'private-secret-key': privateKey,
            'X-idempotency-key': (Math.random() + 1).toString(36).substring(7),
          },
        },
      );
      console.log('handleEnrollmentPyament', result);
    } catch (error) {
      console.log('ERROR', error);
    }
  };

Init and Start enrollment

import { initEnrollment, startEnrollment } from 'react-native-yuno-zulu';
  const handleStartEnrollment = async () => {
    try {
      await initEnrollment()
      const result = await startEnrollment(
        customerSession?.customer_session,
        customerSession?.country,
      );
      console.log('handleStartEnrollment', result);
    } catch (error) {
      console.log('ERROR', error);
    }
  };

Init and Start enrollment IOS

import { initEnrollment, startEnrollment } from 'react-native-yuno-zulu';
  const handleStartEnrollment = async () => {
    try {
      // await initEnrollment()
      const result = await startEnrollment(
        customerSession?.customer_session,
        customerSession?.country,
      );
      console.log('handleStartEnrollment', result);
    } catch (error) {
      console.log('ERROR', error);
    }
  };

Troubleshooting

1. [iOS] Error Undefined symbols ___llvm_profile_runtime, You can implement: I was also troubled by the problem. To solve this problem, you may want to add -fprofile-instr-generate to Build Settings > Linking > Other Linker Flags.

2. [iOS] Error Dark Mode, You can implement: Mode Light.

 <key>UIUserInterfaceStyle</key>
 <string>Light</string>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library