Требования
Учетная запись Safepay Commerce и учетная запись в песочнице
- Перейдите в Safepay Sandbox и создайте учетную запись.
- Перейдите в раздел Учетная запись › Настройки и запишите свой ключ API.
Добавьте кнопку
Добавьте кнопку Smart Payment на свой сайт. Это руководство по интеграции поможет вам:
- Рендеринг кнопки Safepay Checkout, на которую можно нажать
- Настройте транзакцию и немедленно зафиксируйте средства на своем счете
- Протестируйте кнопку и задействуйте ее на своем сайте.
Добавьте скрипт Safepay на свою домашнюю страницу
Добавьте скрипт Safepay на свою домашнюю страницу
<!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <script src="https://storage.googleapis.com/safepayobjects/api/safepay-checkout.min.js"> </script> </body>
Убедись, что ты
- Добавьте тег
<!DOCTYPE html>
для оптимальной совместимости браузера. - Добавьте на страницу метатег
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
для оптимальной совместимости с Internet Explorer. - Добавьте на страницу тег
<meta name="viewport" content="width=device-width, initial-scale=1">
, чтобы обеспечить оптимальное отображение на мобильных устройствах.
Рендеринг умной кнопки оплаты
Затем отобразите кнопку Smart Payment Safepay в элементе-контейнере на вашей странице:
<html> <body> <script src="https://storage.googleapis.com/safepayobjects/api/safepay-checkout.min.js"> </script> <div id="safepay-button-container"></div> <script> safepay.Button().render('#safepay-button-container'); </script> </body> </html>
Все идет нормально! Это отобразит кнопку на вашей странице в элементе #safepay-button-container
. Чтобы настроить его еще больше, продолжайте читать ниже.
Настроить транзакцию
Далее реализуем функцию payment
, которая вызывается, когда покупатель нажимает кнопку Safepay. Этот шаг:
- Вызывает Safepay с помощью
actions.payment.create()
для настройки деталей транзакции, включая сумму, валюту и т. д. - Запускает окно Safepay Checkout, чтобы покупатель мог войти в систему или оформить заказ как гость и подтвердить транзакцию в Safepay.
<script> safepay.Button.render({ // Choose between "production" or "sandbox" env: 'sandbox', // The amount you wish you charge amount: 6800.57, // The currency of the purchase currency: "PKR", // Your API Keys client: { "sandbox": "sec_4f84abd2-0bae-4476-be6b-22c8c9e35133" "production": "<YOUR_PRODUCTION_KEY>" }, payment: function (data, actions) { return actions.payment.create({ transaction: { amount: 6800.57, currency: 'PKR' } }) } }, '#safepay-button-container'); </script>
Зафиксировать транзакцию
Далее реализуем функцию onCheckout
, которая вызывается после того, как покупатель подтвердит транзакцию в Safepay. Эта функция:
- Возвращает объект
data
, содержащий сведения об успешной транзакции, которые ваша система должна хранить в своей базе данных. - Позволяет показать пользователю соответствующее сообщение, объясняющее, что платеж принят и транзакция прошла успешно.
<script> safepay.Button.render({ // Choose between "production" or "sandbox" env: 'sandbox', // The amount you wish you charge amount: 6800.57, // The currency of the purchase currency: "PKR", // Your API Keys client: { "sandbox": "sec_4f84abd2-0bae-4476-be6b-22c8c9e35133" "production": "<YOUR_CLIENT_KEY>" }, payment: function (data, actions) { return actions.payment.create({ transaction: { amount: 6800.57, currency: 'PKR' } }) }, onCheckout: function(data, actions) { console.log(data) console.log("You completed the payment!"); } }, '#safepay-button-container'); </script>
Объект data
, возвращаемый после успешного завершения транзакции покупателем, будет выглядеть следующим образом:
{ amount: 100 client: "client_071f9c25-c291-4dcf-a21e-79b576ddd0fd" created_at: "2019-05-15T20:04:55Z" currency: "PKR" fees: 30 net: 70 reference: "274263" token: "trans_24106c57-2627-44b7-9744-2e7b31c77e29" tracker: "track_3d7c740f-42b7-4844-8d93-80d86826c912" updated_at: "2019-05-15T20:04:55Z" user: "guest_ceea0319-0f3b-4921-bb05-aed3d2f1404d" }
Обработка отмен
Чтобы получить уведомление, если покупатель отменил транзакцию в какой-либо момент, реализуйте функцию onCancel
.
<script> safepay.Button.render({ // Choose between "production" or "sandbox" env: 'sandbox', // The amount you wish you charge amount: 6800.57, // The currency of the purchase currency: "PKR", // Your API Keys client: { "sandbox": "sec_4f84abd2-0bae-4476-be6b-22c8c9e35133" "production": "<YOUR_CLIENT_KEY>" }, payment: function (data, actions) { return actions.payment.create({ transaction: { amount: 6800.57, currency: 'PKR' } }) }, onCheckout: function(data, actions) { console.log(data) console.log("You completed the payment!"); }, onCancel: function (data, actions) { // The buyer cancelled the payment // Don't create an order in your system }, }, '#safepay-button-container'); </script>
Тестирование транзакций песочницы
Чтобы протестировать транзакции песочницы, выполните следующие действия:
- Нажмите кнопку Safepay Checkout и пройдите процедуру оформления заказа.
- Когда вы дойдете до формы кредитной карты, используйте следующую тестовую карту Visa
Номер: 4111111111111111
Срок действия: 19 ноября
Cvv: 111 - Нажмите Авторизовать транзакцию, а затем Завершить покупку.
- Посетите панель инструментов Sandbox и убедитесь, что платеж отображается
В прямом эфире
Чтобы запустить кнопку в производство, выполните следующие действия:
- Создайте учетную запись на Safepay Production, если вы еще этого не сделали.
- Перейдите в раздел Учетная запись › Настройки и запишите свой ключ API.
- Добавьте рабочий API-ключ в
client
конфигурацию кнопки.
// Your API Keys client: { "sandbox": "sec_4f84abd2-0bae-4476-be6b-22c8c9e35133" "production": "<YOUR_CLIENT_KEY>" },
- Переключите
env
сsandbox
наproduction
Поздравляем. Вы завершили базовую интеграцию Safepay Smart Payment Button. Ваша новая кнопка будет настроена и будет фиксировать простые разовые платежи.