dannyrot/react-native-cloudpayments-1

CloudPayments SDK for React Native

Всем привет! Мы - Purrweb, однажды, заказчик крупного проекта EnerGO захотел перейти на платежную систему Cloud Payments, но, к сожалению, официальной библиотеки под React Native не оказалось, и нашему разработчику пришлось самому ее пилить. Сегодня мы хотим поделится с вами данной разработкой, поэтому ставьте звезды и пишите issues, мы постараемся поддерживать данный пакет.

CloudPayments SDK позволяет интегрировать прием платежей в мобильные приложение.

Требования:

1. Для работы CloudPayments SDK необходим iOS версии 11.0 и выше.
2. Для работы CloudPayments SDK необходим Android версии 5.0 или выше (API level 21)

Установка

yarn add react-native-cloudpayments-sdk

или

npm install react-native-cloudpayments-sdk

Android

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

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

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

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

• В файле /android/build.gradle в разделе allprojects -> repositories добавьте jcenter()

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

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

О Google Pay

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

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

IOS

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

pod 'Cloudpayments', :git =>  "https://github.com/cloudpayments/CloudPayments-SDK-iOS", :branch => "master"
pod 'CloudpaymentsNetworking', :git =>  "https://github.com/cloudpayments/CloudPayments-SDK-iOS", :branch => "master"
pod 'CardIO'

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

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

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

О Apple Pay

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

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

import { Card } from "react-native-cloudpayments-sdk";

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

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

const isCardNumber = await Card.isCardNumberValid(cardNumber);

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

const isExpDate = await Card.isExpDateValid(expDate); // expDate в формате MM/yy

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

const cardType = await Card.cardType(cardNumber);

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

const { bankName, logoUrl } = await Card.getBinInfo(cardNumber, merchantId);

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

const cryptogramPacket = await Card.makeCardCryptogramPacket({
  cardNumber,
  expDate,
  cvv,
  merchantId,
});

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

const cryptogramPacket = await Card.makeCardCryptogramPacket({
  cvv,
});

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

const { TransactionId, PaRes } = await Card.requestThreeDSecure({
  transactionId,
  paReq,
  acsUrl
})

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

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

import { CreditCardForm } from "react-native-cloudpayments-sdk";

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

const PAYMENT_DATA_CARD = {
  publicId: 'publicId',
  accountId: '1202',
  applePayMerchantId: 'merchant',
  description: 'Test',
  ipAddress: '8.8.8.8',
  invoiceId: '123',
  cardHolderName: 'Votinov Anton',
};

const PAYMENT_JSON_DATA_CARD = {
  age: '24',
  name: 'Anton',
  phone: '[phone]',
};

const creditCardForm = CreditCardForm.initialPaymentData(
  PAYMENT_DATA_CARD,
  PAYMENT_JSON_DATA_CARD
);

• Инициализация суммы оплаты.

creditCardForm.setTotalAmount({
  currency: Currency.ruble,
  totalAmount: '100',
});

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

const result = await creditCardForm.showCreditCardForm({
  useDualMessagePayment: true,  // Использовать двухстадийную схему проведения платежа, по умолчанию используется одностадийная схема
  disableApplePay: true, // Выключить Apple Pay
  disableGPay: true, // Выключить Google Pay
});

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

import { CloudPaymentsApi } from "react-native-cloudpayments-sdk";

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

const PAYMENT_DATA_CARD = {
  publicId: 'publicId',
  accountId: '1202',
  applePayMerchantId: 'merchant',
  description: 'Test',
  ipAddress: '8.8.8.8',
  invoiceId: '123',
  cardHolderName: 'Votinov Anton',
};

const PAYMENT_JSON_DATA_CARD = {
  age: '24',
  name: 'Anton',
  phone: '[phone]',
};

const cloudPaymentsApi = CloudPaymentsApi.initApi(PAYMENT_DATA_CARD, PAYMENT_JSON_DATA_CARD)

• Инициализация суммы оплаты.

cloudPaymentsApi.setTotalAmount({
  currency: Currency.ruble,
  totalAmount: '100',
});

• Создайте криптограмму карточных данных

const cryptogramPacket = await Card.makeCardCryptogramPacket({
  cardNumber,
  expDate,
  cvv,
  merchantId,
});

• Выполните запрос на проведения платежа. Создайте объект CloudpaymentApi и вызовите функцию charge для одностадийного платежа или auth для двухстадийного. Укажите email, на который будет выслана квитанция об оплате.

const results = await cloudPaymentsApi.auth(cryptogramPacket, email)

const results = await cloudPaymentsApi.charge(cryptogramPacket, email)

Использования 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',
    };
  },
})!();

const paymentService = PaymentService.initial(PAYMENT_DATA);

Примичание

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

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

const isSupportPayments = await paymentService.canMakePayments();

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

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

paymentService.setProducts(PRODUCTS);

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

useEffect(() => {
  paymentService.listenerCryptogramCard((cryptogram) => {
    console.warn(cryptogram);
  });

  return () => {
    paymentService.removeListenerCryptogramCard();
  };
}, []);

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

paymentService.openServicePay();

Поддержка

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

License

MIT