CloudPayments SDK позволяет интегрировать прием платежей в мобильные приложение.
-
Для работы CloudPayments SDK необходим iOS версии 11.0 и выше.
-
Для работы CloudPayments SDK необходим Android версии 6.0 или выше, и следующие зависимости (API level 23)
минимальные версии окружения: compileSdkVersion 31, build:gradle 3.6.0, ndkVersion 21.4.7075529
yarn add react-native-cloudpayments-sdk
или
npm install react-native-cloudpayments-sdk
- добавьте Yandex Client ID в
android/app/build.gradle
, для Yandex Pay (если Yandex Pay не используется, добавльте пустое значение)
android {
...
defaultConfig {
...
manifestPlaceholders = [
YANDEX_CLIENT_ID: ""
]
...
}
...
}
- Чтобы включить 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.reactnativecloudpayments.ThreeDSecureActivity"
/>
-
В файле
/android/build.gradle
в разделеallprojects -> repositories
добавьтеjcenter()
-
Убедитесь, что дебажная версия приложения подписана релизным ключом, чтобы тестировать Google Pay в режиме Production.
- Добавьте в
ios/Podfile
pod 'Cloudpayments', :git => "https://github.com/cloudpayments/CloudPayments-SDK-iOS", :tag => '1.1.9'
pod 'CloudpaymentsNetworking', :git => "https://github.com/cloudpayments/CloudPayments-SDK-iOS", :tag => '1.1.9'
-
Выполните
pod install
в папке ios -
Yandex Pay для ios пока не доступен
Для использования технологии Apple Pay вам необходимо зарегистрировать Merchant ID, сформировать платежный сертификат, сертификат для веб-платежей и подтвердить владение доменами сайтов, на которых будет производиться оплата.
import { Card } from 'react-native-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
import { CreditCardForm } from 'react-native-cloudpayments-sdk';
- Инициализация
const PAYMENT_DATA_CARD = {
publicId: 'publicId',
accountId: '1202',
applePayMerchantId: 'merchant',
googlePayMerchantId: 'merchant',
ipAddress: '8.8.8.8',
cardHolderName: 'Votinov Anton',
yandexPayMerchantID: 'yandexPayMerchantID',
};
const PAYMENT_JSON_DATA_CARD = {
age: '24',
name: 'Anton',
phone: '+7912343569',
};
const creditCardForm = CreditCardForm.initialPaymentData(
PAYMENT_DATA_CARD,
PAYMENT_JSON_DATA_CARD
);
- Инициализация суммы оплаты.
creditCardForm.setDetailsOfPayment({
currency: Currency.ruble,
totalAmount: '1000',
invoiceId: '123',
description: 'Test',
});
- Вызов формы оплаты.
const result = await creditCardForm.showCreditCardForm({
useDualMessagePayment: true, // Использовать двухстадийную схему проведения платежа
disableApplePay: false, // Включить Apple Pay, по умолчанию выключен
disableGPay: false, // Включить Google Pay, по умолчанию выключен
disableYandexPay: false, // Включить Yandex Pay, по умолчанию выключен
});
import { CloudPaymentsApi } from 'react-native-cloudpayments-sdk';
- Инициализация
const PAYMENT_DATA_CARD = {
publicId: 'publicId',
accountId: '1202',
ipAddress: '8.8.8.8',
cardHolderName: 'Votinov Anton',
};
const PAYMENT_JSON_DATA_CARD = {
age: '24',
name: 'Anton',
phone: '+7912343569',
};
const cloudPaymentsApi = CloudPaymentsApi.initialApi(
PAYMENT_DATA_CARD,
PAYMENT_JSON_DATA_CARD
);
- Инициализация суммы оплаты.
cloudPaymentsApi.setDetailsOfPayment({
currency: Currency.ruble,
totalAmount: '1000',
invoiceId: '123',
description: 'Test',
});
- Создайте криптограмму карточных данных
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);
- 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();
Вотинов Антон
По возникающим вопросам техничечкого характера и предложениями обращайтесь на antonvotinov@gmail.com
MIT