2016-01-21 3 views
3

Я пытаюсь реализовать Stripe с AngularJS. В HTML представила свой фрагмент кода для проверки:Stripe with angularJS integration

<form> 
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="<pk_key>" 
    data-amount="100" 
    data-name="name" 
    data-description="description" 
    data-image="img.png" 
    data-locale="auto"> 
</script> 
</form> 

Теперь, после завершения заполнения формы проверки, я ожидаю маркер. Форма фотографии меняет свой адрес на что-то вроде этого:

<path>/?stripeToken=tok_17VlKKLZ8lYIAVgOX7viLFlm&stripeTokenType=card&stripeEmail=mihai.t.pricop%40gmail.com#/ 

мне это нужно Угловое, чтобы вызвать функцию области действия с этим маркером, когда форма занесена. Как я могу добиться чего-то подобного?

$scope.checkout = function(token) { 
    <do stuff with the token> 
} 

спасибо.

+0

Я не знаю достаточно Угловой, чтобы ответить на ваш вопрос, но не проще ли использовать существующую обертку, такую ​​как этот: https://github.com/tobyn/angular-stripe-checkout? – Ywain

ответ

6

Stripe предлагает "custom integration" Stripe Checkout. Это позволяет запускать проверку с javascript и возвращать маркер в кассе.

+0

Да, сейчас это прекрасно. Спасибо :). – ashcrok

1

Я только что написал blog article об этом со всеми необходимыми деталями.

Вот простой способ использования angularJS для интеграции Stripe Checkout на вашу веб-страницу.

Во-первых, в вашем HTML добавить ссылку нашивки скрипт внутри головки тега:

<head> 
    [angularJS includes here] 
    <script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script> 
</head> 

Далее в теле объявить ссылку или кнопку с обработчиком нг кнопкой для вызова метода в контроллере:

<a href="" ng-click="onStripe('<%= StripeConstants.PUBLIC_API_KEY %>', '<%= request.getAttribute("email") %>')">Stripe Checkout via angularjs</a> 

* Примечание: Моя страница является JSP и так как мой пользователь уже подписан в Я знаю, электронную почту, так что я толкать его к объекту запроса и вытащить его в мою страницу JSP. Аналогично, я загружаю свой открытый ключ Stripe (зашифрованный) из файла свойств, который находится на моем сервере. Опять же, я втягиваю это в свой JSP, а затем передаю как адрес электронной почты пользователя, так и открытый ключ Stripe в обработчик кликов в моем контроллере.

Это все для HTML-страницы. Теперь на контроллер.

Вам понадобятся две функции - обработчик кликов для вызова Stripe Checkout и функция обработки обратного вызова Stripe с маркером, представляющим данные платежа.

// stripe will call this once it has successfully created a token for the payment details 
    $scope.onToken = function(token) { 
     console.log(token); 
     // now call a service to push the necessary token info to the server to complete the checkout processing 
    }; 

    $scope.onStripe = function(apiKey, userEmail) { 
     var handler = StripeCheckout.configure({ 
      key: apiKey, 
      image: 'https://stripe.com/img/documentation/checkout/marketplace.png', 
      locale: 'auto', 
      token: $scope.onToken 
     }); 

     handler.open({ 
      panelLabel : 'Subscribe', 
      amount : 4995, 
      name : 'My Product Name here', 
      description : '$49.95 Monthly Subscription', 
      email : userEmail, 
      zipCode : true, 
      allowRememberMe : false 
     }); 
    }; 

Это все!