Полосать с помощью AJAX, чтобы пользователь не был перенаправлен на другую страницу - PullRequest
Новая
       13

Полосать с помощью AJAX, чтобы пользователь не был перенаправлен на другую страницу

0 голосов
/ 27 мая 2018

У меня есть многошаговая форма, на шаге 3 есть кнопка «Оплатить», которая при нажатии отображает модальный Stripe с использованием jQuery ниже: 

  <form action="{{ route('registration.charge') }}" method="post" id="paymentForm">
            {{csrf_field()}}
            <input type="hidden" name="stripeToken" id="stripeToken"/>
            <input type="submit" href="" id="payment" class="btn btn-primary float-right"
                   value="Pay"/>
        </form>

Метод зарядки для обработки заряда Stripe: 

public function charge(Request $request)
    {
        Stripe::setApiKey(config('services.stripe.secret'));
        $source = $request->stripeToken;
        Charge::create([
            'currency' => 'eur',
            'description' => 'Example charge',
            'amount' => 2500,
            'source' => $source,
        ]);
    }

Маршрут: 

Route::post('/charge', [
    'uses' => 'RegistrationController@charge',
    'as'   => 'registration.charge'
]);

Когда пользователь щелкает в платной форме, появляется модальная полоса, пользователь заполняет форму и нажимает кнопку «Оплатить», полоса проверяет и отправляет токен ипользователь перенаправлен на другую страницу (http://proj.test/charge) из-за charge().

Знаете ли вы, как вместо перенаправления пользователя (http://proj.test/charge) изменить код Stripe для использования Ajaxчтобы пользователь остался на той же странице? Чтобы на этой странице можно было увидеть сообщение об успешном завершении, например, сообщающее о завершении платежа.

Код полосы: 

let stripe = StripeCheckout.configure({
    key: "{{config('services.stripe.key')}}",
    image: "",
    locale: "auto",
    token: (token) => {
        document.getElementById('stripeToken').value = token.id;
        document.getElementById('paymentForm').submit();
    }
});

document.getElementById('payment').addEventListener('click', function(e){

    stripe.open({
        name: 'test',
        description: 'test',
        amount: 1000
    });
    e.preventDefault();
});

Как будто это не работает, появляется «console.log (« Ошибка Ajax! »);», А затем пользователь перенаправляется на «http://proj.test/charge".

let stripe = StripeCheckout.configure({
        key: "{{config('services.stripe.key')}}",
        image: "",
        locale: "auto",
        token: (token) => {
            document.querySelector('#stripeToken').value = token.id;
            document.querySelector('#paymentForm').submit();

            $.ajax({
                type: "POST",
                url: '{{route('conferences.charge')}}',
                data: {tokenid: token.id, email: token.email},
                success: function(data) {
                    if (data == 'success') {
                        console.log("success");
                    }
                    else {
                        console.log("error");
                       console.log("Ajax Error!");

                    }

                },
                error: function(data) {
                    console.log(data);
                }
            }); 
        }
    });
    document.getElementById('payment').addEventListener('click', function(e){

        stripe.open({
            name: 'test',
            description: 'test',
            amount: '{{session('total')}}'
        });
        e.preventDefault();
    });

RegistrationController, возвращающий код 200: 

public function charge(Request $request)
    {
        Stripe::setApiKey(config('services.stripe.secret'));

        $source = $request->stripeToken;

        $selectedRtypes =  Session::get('selectedRtypes');

        $amount = (collect($selectedRtypes)->first()['total']) * 100;

        try{
            Charge::create([
                'currency' => 'eur',
                'description' => 'Example charge',
                'amount' => $amount,
                'source' => $source,
            ]);
        }
        catch(\Exception $e){
            return response()->json(['status' => $e->getMessage()], 422);
        }

        return response()->json([
            'success' => true,
            'message' => 'success',
        ], 200);


    }

1 Ответ

0 голосов
/ 28 мая 2018

Так что, вероятно, это может быть достигнуто разными способами.

Вот решение из сценария VUE, который использует jquery для получения формы 

send: function () {
  Stripe.setPublishableKey("stripekey")
  const $form = $('#payment-form')
  Stripe.card.createToken($form, (status, response) => {
    if (response.error) {
      return
    }

    this.payment_token = response.id
    this.post('<your controller charge>', this.getFormData())
   })
},
post: function (url, data) {
    axios.post(url, data).then(response => {
    // handle success here
    }).catch(error => {
    // handle error here
    })
},
getFormData: function () {
  return {
    'payment_token': this.payment_token
  }
},

Но то, что я думаю, вы ищетеfor is 

send: function () {      
 Stripe.setPublishableKey("stripekey")
  const $form = $('#payment-form')

  Stripe.card.createToken($form, (status, response) => {
    if (response.error) {
      return
    }

    let stripeToken = response.id
  })
}

Используется полоса javascript sdk 

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
...