- 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.
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.
Tested and developed with:
- WordPress 5.6
- Charitable 1.6.46
- PHP 7.4.13
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
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 |
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'
}
- Создайте резервную копию 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 свойство |
---|---|
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'
}