Как события оплаты привязаны к отдельной кнопке PayPal в JS SDK по сравнению с отображением всех доступных кнопок оплаты?

Я перехожу от простых кнопок PayPal с кодом копирования и вставки с несколькими экранами, на которых можно настроить налоги и параметры доставки для каждой кнопки, к их JS SDK. У меня он работает в песочнице, пока используется настройка paypal.Buttons({...}).render('#paypal-button-container'); для отображения всех доступных кнопок оплаты. Это все на клиенте; не обрабатывает его с сервера.

Когда я пытаюсь использовать метод ограничения источников финансирования, как описано в этих paypal инструкции, отображаются правильные кнопки, но они больше не связаны с событиями. Каждая покупка тестов в песочнице стоит всего одну копейку. Если код возвращается для отображения всех кнопок PayPal, все работает нормально.

Я уверен, что это глупый вопрос, потому что я использую тот же метод paypal.Buttons({...}).render('#paypal-button-container');, но без .render('#paypal-button-container'), а затем добавляю код ниже.

Не могли бы вы объяснить, как добавить код события, когда каждая кнопка в массиве FUNDING_SOURCES обрабатывается отдельно? Я пытаюсь только два: [paypal.FUNDING.PAYPAL, paypal.FUNDING.CARD].forEach( function (fundingSource) {...

Спасибо. Между прочим, я знаю, что PayPal рекомендовал показать все доступные варианты финансирования, но есть только один продукт, и он имеет очень номинальную цену; так что варианты отсрочки платежа в данном случае немного смешны. Спасибо.

// Loop over each funding source/payment method

FUNDING_SOURCES.forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
        fundingSource: fundingSource
    });

    // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that funding source
        button.render('#paypal-button-container');
    }
});
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
36
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Надеюсь, я правильно понял вашу проблему. В противном случае, пожалуйста, перефразируйте...

Вместо того, чтобы перебирать параметры, лучше всего включить то, что вам нужно, или отключить то, что вам не нужно, в инициализации скрипта.

См. https://developer.paypal.com/sdk/js/configuration/

Все параметры перечислены в разделе "параметры запроса".

То, что вам нужно, это disable-funding / enable-funding.

Спасибо. Использование параметров запроса намного проще, чем те инструкции, которые я читал для финансирования автономных кнопок. Возможно, я рассматривал подход на стороне сервера, но он оказался для JS SDK на стороне клиента.

Gary 17.03.2022 16:43

Можете ли вы дать ссылку на документы по отдельным кнопкам, которые вы читали?

Carsten 18.03.2022 20:48

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

Gary 19.03.2022 01:45

Не понял, что вы говорите об отдельных примерах. Простите за это. Вы в значительной степени следуете тому, что там рекомендуется.

Carsten 20.03.2022 20:21

Строка SDK disable-funding может использоваться, как упоминается в другом ответе, но всегда возможно, что что-то, что не отключено явно, отображается как одна из кнопок, если вы не используете отдельные кнопки.

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

    paypal.Buttons({
        fundingSource: fundingSource
    });

Теперь к вашей проблеме: именно этот раздел необходимо расширить, чтобы «подключить кнопку к событиям» - в основном вам нужны createOrder и onApprove, а также любые другие обратные вызовы JSDK, которые вы хотите, чтобы эта кнопка использовала; в противном случае вы просто получаете демонстрационное поведение 0.01 по умолчанию для кнопки.

Полный пример всего кода, который должен быть внутри этого вызова paypal.Buttons, см. в разделе https://developer.paypal.com/demo/checkout/#/шаблон/сервер (только для сервера или клиента)


Во всяком случае, более конкретно для вашего варианта использования:

By the way, I know that paypal recommended showing every available funding option but there is only one product and it is very nominally priced; so, the deferred payment options are a bit ridiculous in this case. Thank you.

Если все, что вы действительно хотите сделать, это отключить «Оплатить позже» и «Кредит PayPal», &disable-funding=credit достаточно, и вам не нужно отображать отдельные кнопки.

Спасибо за объяснение. Я предполагаю, что метод для автономных кнопок похож на добавление прослушивателей событий к каждой отдельной кнопке, а не к родительскому контейнеру. Итак, я мог бы просто переместить весь код событий, который работал раньше, в цикл forEach. Пока в этом простом случае я воспользовался enable-funding и выбрал два нужных: paypal и карту. Спасибо еще раз.

Gary 18.03.2022 03:45

В частности, автономные кнопки означают, что каждая кнопка отображается отдельно/независимо (это в названии, автономная). Каждый раз, когда вы визуализируете кнопку, вы должны дать ей функцию обратного вызова createOrder + onApprove и т. д. Если вы не укажете эти функции обратного вызова каждый раз, когда вы вызываете paypal.Buttons , то все такие кнопки будут выполнять демонстрационное поведение 0.01, потому что у них нет возможности создать заказ для чего-либо еще.

Preston PHX 18.03.2022 04:58

Престон PHX прав. Кстати, стоит подробно проверить доступные обратные вызовы. Также рекомендуется реализовать обратный вызов cancel и error.

Carsten 20.03.2022 20:25

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