Как использовать Stripe для создания способа оплаты с установленным элементом

Я интегрирую Stripe в свое приложение Blazor. Мне нужна функциональность, чтобы заменить существующий компонент «Добавить карту».

Я успешно добился этого с помощью метода stripe.confirmSetup в библиотеке JS, однако для этого требуется URL-адрес перенаправления, который вызывает проблемы, поскольку остальная часть нашего приложения не ведет себя так.

Я определил createPaymentMethod в качестве альтернативы из-за того, что он не требует URL-адреса перенаправления, открывает любую страницу 3DS в модальном режиме и поддерживает метод обратного вызова «затем», где я могу показать всплывающее окно об успешном завершении и обновить ДОМ соответственно.

Проблема в том, что когда я передаю элемент карты, который я ранее смонтировал, я получаю эту ошибку.

Недопустимое значение для createPaymentMethod: карта была payment Element, который нельзя использовать для создания карты PaymentMethods

бритва/html

    <EditForm id = "payment-form" Model = "@BillingProfile">
        <div id = "payment-element">
            <!-- Elements will create form elements here -->
        </div>

        @if (stripeReady)
        {
            <div class = "text-center mt-2">
                <button type = "button" @onclick = "TogglePaymentEditStripe" class = "btn btn-grey text-dark">Cancel</button>  
                <button type = "submit" id = "submitStripeCard" disabled = "@(Busy)" class = "btn btn-blue">Add card</button>
            </div>                }

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

JavaScript

export function initialiseStripeAndMount(publishableKey, clientIntentSecret, redirectUrl){

    const stripe = Stripe(publishableKey);  

    const options = {
        clientSecret: clientIntentSecret, //intent
        // Fully customizable with appearance API.
        appearance: {
            theme: 'night',
            labels: 'floating',           
        }
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const cardElement = elements.create('payment');
    cardElement.mount('#payment-element');

    // Create a token or display an error when the form is submitted.
    const form = document.getElementById('payment-form');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const result = await stripe.createPaymentMethod({                
            type: 'card',
            card: cardElement,
            billing_details: {

                name: 'Jenny Rosen',
            },
            })
            .then(function (result) {
                // Handle result.error or result.paymentMethod
                alert(result)
            });
    });
   
}

Вопрос

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

редактировать

Если я попытаюсь использовать confirmSetup со следующим:

stripe.confirmSetup({
    elements,
    confirmParams: {
        // Return URL where the customer should be redirected after the SetupIntent is confirmed.
        return_url: 'http://www.google.co.uk',
        redirect: "if_required"
    },
})

Затем я получаю ответ с кодом ошибки 400 со следующим объектом ответа:

{
  "error": {
    "code": "parameter_unknown",
    "doc_url": "https://stripe.com/docs/error-codes/parameter-unknown",
    "message": "Received unknown parameter: redirect",
    "param": "redirect",
    "request_log_url": "[Redacted]",
    "setup_intent": {
      "id": "[Redacted]",
      "object": "setup_intent",
      "cancellation_reason": null,
      "client_secret": "[Redacted]",
      "created": [Redacted],
      "description": null,
      "last_setup_error": null,
      "livemode": false,
      "next_action": null,
      "payment_method": null,
      "payment_method_types": [
        "card"
      ],
      "status": "requires_payment_method",
      "usage": "off_session"
    },
    "type": "invalid_request_error"
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы принимаете только платежи по картам, то при использовании SetupIntents можно не перенаправлять. Просто добавьте redirect: "if_required" при звонке stripe.confirmSetup(). Узнать больше. Это должно выглядеть примерно так:

stripe.confirmSetup({
 elements, 
 redirect: "if_required",
 confirmParams: { return_url: 'http://foo.bar' }
})

Что касается вашего конкретного сообщения об ошибке, я думаю, проблема в том, что вы передаете Card: cardElement (верхний регистр C) вместо card: cardElement (нижний регистр c). Но обратите внимание, что createPaymentMethod будет работать только с элементом карты (а не с элементом платежа).

Привет, сома, обновил вопрос, изменив его на «карта» (строчные буквы) по-прежнему не работает, хотя вы получаете другое сообщение об ошибке. Я попытался вернуться к «confirmSetup» и использовать перенаправление: «if_required», однако я получаю ответ 400 с ошибкой «Получен неизвестный параметр: перенаправление»

JsonStatham 06.02.2023 14:36

Это потому, что вы не можете использовать элемент оплаты с createPaymentMethod, он работает только с элементом карты. Можете ли вы поделиться полным кодом, который вы использовали для confirmSetup с redirect: "if_required"?

soma 06.02.2023 16:15

@JsonStatham Я только что обновил свой ответ правильным кодом для использования confirmSetup().

soma 09.02.2023 16:27

Другие вопросы по теме