Требования

Учетная запись Safepay Commerce и учетная запись в песочнице

  1. Перейдите в Safepay Sandbox и создайте учетную запись.
  2. Перейдите в раздел Учетная запись › Настройки и запишите свой ключ 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. Ваша новая кнопка будет настроена и будет фиксировать простые разовые платежи.