React Native CloudPayments

React Native library for accepting payments with CloudPayments SDK

Install

Step 1:

Download package:

npm install --save react-native-cloudpayments

or

yarn add react-native-cloudpayments

Step 2:

Link dependencies:

react-native link react-native-cloudpayments

Step 3:

Add in your Podfile next line:

pod 'SDK-iOS', :git =>"https://github.com/cloudpayments/SDK-iOS", :branch =>"master"
pod 'RNCloudPayments', :path =>'../node_modules/react-native-cloudpayments'

Step 3:

Install Pods in ios directory:

cd ios && pod install

Methods (android + ios)

isValidCard()

Validate card. Returns a Promise that resolve card status (Boolean).

Arguments

• cardNumber - String Number of payment card.
• cardExp - String Expire date of payment card.
• cardCvv - String CVV code of payment card.

Examples

importRNCloudPaymentfrom'react-native-cloudpayments';constdemoCard={number: '5105105105105100',extDate: '10/18',cvvCode: '123',};RNCloudPayment.isValidCard(demoCard.number,demoCard.extDate,demoCard.cvvCode).then(cardStatus=>{console.log(cardStatus);// true});

getType()

Retrive card type. Returns a Promise that resolve card type (String).

Card types:

• Unknown
• Visa
• MasterCard
• Maestro
• Mir
• JCB

Arguments

• cardNumber - String Number of payment card.
• cardExp - String Expire date of payment card.
• cardCvv - String CVV code of payment card.

Examples

importRNCloudPaymentfrom'react-native-cloudpayments';constdemoCard={number: '5105105105105100',extDate: '10/18',cvvCode: '123',};RNCloudPayment.getType(demoCard.number,demoCard.extDate,demoCard.cvvCode).then(cardType=>{console.log(getType);// MasterCard});

createCryptogram()

Create cryptogram. Used in CloudPayment API. Returns a Promise that resolve cryptogram (String).

Arguments

• cardNumber - String Number of payment card.
• cardExp - String Expire date of payment card.
• cardCvv - String CVV code of payment card.
• publicId - String Your Public ID, you need to get it in your personal account.

Examples

importRNCloudPaymentfrom'react-native-cloudpayments';constdemoCard={number: '5105105105105100',extDate: '10/18',cvvCode: '123',};constpublicId='pk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';RNCloudPayment.createCryptogram(demoCard.number,demoCard.extDate,demoCard.cvvCode,publicId).then(cryptogram=>{console.log(cryptogram);// 025105105100/11004bpp9ltxt6c0jpdk8ErH+N33N9jZBm9Gr0jO7SVslLg/RdWYyjG5wiLrzmrUserhfblFVydij4wpjDvHH4kRnOskjnbn1XrPI8X9LMkvlR5Pkc63U5puXtnS0rkswS6JYaSErcKMq4TazimKY4rGobvhhYfg45LWdLlX0602t7ZybbaBTMff6wtta870/244s65GTbCI1zt6odDMckpEuiczwM68m6j0Rn2IuKpK8kR58x7tFFc7fWrrW0RHvLNxQIW9P+SpsySoiA4xaZfC7lXL57O80Ye6JDi6PWAim5dENNxIc81T1kmXnKn94x8h2+XS83yMHHfTUOeDb7J1fLg==});

Methods (ios)

convertPayment()

Converts PKPayment object to cryptogram. Used to create a cryptogram on payment via Apple Pay. Example flow. Returns a Promise that resolve cryptogram (String).

Arguments

• payment - PKPayment Payment response from Apple Pay.

Examples

importRNCloudPaymentfrom'react-native-cloudpayments';constMETHOD_DATA=[{supportedMethods: ['apple-pay'],data: {merchantIdentifier: 'merchant.my.app',
supportedNetworks,
countryCode,
currencyCode,},},];constdetails={id: PAYMENT_ID,displayItems: [{label: title,amount: {
currency,value: amountValue},},],total: {label: MERCHANT_NAME,amount: {currency,value: amountValue},},};// create Apple Pay payment requestconstpaymentRequest=newPaymentRequest(METHOD_DATA,details);paymentRequest.show().then((paymentResponse)=>{constcryptogram=RNCloudPayment.convertPayment(paymentResponse);console.log(cryptogram);// 013515...Db7J1fLg==});

Methods (android)

show3DSForm()

Opens dialog window where user should complete 3DS auth. Returns a Promise that resolves to null.

Arguments

• acsUrl - String Access URL.
• transactionId - String Transaction ID.
• paReq - String PA request data.

Examples

importRNCloudPaymentfrom'react-native-cloudpayments';constpaymentResponse=cloudpaymentAPI.make3DSRequest();console.log(paymentResponse);/***{ "Model": { "TransactionId": 504, "PaReq": "eJxVUdtugkAQ/RXDe9mLgo0Z1nhpU9PQasWmPhLYAKksuEChfn13uVR9mGTO7MzZM2dg3qSn0Q+X\nRZIJxyAmNkZcBFmYiMgxDt7zw6MxZ+DFkvP1ngeV5AxcXhR+xEdJ6BhpEZnEYLBdfPAzg56JKSKT\nAhqgGpFB7IuSgR+cl5s3NqFTG2NAPYSUy82aETqeWPYUUAdB+ClnwSmrwtz/TbkoC0BtDYKsEqX8\nZfZkDGgAUMkTi8synyFU17V5N2nKCpBuAHRVs610VijCJgmZu17UXTxhFWP34l7evYPlegsHkO6A\n0C85o5hMsI3piNIZHc+IBaitg59qJYzgdrUOQK7/WNy+3FZAeSqV5cMqAwLe5JlQwpny8T8HdFW8\netFuBqUyahV+Hjf27vWCaSx22fe+KY6kXKZfJLK1x22TZkyUS8QiHaUGgDQN6s+H+tOq7O7kf8hd\nt30=", "AcsUrl": "https://test.paymentgate.ru/acs/auth/start.do" }, "Success": false, "Message": null}*/RNCloudPayment.show3DSForm(paymentResponse.Model.AcsUrl,paymentResponse.Model.TransactionId,paymentResponse.Model.PaReq);

How to get 3DS result in React Native (android)

Step 1

Add Cloudpayments SDK to android/app/build.gradle:

implementation files('../../node_modules/react-native-cloudpayments/android/src/main/libs/cloudpayments-sdk-1.0.5.aar')

Step 2

Implement ThreeDSDialogListener in MainActivity. Example:

import ru.cloudpayments.sdk.three_ds.ThreeDSDialogListener;
...
public class MainActivity extends NavigationActivity implements ThreeDSDialogListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}
@Override
public void onAuthorizationCompleted(String md, String paRes) {
// on successfull 3DS payment
WritableMap params = Arguments.createMap();
params.putString("status", "success");
params.putString("md", md); // transaction id
params.putString("paRes", paRes);
sendEvent(((MainApplication)getApplication()).getReactNativeHost().getReactInstanceManager().getCurrentReactContext(), "Cloudpayments3DSResult", params);
}
@Override
public void onAuthorizationFailed(String html) {
// on failed 3DS payment
WritableMap params = Arguments.createMap();
params.putString("status", "failed");
params.putString("html", html);
sendEvent(((MainApplication)getApplication()).getReactNativeHost().getReactInstanceManager().getCurrentReactContext(), "Cloudpayments3DSResult", params);
}
private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
}

Step 3

Listen for Cloudpayments3DSResult event in React Native. Example:

import {DeviceEventEmitter} from 'react-native';
const nativeEventListener = DeviceEventEmitter.addListener('Cloudpayments3DSResult',
(e)=>{
console.log("caught 3DS result");
console.log(e);
/**
*{
status: "success",
md: "50000789",
paRes: "asd2123...329hjs=="
}
*/
});

License

Licensed under the MIT License.