@zuluapp/react-native-yuno-zulu v2.0.0
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
$ 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.- Android Add
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${project.ext.kotlinVersion}"
andkotlinVersion = "1.6.10"
inandroid/build.gradle
. - Android Add
maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }
inandroid/build.gradle
. - Android Add
apply plugin: 'kotlin-android'
andimplementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.10"
andimplementation 'com.yuno.payments:android-sdk:1.0.9'
inandroid/app/build.gradle
. - Android Convert files Java to Kotlin
Click right in option File -> Convert to File Kotlin
. - Android Add
import com.yuno.payments.core.Yuno
andYuno.initialize(this, "YOUR_API_KEY") under super.onCreate()
inMainApplication.kt
. - Android Add
implementation 'androidx.core:core-ktx:1.7.0
andimplementation 'androidx.appcompat:appcompat:1.4.1
inandroid/app/build.gradle
. - Android Add
import com.yuno.payments.features.payment.startCheckout
inMainApplication.kt
. - 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,
)
}
- iOS Change
platform :ios, '13.0'
to your Podfile. 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
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.
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
1 year ago