Настройте модальное окно Google Pay с помощью Stripe

Мы используем Stripe Setup Intent API для создания отложенных платежей.

Что мы делаем в основном:

  1. Погрузка и монтаж Stripe.Elements
        // Create a Stripe client
        this.stripePayment = stripe;

        this.stripeElements = this.stripePayment.elements({
            clientSecret: setupIntent.clientSecret,
            locale: 'en',
        } as never);

        this.paymentElement = this.stripeElements.create('payment', {
            wallets: {
                googlePay: 'auto'
            }
        });
        this.paymentElement.mount('#stripe-payment-element');
  1. Когда способ оплаты выбран - сохраните его с помощью метода Stipe.confirmSetup(...).

  2. Расчет налога на основе местоположения платежной информации пользователя и расчет окончательной цены, включая налог.

  3. Разрешите пользователю платить через нашу интеграцию Stripe/BE, которая использует следующую модель

export interface CheckoutSubscriptionsRequest {
    payloadBody: {
        numberOfAddOns?: number;
        planId?: string,
        price?: number,
        promoCode: string;
        paymentMethodId?: string;
        zipcode?: string;
    }
    isAddOn?: boolean;
    invoiceId?: string;
}

Все работает нормально, за исключением запутанного текста в модальном окне Google Pay. Проблема в том, что там написано: Pay [your company] $0 и на кнопке написано «Оплатить».
Хотя сейчас мы не платим, мы просто сохраняем информацию о платеже для следующего шага.

Итак, главный вопрос: можно ли как-то настроить модальное окно Google Pay? Это рассчитано на отсрочку платежей?
А если нет — приветствуются любые предложения по созданию понятного пользовательского интерфейса.

Поведение ключевого слова "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) для оценки ваших знаний,...
0
0
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

К сожалению, невозможно установить такую ​​​​собственную сумму для платежного листа в тот момент, когда вы используете намерение установки. При использовании элемента платежа для единовременного платежа или подписки на этом листе будет отображаться правильная сумма, но когда прямо сейчас выплачивается 0 долларов, на листе отображается 0 долларов.

Кнопка запроса платежа в Stripe, состоящая из одной кнопки для Apple Pay, Google Pay или Link, имеет возможность отображать произвольные значения, указав amount при создании запроса на платеж[1]. Поэтому, если вам действительно нужен этот пользовательский интерфейс, вы можете скрыть кошельки из своего платежного элемента и использовать PRB для отображения этого листа. Хотя это усложнит вашу страницу, а в современных интеграциях рекомендуется использовать элемент экспресс-оформления [2] вместо PRB, и, к сожалению, ECE имеет такое же ограничение: теперь он может показывать сумму в режиме setup.

[1] https://docs.stripe.com/stripe-js/elements/Payment-request-button?client=html#html-js-create-Payment-request-instance

[2] https://docs.stripe.com/elements/express-checkout-element

Спасибо, интересно, все ли просто показывают 0 и соглашаются с этим?

Dzmitry Vasilevsky 18.03.2024 09:45

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

Проблема с блокировкой файлов cookie
Можно ли создать счет Stripe для оплаты с использованием ранее созданного PaymentIntent с предварительной авторизацией
В плане подписки на обновление полосы без использования клиентского портала
Таблица цен на полосу измените URL-адрес перенаправления на страницу оплаты нашего приложения вместо перенаправления на страницу оформления заказа на полосу
Я хочу исправить эту ошибку версии @stripe/stripe-js - StripeCustomCheckoutActions или StripeCustomCheckoutOptions
Как получить доступ к расходам по ответу веб-перехватчика Stripe
IOS SDK для терминала Stripe — аргумент, передаваемый в вызов, который не принимает аргументов
Проблема с интеграцией платежей Stripe: ошибка «Только зарегистрированные индийские предприятия могут принимать международные платежи»
Как заставить типы работать в Deno при использовании карт импорта?
Vercel Next JS добавляет веб-перехватчик прослушивателя Stripe

Похожие вопросы

ParcelJS: Ошибка: нет узла 17172 при запуске сервера разработки
Я получаю сообщение об ошибке «Невозможно установить свойство .. которое имеет только метод получения» (ширина холста Javascript)
JS – Удаление дочернего объекта объекта в массиве объектов
Проверьте наличие данных в столбце таблицы HTML с помощью Javascript
Ванильный JavaScript для отображения индикатора выполнения прокрутки, который заполняется только при прокрутке элемента <main>?
Как отслеживать событие клика на линейном графике в ChartJS?
Как добавить расстояние между легендой и диаграммой в Recharts с абсолютным позиционированием?
Прокрутите до DIV при нажатии на другой странице и откройте раскрывающийся список часто задаваемых вопросов
Как добавить собственный js для выбора в блоке выбора Wagtail
JS, проблема со звуком вращения карты, когда вы нажимаете на зеленое пространство под картой, когда она повернута за спину