BeGateway payment gateway for WP Charitable

Русская версия

Installation

• Backup your WordPress and database
• Download charitable-begateway.zip
• Start up the administrative panel for WordPress (www.yourshop.com/wp-admin/)
• Choose Plugins → Add New
• Upload the payment module archive via Upload Plugin.
• Choose Plugins → Installed Plugins and find the BeGateway Payment Gateway for WP Charitable plugin and activate it.

Setup

Now go to Charitable → Settings → Payment Gateways

Look for a table row called BeGateway and click the Gateway Settings button to configure settings of the payment gateway.

Enter in fields as follows:

• Gateway Label e.g. Credit or debit card
• Shop ID
• Secret key
• Public key
• Payment page domain
• Widget CSS

values received from your payment processor.

• click Save Changes

Now the payment gateway is configured.

Notes

Tested and developed with:

• WordPress 5.6
• Charitable 1.6.46
• PHP 7.4.13

Testing

You can use the following information to adjust the payment method in test mode:

• Shop ID: 361
• Secret key: b8647b68898b084b836474ed8d61ffe117c9a01168d867f24953b776ddcb134d
• Public key: MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArO7bNKtnJgCn0PJVn2X7QmhjGQ2GNNw412D+NMP4y3Qs69y6i5T/zJBQAHwGKLwAxyGmQ2mMpPZCk4pT9HSIHwHiUVtvdZ/78CX1IQJON/Xf22kMULhquwDZcy3Cp8P4PBBaQZVvm7v1FwaxswyLD6WTWjksRgSH/cAhQzgq6WC4jvfWuFtn9AchPf872zqRHjYfjgageX3uwo9vBRQyXaEZr9dFR+18rUDeeEzOEmEP+kp6/Pvt3ZlhPyYm/wt4/fkk9Miokg/yUPnk3MDU81oSuxAw8EHYjLfF59SWQpQObxMaJR68vVKH32Ombct2ZGyzM7L5Tz3+rkk7C4z9oQIDAQAB
• Payment page domain: checkout.begateway.com

Enable Turn on Test Mode in the Charitable Payment Gateways tab.

Use the following test card to make successful test payment:

• Card number: 4200000000000000
• Name on card: JOHN DOE
• Card expiry date: 01/30
• CVC: 123

Use the following test card to make failed test payment:

• Card number: 4005550000000019
• Name on card: JOHN DOE
• Card expiry date: 01/30
• CVC: 123

Widget style

Styles that are being used by the widget

Style name
widget
header
headerPrice
headerDescription
headerDescriptionText
headerClose
footer
footerText
footerLink
footerSecurity
main
methodsMenu
methodsMenuText
methodsMenuCard
methodsMenuCardText
methodsMenuList
methodsMenuListMethod
methodsMenuGrid
methodsMenuGridMethod
cardsMenu
cardsMenuText
cardsMenuCard
cardsMenuCardText
card
cardSides
cardFace
cardFaceContent
cardBack
cardBackMagneticLine
cardBackCVC
cardBackCVCText
cardBackCVCInput
cardPoints
cardCustomer
cardCustomerField
cardButton
eripContent
eripTitle
eripOrder
eripOrderTitle
eripOrderNumber
eripBanks
eripBanksTitle
eripQRCode
eripBanksComment
eripBanksLinks
eripBanksBank
eripBanksMore
paymentResult
paymentResultStatus
paymentResultStatusText
paymentResultDetails
paymentResultDetailsText
paymentResultButton
method
methodContent
methodTitle
methodForm
methodButton
methodWaiting
phoneLabel
inputGroup
inputGroupField
inputGroupSelect
stepBack
stepBackText

Customizable CSS properties

The widget supports only properties listed below.

Property	Equal CSS property
color	color
backgroundColor	background-color
border	border
borderRadius	border-radius
fontFamily	font-family
fontSize	font-size
fontSmoothing	font-smoothing
fontStyle	font-style
fontVariant	font-variant
fontWeight	font-weight
lineHeight	line-height
letterSpacing	letter-spacing
margin	margin
padding	padding
textAlign	text-align
textDecoration	text-decoration
textShadow	text-shadow
textTransform	text-transform

Values of CSS properties may accept values compatible with CSS syntax.

You may use a browser Developer Tools (Inspect element) to know what CSS elements are in use and how they are nested.

Example

header: {
  backgroundColor: '#fff',
  border: 'none'
},
headerPrice: {
  color: '#fff'
},
footer: {
  backgroundColor: '#fff',
  border: 'none'
},
cardButton: {
  backgroundColor: '#26d893',
  border: 'none'
},
methodButton: {
  backgroundColor: '#26d893',
  border: 'none'
},
paymentResultButton: {
  backgroundColor: '#26d893',
  border: 'none'
}

Платежный шлюз BeGateway для WP Charitable

English version

Установка

• Создайте резервную копию WordPress и базы данных
• Загрузите charitable-begateway.zip
• Зайдите в панель администратора WordPress (www.yourshop.com/wp-admin/)
• Выберите Плагины → Добавить новый
• Загрузите модуль через Добавить новый
• Выберите Плагины → Установленные и найдите Платежный шлюз BeGateway для WP Charitable плагин и активируйте его.

Настройка

Зайдите в Charitable → Настройка. → Платежная система

Найдите в таблице доступных платежных шлюзов BeGateway и нажмите кнопку Настройки шлюза, чтобы настроить данный способ оплаты.

В следующих полях

• Метка шлюза
• ID магазина
• Секретный ключ
• Публичный ключ
• Домен страницы оплаты
• CSS стили виджета

введите значения, полученные от вашей платежной компании.

• нажмите Сохранить изменения

Платежный шлюз настроен и готов к работе.

Примечания

Разработанно и протестировано с:

• WordPress 5.6
• Charitable 1.6.46
• PHP 7.4.13

Тестирование

Вы можете использовать следующие данные, чтобы настроить способ оплаты в тестовом режиме

• ID магазина: 361
• Секретный ключ: b8647b68898b084b836474ed8d61ffe117c9a01168d867f24953b776ddcb134d
• Публичный ключ: MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArO7bNKtnJgCn0PJVn2X7QmhjGQ2GNNw412D+NMP4y3Qs69y6i5T/zJBQAHwGKLwAxyGmQ2mMpPZCk4pT9HSIHwHiUVtvdZ/78CX1IQJON/Xf22kMULhquwDZcy3Cp8P4PBBaQZVvm7v1FwaxswyLD6WTWjksRgSH/cAhQzgq6WC4jvfWuFtn9AchPf872zqRHjYfjgageX3uwo9vBRQyXaEZr9dFR+18rUDeeEzOEmEP+kp6/Pvt3ZlhPyYm/wt4/fkk9Miokg/yUPnk3MDU81oSuxAw8EHYjLfF59SWQpQObxMaJR68vVKH32Ombct2ZGyzM7L5Tz3+rkk7C4z9oQIDAQAB
• Домен страницы оплаты: checkout.begateway.com

Включите тестовый режим работы платежной системы на странице Charitable → Настройка. → Платежная система

Используйте следующие данные карты для успешного тестового платежа:

• Номер карты: 4200000000000000
• Имя на карте: JOHN DOE
• Месяц срока действия карты: 01/30
• CVC: 123

Используйте следующие данные карты для неуспешного тестового платежа:

• Номер карты: 4005550000000019
• Имя на карте: JOHN DOE
• Месяц срока действия карты: 01/30
• CVC: 123

Стиль виджета

Стили, используемые в виджете

Имя стиля
widget
header
headerPrice
headerDescription
headerDescriptionText
headerClose
footer
footerText
footerLink
footerSecurity
main
methodsMenu
methodsMenuText
methodsMenuCard
methodsMenuCardText
methodsMenuList
methodsMenuListMethod
methodsMenuGrid
methodsMenuGridMethod
cardsMenu
cardsMenuText
cardsMenuCard
cardsMenuCardText
card
cardSides
cardFace
cardFaceContent
cardBack
cardBackMagneticLine
cardBackCVC
cardBackCVCText
cardBackCVCInput
cardPoints
cardCustomer
cardCustomerField
cardButton
eripContent
eripTitle
eripOrder
eripOrderTitle
eripOrderNumber
eripBanks
eripBanksTitle
eripQRCode
eripBanksComment
eripBanksLinks
eripBanksBank
eripBanksMore
paymentResult
paymentResultStatus
paymentResultStatusText
paymentResultDetails
paymentResultDetailsText
paymentResultButton
method
methodContent
methodTitle
methodForm
methodButton
methodWaiting
phoneLabel
inputGroup
inputGroupField
inputGroupSelect
stepBack
stepBackText

Настраиваемые CSS свойства

Никакие другие CSS свойства не поддерживаются.

Параметр	Соответствующее CSS свойство
color	color
backgroundColor	background-color
border	border
borderRadius	border-radius
fontFamily	font-family
fontSize	font-size
fontSmoothing	font-smoothing
fontStyle	font-style
fontVariant	font-variant
fontWeight	font-weight
lineHeight	line-height
letterSpacing	letter-spacing
margin	margin
padding	padding
textAlign	text-align
textDecoration	text-decoration
textShadow	text-shadow
textTransform	text-transform

Значениями CSS свойств могут быть текстовые значения совместимые с CSS синтаксисом (см. пример выше). Структуру html-документа виджета с используемыми стилями можно посмотреть с помощью Developer Tools браузера (Inspect element).

Пример

header: {
  backgroundColor: '#fff',
  border: 'none'
},
headerPrice: {
  color: '#fff'
},
footer: {
  backgroundColor: '#fff',
  border: 'none'
},
cardButton: {
  backgroundColor: '#26d893',
  border: 'none'
},
methodButton: {
  backgroundColor: '#26d893',
  border: 'none'
},
paymentResultButton: {
  backgroundColor: '#26d893',
  border: 'none'
}