lang: ru en

React-Tinkoff-Pay

react-tinkoff-pay - Форма для интернет экваринга Тинькофф банка в виде React компонента

Почему ?

Я не нашел официального или какого еще компонента для работы с Тинькофф банком, поэтому я сделал свой, а точнее приспособил уже готовое API под React компонент

С чего начать

Установим npm модуль react-tinkoff-pay

$ npm install react-tinkoff-pay -s

или

$ yarn add react-tinkoff-pay -s

Примеры

подключение модуля

es6

import Tinkoff from 'react-tinkoff-pay'

es5

const Tinkoff = require('react-tinkoff-pay')

чтобы начать вам понадобится объект формы все параметры описаны в официальной документации: oplata.tinkoff.ru api

Объект используется в следующих функциях

функция для генерации ссылки

import Tinkoff from 'react-tinkoff-pay'

Tinkoff.Link({	
	terminalkey: 'TinkoffBankTest',
	language: 'ru',
	amount: '513',
	order: '1488228',
	description: '',
	name: 'Георгий Алексеевич',
	email: '[email protected]',
	phone: '79055594564' 
}, link => {
	console.log(link) // => https://securepay.tinkoff.ru/xo7L8v
})

генерация платежной формы в фрейме

const form = {	
	terminalkey: 'TinkoffBankTest',
	frame: 'true',
	language: 'ru',
	amount: '22',
	order: '222123',
	description: '',
	name: '',
	email: '[email protected]',
	phone: '79055594564' 
}

<Tinkoff.Pay 
	form={form} 
	onClose={() => console.log('close')} /> // JSX Component!

Также можно стилизовать форму

генерация платежной формы в фрейме

const form = {	
	terminalkey: 'TinkoffBankTest',
	frame: 'true',
	language: 'ru',
	amount: '22',
	order: '222123',
	description: '',
	name: '',
	email: '[email protected]',
	phone: '79055594564' 
}

const darkBackground =  {
	zIndex: '9997', 
	opacity: '0.6', 
	position: 'fixed', 
	left: '0px', 
	top: '0px', 
	bottom: '0px', 
	right: '0px', 
	border: '0px', 
	overflow: 'visible', 
	backgroundColor: 'rgba(255,0,255, 0.6)'
}

const style = {
	darkBackground
}

<Tinkoff.Pay 
    form={form} 
    style={style}
    onClose={() => console.log('close')} /> // JSX Component styling!

Стилизация платежной формы

объекты стилей которые возможно изменять и их значения по умолчанию

const payFormContainer = {
	zIndex: '9996', 
	height: '100%', 
	width: '100%', 
	position: 'fixed', 
	left: '0px', 
	top: '0px'
}

const darkBackground = {
	zIndex: '9997', 
	opacity: '0.6', 
	position: 'fixed', 
	left: '0px', 
	top: '0px', 
	bottom: '0px', 
	right: '0px', 
	border: '0px', 
	overflow: 'visible', 
	backgroundColor: 'rgb(0, 0, 0)'
}

const div_frame = {
	height: '800px', 
	width: '1000px', 
	maxWidth: '1200px', 
	left: '50%', 
	top: '10%', 
	position: 'absolute', 
	zIndex: '9998', 
	border: '0px'
}

const closeButton = {
	top: '16px', 
	width: '48px', 
	height: '32px', 
	right: '50%', 
	background: 'url("https://securepay.tinkoff.ru/html/payForm/img/close-button.png") no-repeat', 
	position: 'absolute', 
	zIndex: '9999', 
	cursor: 'pointer', 
	border: 'none', 
	visibility: 'visible'
}

const payFormIframe = {
	width: '100%', 
	height: '100%', 
	border: 'none',
	borderRadius: '3px',
	left: '-50%', 
	position: 'relative', 
	backgroundColor: 'white'
}

const style = {
	payFormContainer,
	darkBackground,
	div_frame,
	closeButton,
	payFormIframe
}

Контакты

Мой Телегам: @JSusDev, канал https://t.me/Jsusdevs

если у вас есть какие-либо вопросы и/или предложения, пожалуйста, напишите мне в телеграмме, если вы найдете ошибки я буду очень благодарен, также дайте мне знать

react-tinkoff-pay by JSus

React-Tinkoff-Pay

react-tinkoff-pay - Pay-form for Tinkoff Bank as ReactJS component

Why?

I did not find an official or any other component to work with Tinkoff Bank, so I made my own, or rather adapted the ready API for React component

Get started

Install the npm module react-tinkoff-pay

$ npm install react-tinkoff-pay -s

или

$ yarn add react-tinkoff-pay -s

Examples

module connection

es6

import Tinkoff 'react-tinkoff-pay'

es5

const Tinkoff = require('react-tinkoff-pay')

to get started you will need the form object all parameters are described in the official documentation: oplata.tinkoff.ru api

The form object is used in the following functions

function for link generation

import Tinkoff from 'react-tinkoff-pay'

Tinkoff.Link({	
	terminalkey: 'TinkoffBankTest',
	language: 'ru',
	amount: '513',
	order: '1488228',
	description: '',
	name: 'Георгий Алексеевич',
	email: '[email protected]',
	phone: '79055594564' 
}, link => {
	console.log(link) // => https://securepay.tinkoff.ru/xo7L8v1
})

generate a payment form in a frame

const form = {	
	terminalkey: 'TinkoffBankTest',
	frame: 'true',
	language: 'ru',
	amount: '22',
	order: '222123',
	description: '',
	name: '',
	email: '[email protected]',
	phone: '79055594564' 
}

<Tinkoff.Pay 
	form={form} 
	onClose={() => console.log('close')} /> // JSX Component!

You can also style the shape

generate a payment form in a frame

const form = {	
	terminalkey: 'TinkoffBankTest',
	frame: 'true',
	language: 'ru',
	amount: '22',
	order: '222123',
	description: '',
	name: '',
	email: '[email protected]',
	phone: '79055594564' 
}

const darkBackground =  {
	zIndex: '9997', 
	opacity: '0.6', 
	position: 'fixed', 
	left: '0px', 
	top: '0px', 
	bottom: '0px', 
	right: '0px', 
	border: '0px', 
	overflow: 'visible', 
	backgroundColor: 'rgba(255,0,255, 0.6)'
}

const style = {
	darkBackground
}

<Tinkoff.Pay 
    form={form} 
    style={style} 
    onClose={() => console.log('close')} /> // JSX Component styling!

Styling the payment form

style objects that can be changed and their default values

const payFormContainer = {
	zIndex: '9996', 
	height: '100%', 
	width: '100%', 
	position: 'fixed', 
	left: '0px', 
	top: '0px'
}

const darkBackground = {
	zIndex: '9997', 
	opacity: '0.6', 
	position: 'fixed', 
	left: '0px', 
	top: '0px', 
	bottom: '0px', 
	right: '0px', 
	border: '0px', 
	overflow: 'visible', 
	backgroundColor: 'rgb(0, 0, 0)'
}

const div_frame = {
	height: '800px', 
	width: '1000px', 
	maxWidth: '1200px', 
	left: '50%', 
	top: '10%', 
	position: 'absolute', 
	zIndex: '9998', 
	border: '0px'
}

const closeButton = {
	top: '16px', 
	width: '48px', 
	height: '32px', 
	right: '50%', 
	background: 'url("https://securepay.tinkoff.ru/html/payForm/img/close-button.png") no-repeat', 
	position: 'absolute', 
	zIndex: '9999', 
	cursor: 'pointer', 
	border: 'none', 
	visibility: 'visible'
}

const payFormIframe = {
	width: '100%', 
	height: '100%', 
	border: 'none',
	borderRadius: '3px',
	left: '-50%', 
	position: 'relative', 
	backgroundColor: 'white'
}

const style = {
	payFormContainer,
	darkBackground,
	div_frame,
	closeButton,
	payFormIframe
}

Contacts

my telegram: @JSusDev, channel https://t.me/Jsusdevs

if you have any questions and suggestions please email me in telegram if you find bugs I will be very grateful if you also let me know

react-tinkoff-pay JSus