@moneyhash/reactnative-sdk

@moneyhash/reactnative-sdk

About MoneyHash

MoneyHash is a Super-API infrastructure for payment orchestration and revenue operations in emerging markets. We provide a single integration to your network of pay-in and pay-out providers, and various other services that you can utilize and combine to build a unique custom payment stack. Our core features include:

1. A single API/SDK integration for Pay-in & Pay-out
2. Unified checkout embed compatible with all integrated providers
3. Orchestration and routing capabilities to allow for optimal transaction route and to increase authorization rates
4. Microservices to extend your stack capabilities such as subscription management, invoicing, and payment links
5. PCI-compliant card vault to store and tokenize sensitive customer and card information
6. Central dashboard for a unified stack controls and transaction reporting

You can learn more about us by visiting our website.

MoneyHash ReactNative Support

The SDK allows you to build full payment experiences in your native Android and iOS apps using ReactNative.

Installation

npm install @moneyhash/reactnative-sdk

Requirements

Android

• Compatible with apps targeting Android 5.0 (API level 21) and above
• Use Kotlin version 1.6.10 and above: example
• Using an up-to-date Android Gradle Plugin
• AndroidX (as of v11.0.0)

Enable viewBinding in your project.

 buildFeatures {
   viewBinding true
 }

iOS

Compatible with apps targeting iOS 11 or above.

How to use?

• Create moneyHash instance using MoneyHashSDKBuilder

import { MoneyHashSDKBuilder } from '@moneyhash/reactnative-sdk';
const moneyHash = MoneyHashSDKBuilder.build();

MoneyHash SDK guides to for the actions required to be done, to have seamless integration through intent details state

state	Action
METHOD_SELECTION	Use moneyHash.getIntentMethod to get different intent methods and render them natively with your own styles & use moneyHash.proceedWithMethod to proceed with one of them on user selection
INTENT_FORM	Use moneyHash.renderForm to start the SDK flow to let MoneyHash handle the flow for you & listen for result by using IntentContract() for Activity result
INTENT_PROCESSED	Render your successful confirmation UI with the intent details
TRANSACTION_FAILED	Render your failure UI with the intent details
TRANSACTION_WAITING_USER_ACTION	Render your pending actions confirmation UI with the intent details & externalActionMessage if exists on Transaction
EXPIRED	Render your intent expired UI
CLOSED	Render your intent closed UI

• Get intent details based on the intent id and type (Payment/Payout)

  React.useEffect(() => {
  moneyHash
    .getIntentDetails('Intent id is here', IntentType.Payment)
    .then(setResult);
}, []);

• Get intent available payment/payout methods, saved cards and customer balances

  React.useEffect(() => {
  moneyHash
    .getIntentMethods('Intent id is here', IntentType.Payment)
    .then(setResult);
}, []);

• Proceed with a payment/payout method, card or wallet

  React.useEffect(() => {
  moneyHash
    .proceedWithMethod(
      'Intent id is here',
      IntentType.Payment,
      'Selected Method id is here',
      MethodType.PaymentMethod,
      new MethodMetaData('CVV can be here') // Optional and will be considered only in case of saved card
    )
    .then(setResult);
}, []);

• Reset the selected method on and intent to null

Can be used for back button after method selection or retry button on failed transaction UI to try a different method by the user.

  React.useEffect(() => {
  moneyHash
    .resetSelectedMethod('Intent id is here', IntentType.Payment)
    .then(setResult);
}, []);

• Delete a customer saved card

  React.useEffect(() => {
  moneyHash
    .deleteSavedCard('card token id', 'intent secret')
    .then(setResult);
}, []);

• Render SDK embed forms and payment/payout integrations

Must be called if state of an intent is INTENT_FORM to let MoneyHash handle the payment/payout. you can also use it directly to render the embed form for payment/payout without handling the methods selection native UI.

Add PaymentActivity / PayoutActivity to AndroidManifest.xml

<activity android:name="com.moneyhash.sdk.android.payment.PaymentActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen"/>

<activity android:name="com.moneyhash.sdk.android.payout.PayoutActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen"/>

• Start the SDK flow to let MoneyHash handle the payment/payout

  React.useEffect(() => {
  moneyHash
    .renderForm('intent id is here', IntentType.Payment)
    .then(setResult);
}, []);

Responses

enum IntentType {
  Payment = 'payment',
  Payout = 'payout'
}

enum IntentStatus {
  Processed = 'PROCESSED',
    UnProcessed = 'UNPROCESSED',
    TimeExpired = 'TIME_EXPIRED',
    Closed = 'CLOSED',
}

enum IntentState {
  MethodSelection = 'METHOD_SELECTION',
    IntentForm = 'INTENT_FORM',
    IntentProcessed = 'INTENT_PROCESSED',
    TransactionWaitingUserAction = 'TRANSACTION_WAITING_USER_ACTION',
    TransactionFailed = 'TRANSACTION_FAILED',
    Expired = 'EXPIRED',
    Closed = 'CLOSED',
}

class IntentDetails {
  selectedMethod?: string;
  intent?: IntentData;
  walletBalance?: number;
  transaction?: TransactionData;
  redirect?: RedirectData;
  state?: IntentState;
}

class TransactionData {
  billingData?: string;
  amount?: number;
  externalActionMessage?: string[];
  amountCurrency?: string;
  id?: string;
  methodName?: string;
  method?: string;
  createdDate?: string;
  status?: string;
  customFields?: string;
  providerTransactionFields?: string;
  customFormAnswers?: string;
}

class IntentData {
  amount?: AmountData;
  secret?: string;
  expirationDate?: string;
  isLive?: boolean;
  id?: string;
  status?: IntentStatus;
}

class AmountData {
  value?: string;
  formatted?: number;
  currency?: string;
  maxPayout?: number;
}

class RedirectData {
  redirectUrl?: string;
}

class CustomerBalance {
  balance?: number;
  id?: string;
  icon?: string;
  isSelected?: boolean;
  type?: MethodType;
}

class PaymentMethod {
  id?: string;
  title?: string;
  isSelected?: boolean;
  confirmationRequired?: boolean;
  icons?: string[];
  type?: MethodType;
}

class PayoutMethod {
  id?: string;
  title?: string;
  isSelected?: boolean;
  confirmationRequired?: boolean;
  icons?: string[];
  type?: MethodType;
}

class ExpressMethod {
  id?: string;
  title?: string;
  isSelected?: boolean;
  confirmationRequired?: boolean;
  icons?: string[];
  type?: MethodType;
}

class SavedCard {
  id?: string;
  brand?: string;
  last4?: string;
  expiryMonth?: string;
  expiryYear?: string;
  country?: string;
  logo?: string;
  requireCvv?: boolean;
  cvvConfig?: CvvConfig;
  type?: MethodType;
}

class CvvConfig {
  digitsCount?: number;
}

class IntentMethods {
  customerBalances?: CustomerBalance[];
  paymentMethods?: PaymentMethod[];
  expressMethods?: ExpressMethod[];
  savedCards?: SavedCard[];
  payoutMethods?: PayoutMethod[];
}

class IntentResult {
  methods?: IntentMethods | null;
  details?: IntentDetails | null;
}

class MethodMetaData {
  cvv?: string;
}

enum MethodType {
  ExpressMethod = 'expressMethod',
    CustomerBalance = 'customerBalance',
    SavedCard = 'savedCard',
    PaymentMethod = 'paymentMethod',
    PayoutMethod = 'payoutMethod',
}