CloudPayments SDK for React Native

CloudPayments SDK позволяет интегрировать прием платежей для кроссплатформенных мобильных приложений на react-native.

Поддержка нативных версий

1. Android: cloudpayments-android 1.7.1
2. IOS: cloudpayments-ios 1.5.18
3. Из-за различий версий между библиотеками, могут быть отличия в поддержке некоторого функционала

Требования:

1. Для работы CloudPayments SDK необходим iOS версии 13.0 и выше.
2. Для работы CloudPayments SDK необходим Android версии 6.0 или выше (API level 23)
3. Добавлена поддержка JSI архитектуры react-native

Установка

yarn add react-native-cloudpayments-sdk

или

npm install react-native-cloudpayments-sdk

Android

• Чтобы включить Google Pay в приложении, добавьте следующие метаданные в тег <application> файла AndroidManifest.xml.

<meta-data
  android:name="com.google.android.gms.wallet.api.enabled"
  android:value="true" />

• Чтобы использовать экран для подтверждения оплаты, добавьте activity в тег <application> файла AndroidManifest.xml.

  <activity
    android:name="com.cloudpaymentssdk.ThreeDSecureActivity"
  />

• Убедитесь, что дебажная версия приложения подписана релизным ключом, чтобы тестировать Google Pay в режиме Production.

Документации по интеграции Google Pay

О Google Pay

Документация

Официальный репозиторий SDK

IOS

• Добавьте в ios/Podfile

  pod 'Cloudpayments', :git =>  "https://gitpub.cloudpayments.ru/integrations/sdk/cloudpayments-ios", :tag => '1.5.18'
  pod 'CloudpaymentsNetworking', :git =>  "https://gitpub.cloudpayments.ru/integrations/sdk/cloudpayments-ios", :tag => '1.5.18'

• Выполните pod install в папке ios

Для использования технологии Apple Pay вам необходимо зарегистрировать Merchant ID, сформировать платежный сертификат, сертификат для веб-платежей и подтвердить владение доменами сайтов, на которых будет производиться оплата.

Документации по интеграции Apple Pay

О Apple Pay

Официальный репозиторий SDK

Использование

import { CardService } from 'react-native-cloudpayments-sdk';

Возможности CloudPayments SDK:

• Проверка карточного номера на корректность

const result = await CardService.isValidNumber(cardNumber);

• Проверка срока действия карты

const result = await CardService.isValidExpDate(expDate); // expDate в формате MM/yy

• Проверка cvv карты

const result = await CardService.isValidCvv(cvv);

• Определение типа платежной системы

const cardType = await CardService.cardType(cardNumber);

• Определение банка эмитента

const { bankName, cardType, convertedAmount, currency, hideCvv, logoUrl } =
  await CloudPaymentsAPI.getBinInfo(cardNumber);

• Шифрование карточных данных и создание криптограммы для отправки на сервер

const cryptogramPacket = await CardService.createCardCryptogram(
  cardNumber,
  cardDate,
  cardCVC,
  publicId,
  publicKey
  keyVersion
);

• Шифрование cvv при оплате сохраненной картой и создание криптограммы для отправки на сервер

const cryptogramPacket = await CardService.cardCryptogramForCVV({
  cvv,
});

• Отображение 3DS формы и получении результата 3DS аутентификации

const { TransactionId, PaRes } = await ThreeDSecure.request({
  acsUrl,
  md,
  paReq,
});

Смотрите документацию по API: Платёж - обработка 3-D Secure

Использование стандартной платежной формы Cloudpayments:

import { PaymentForm } from 'react-native-cloudpayments-sdk';

• Доп. поле, куда передается информация о плательщике

PaymentForm.createPayer({
  address: '13',
  birthDay: '15.08.1998',
  city: 'Moscow',
  country: 'Russia',
  firstName: 'Anton',
  middleName: 'Alexandrovich',
  lastName: 'Votinov',
  phone: '89999999999',
  postcode: 'RU',
  street: 'Lenina',
});

• Создание чека

PaymentForm.createDataReceipt(
  [
    {
      label: 'description',
      price: 300.0,
      quantity: 3.0,
      amount: 900.0,
      vat: 20,
      method: 0,
      objectt: 0,
    },
  ],
  {
    electronic: 900.0,
    advancePayment: 0.0,
    credit: 0.0,
    provision: 0.0,
  },
  {
    taxationSystem: 0,
    email: 'email',
    phone: 'payerPhone',
    isBso: false,
  }
);

• Создание объекта подписки

PaymentForm.createDataRecurrent({
  amount: 10,
  interval: '1',
  maxPeriods: 10,
  period: 10,
  startDate: '15.08.1998',
});

• Создание PaymentData

PaymentForm.createPaymentData({
  amount: '10',
  currency: CURRENCY.RUBLE,
  accountId: 'test',
  description: 'test',
  email: 'test',
  invoiceId: 'test',
});

• Вызов формы оплаты.

const result = await PaymentForm.open({
  useDualMessagePayment: true, // Использовать двухстадийную схему проведения платежа
  mode: 'SelectPaymentMethod', // вараинт формы
  publicId: '', // Ваш Public_id из личного кабинета
  requireEmail: true, // Обязателный email для проведения оплаты (по умолчанию false)
  saveCardForSinglePaymentMode: true, // Галочка для сохранения или не сохранения карты
  showResultScreenForSinglePaymentMode: true, // Показывать или нет экран с результатом оплаты
  testMode: true,
});

Использование вашей платежной формы с использованием функций CloudpaymentsApi:

import { CloudPaymentsAPI } from 'react-native-cloudpayments-sdk';

• Инициализация

CloudPaymentsAPI.initialization(publicId);

• Получить публичный ключ

CloudPaymentsAPI.getPublicKey();

Использования Google Pay / Apple Pay

Поддержка типов платежных систем:

• Visa
• Master Card
• Discover
• Interac
• JCB (IOS 10.1+)
• MIR (только IOS 14.5+)

import {
  PAYMENT_NETWORK,
  PaymentService,
} from 'react-native-cloudpayments-sdk';

• Инициализация

const PAYMENT_DATA = Platform.select({
  ios: () => {
    return {
      merchantId: 'applePayMerchantID',
      supportedNetworks: [
        PAYMENT_NETWORK.masterCard,
        PAYMENT_NETWORK.visa,
        PAYMENT_NETWORK.amex,
        PAYMENT_NETWORK.interac,
        PAYMENT_NETWORK.discover,
        PAYMENT_NETWORK.mir,
        PAYMENT_NETWORK.jcb,
      ],
      countryCode: 'RU',
      currencyCode: 'RUB',
    };
  },
  android: () => {
    return {
      merchantId: 'googlePayMerchantID',
      merchantName: 'Example',
      gateway: {
        service: 'cloudpayments',
        merchantId: 'cloudpaymentsPublicID',
      },
      supportedNetworks: [
        PAYMENT_NETWORK.masterCard,
        PAYMENT_NETWORK.visa,
        PAYMENT_NETWORK.amex,
        PAYMENT_NETWORK.interac,
        PAYMENT_NETWORK.discover,
        PAYMENT_NETWORK.jcb,
      ],
      countryCode: 'RU',
      currencyCode: 'RUB',
      environmentRunning: 'Test',
    };
  },
})!();

ServicePay.initial(PAYMENT_DATA);

Примичание

cloudpaymentsPublicID: Ваш Public ID, его можно посмотреть в личном кабинете.

• Проверка, доступны ли пользователю эти платежные системы

const isSupportPayments = await ServicePay.canMakePayments();

• Создайте массив покупок и передайте его в метод setProducts

const PRODUCTS = [
  { name: 'example_1', price: '1' },
  { name: 'example_2', price: '10' },
  { name: 'example_3', price: '15' },
];

ServicePay.setProducts(PRODUCTS);

• Чтобы получить результат оплаты, нужно подписаться на listener

useEffect(() => {
  const listenner = ServicePay.onServicePayToken((cryptogram) => {
    console.warn(cryptogram);
  });

  return () => {
    listenner.remove();
  };
}, []);

• Выполните оплату

ServicePay.open();

Автор

Вотинов Антон

Поддержка

По возникающим вопросам техничечкого характера и предложениями обращайтесь на [email protected]

Дополнительная информация о библиотеки

Первая версия библиотеки писалась для проекта EnerGO, разработанным компанией Purrweb

Спонсором новой версии библиотеки стала компания Purrweb

License

MIT