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: 'JsusDev@yandex.ru',
    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: 'JsusDev@yandex.ru',
    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: 'JsusDev@yandex.ru',
    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: 'JsusDev@yandex.ru',
    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: 'JsusDev@yandex.ru',
    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: 'JsusDev@yandex.ru',
    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