Stripe предоставляет несколько библиотек JavaScript - Stripe Elements & Checkout - которые позволяют удобно собирать и проверять источники оплаты, такие как кредитные карты, банковские счета и т. Д. С Stripe.js вы также можете токенизировать конфиденциальную информацию, интегрироваться с Checkout и обрабатывать аутентификацию 3D Secure.

Что такое полосы?

Stripe Elements - это набор предварительно созданных компонентов пользовательского интерфейса, таких как вводы и кнопки, для построения процесса оформления заказа.

Элементы включают такие функции, как:

  • Информация Форматирование карты автоматически при вводе
  • Перевод заполнителей на язык, предпочитаемый вашим клиентом
  • Используйте адаптивный дизайн, чтобы он соответствовал ширине экрана вашего клиента или мобильного устройства.
  • Настройка стиля в соответствии со стилем оформления заказа.

Предварительные требования

  • Узел установлен на вашем компьютере
  • NPM установлен на вашем компьютере
  • Установка Angular CLI 10: npm install -g @ angular / cli
  • Создание проекта Angular 8: новый пример angular

Теперь мы создадим простую форму оплаты, используя Angular Reactive Forms.

Настройка

  1. Включите Stripe.js в тег ‹head› файла index.html.
<script src="https://js.stripe.com/v3/"></script>

2. Настройте Stripe, используя следующий фрагмент.

var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    locale: 'auto',
    email: '[email protected]',
    token: function (token) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
    }
});

Или мы можем использовать доступный пакет npm для Stripe, используя следующую команду.

For npm => npm install @stripe/stripe-js
For yarn => yarn add @stripe/stripe-js

Следующим шагом является инициализация Stripe с помощью функции loadStripe, предоставляемой пакетом.

import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

Использование платежного шлюза в вашем приложении

В соответствии с выбранным планом экран будет перенаправлен на экран платежного шлюза Stripe.

  1. Создание платежной формы.

Используйте следующий код в своем component.html

<form action="/charge" method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label>
        <div id="card-element">
            <!-- a Stripe Element will be inserted here. -->
        </div>
        <!-- Used to display form errors -->
        <div id="card-errors" role="alert"></div>
    </div>
    <input type="submit" class="submit" value="Submit Payment">
</form>

И это в вашем component.ts

const stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
const elements = stripe.elements();

Теперь вы можете создать элемент карты и добавить его на свою страницу с помощью метода mount ().

var card = elements.create('card');
// Add an instance of the card UI component into the `card-element`
card.mount('#card-element');

2. Настройте элемент карты.

const style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};
// Create an instance of the card Element.
const card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

3. Обработка событий и ошибок.

Элементы также предоставляют в режиме реального времени конкретную информацию об ошибках проверки, помогая вам сообщить о них своим пользователям. Добавьте это в свой component.ts.

card.addEventListener('change',(event)=>{
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

4. Создайте токен для безопасности при отправке формы.

Передайте метод createToken () в качестве первого аргумента для создания токена для проверки оплаты. Добавьте приведенный ниже код в файл component.ts:

createToken() {
  stripe.createToken(card).then((result)=>{
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
};
// Create a token when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit',(event)=>{
  event.preventDefault();
  createToken();
});

5. Передайте защищенный токен с суммой в API для оформления заказа.

Используя Http, вызовите Backend API и передайте токен с суммой для процесса оформления заказа.

stripe.redirectToCheckout({
sessionId: token
});

Добавьте дополнительные функции в конфигурацию полосы = ›

You can add additional parameters in the shortcode to customize your Stripe checkout button.
button_text – The text displayed inside the button (e.g. button_text=”Pay Now”). The default is “Buy Now”.
success_url – The URL to which Stripe will redirect upon completion of a successful payment (e.g. success_url=”https://example.com/success”). The default is the Return URL specified in the settings.
cancel_url – The URL to which Stripe will redirect after a payment is canceled. (e.g. cancel_url=”https://example.com/payment-canceled”). The default is the home URL for your site.
mode – The mode of the checkout (e.g. mode=”subscription”). The default is “payment”.