Полоса перенаправления после события - PullRequest
0 голосов
/ 06 апреля 2020

Я использую. NET и Stripe для создания интернет-магазина, и я пытаюсь выяснить, как перенаправить клиента на страницу успеха, как только оплата прошла успешно. Однако Stripe недавно изменил свой API, и я не смог найти в Интернете никаких ресурсов, объясняющих, как это сделать.

Я попытался создать веб-крючок, который прослушивает событие charge.succeeded, и я могу получить событие, которое должно сработать, но я не могу перенаправить клиента на какую-либо страницу из веб-крючка.

Еще одна вещь, которую я пробовал, находится на странице оформления заказа, где я добавил method = "post" к form и type = "submit" и formmethod = "post" для кнопки соответственно, поэтому, когда клиент нажимает кнопку "Pay", клиент перенаправляется через метод post на странице оформления заказа, но я не могу получить сообщение способ запуска.

Страница оформления заказа:

    <head>
        <title>Checkout</title>
        <script src="https://js.stripe.com/v3/"></script>
    </head>

<--! This is where I've tried method="post", type="submit" and formmethod="post" -->
    <form id="payment-form">
        <div id="card-element">
            <!-- Elements will create input elements here -->
        </div>

        <!-- We'll put the error messages in this element -->
        <div id="card-errors" role="alert"></div>

        <button id="submit">Pay</button>
    </form>

@section scripts{
    <script>
        // Set your publishable key: remember to change this to your live publishable key in production
        // See your keys here: https://dashboard.stripe.com/account/apikeys
        var stripe = Stripe('{PUBLIC KEY}');
        var elements = stripe.elements();

        window.onload = function () {
            // Set up Stripe.js and Elements to use in checkout form
            var style = {
                base: {
                    color: "#32325d",
                }
            };

            var card = elements.create("card", { style: style });
            card.mount("#card-element");


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

            var form = document.getElementById('payment-form');

            form.addEventListener('submit', function (ev) {
                ev.preventDefault();
                stripe.confirmCardPayment('@Model.ClientSecret', {
                    payment_method: {
                        card: card,
                        billing_details: {
                            name: '@Model.CustomerInformation.FirstName',
                            email: '@Model.CustomerInformation.Email',
                            address: {
                                city: '@Model.CustomerInformation.City',
                                line1: '@Model.CustomerInformation.Address1',
                                postal_code: '@Model.CustomerInformation.ZipCode'
                            }
                        }
                    }
                }).then(function (result) {
                    if (result.error) {
                        // Show error to your customer (e.g., insufficient funds)
                        console.log(result.error.message);
                    } else {
                        // The payment has been processed!
                        if (result.paymentIntent.status === 'succeeded') {
                            // Show a success message to your customer
                            // There's a risk of the customer closing the window before callback
                            // execution. Set up a webhook or plugin to listen for the
                            // payment_intent.succeeded event that handles any business critical
                            // post-payment actions.
                        }
                    }
                });
            });
        };
    </script> 

Webhook:

using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Stripe;

namespace workspace.Controllers
{
    [Route("api/[controller]")]
    public class StripeWebHook : Controller
    {
        // If you are testing your webhook locally with the Stripe CLI you
        // can find the endpoint's secret by running `stripe listen`
        // Otherwise, find your endpoint's secret in your webhook settings in the Developer Dashboard
        const string endpointSecret = "ENDPOINT SECRET";

        [HttpPost]
        public async Task<IActionResult> Index()
        {
            var json = await new StreamReader(HttpContext.Request.Body).ReadToEndAsync();

            try
            {
                var stripeEvent = EventUtility.ParseEvent(json);

                // Handle the event
                if (stripeEvent.Type == Events.PaymentIntentSucceeded)
                {
                    var paymentIntent = stripeEvent.Data.Object as PaymentIntent;

                    Console.WriteLine("Successful!");
                    return Ok();
                }
                else if (stripeEvent.Type == Events.ChargeSucceeded)
                {
                    Console.WriteLine("Successful!");
                    // This is where I've tried return RedirectToPage("/Index");
                    return Ok();
                }
                else if (stripeEvent.Type == Events.PaymentIntentCreated)
                {
                    Console.WriteLine("Successful!");
                    return Ok();
                }
                else if (stripeEvent.Type == Events.PaymentMethodAttached)
                {
                    var paymentMethod = stripeEvent.Data.Object as PaymentMethod;
                    Console.WriteLine("PaymentMethod was attached to a Customer!");
                }
                // ... handle other event types
                else
                {
                    // Unexpected event type
                    return BadRequest();
                } 

                return Ok();
            }
            catch (StripeException e)
            {
                return BadRequest();
            }
        }
    }
}

1 Ответ

0 голосов
/ 06 апреля 2020

Я думаю, что сначала нам следует сгладить несколько концепций. Конечная точка webhook - это отдельный API, который где-то живет в вашей системе и реагирует на события, публикуемые в Stripe, такие как charge.succeeded Event.

Ваша реализация Elements в браузере полностью отделена и может не отвечайте ни на что, что может вернуть ваша конечная точка webhook в виде HTTP-кодов (перенаправления и т. д.).

Чтобы ответить на ваш основной вопрос напрямую, в Javascript в блоке else, где говорится, что платеж был успешно обработан, вы можете позвонить [0]

location.href = "https://your-success-page.com"

... чтобы отправить пользователя на страницу успеха. Причина, по которой форма не будет отправлена, заключается в том, что событие отправки формы было предотвращено с помощью ev.preventDefault();.

Весь этот поток подробно описан здесь [1] [2].

Надеюсь, это поможет!

[0] https://developer.mozilla.org/en-US/docs/Web/API/Window/location

[1] https://stripe.com/docs/payments/accept-a-payment

[2 ] https://stripe.com/docs/webhooks

...