Я интегрирую 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"
}
}
Если вы принимаете только платежи по картам, то при использовании 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
будет работать только с элементом карты (а не с элементом платежа).
Это потому, что вы не можете использовать элемент оплаты с createPaymentMethod
, он работает только с элементом карты. Можете ли вы поделиться полным кодом, который вы использовали для confirmSetup
с redirect: "if_required"
?
@JsonStatham Я только что обновил свой ответ правильным кодом для использования confirmSetup()
.
Привет, сома, обновил вопрос, изменив его на «карта» (строчные буквы) по-прежнему не работает, хотя вы получаете другое сообщение об ошибке. Я попытался вернуться к «confirmSetup» и использовать перенаправление: «if_required», однако я получаю ответ 400 с ошибкой «Получен неизвестный параметр: перенаправление»