Параллельная интеграция смарт-кнопок Paypal

#javascript #html #button #paypal #payment

#javascript #HTML #кнопка #paypal #оплата

Вопрос:

У меня проблемы с этими смарт-кнопками Paypal. Даже это выглядит просто, как я себе представляю 🙂 не могу заставить это работать.

У меня есть три элемента, расположенные рядом в отдельных подразделениях, и я хочу добавить смарт-кнопки PayPal под каждым элементом, но только разной цены.

Когда я сначала ввожу этот код paypal, он работает как по волшебству.

 <div id="paypal-button-container"></div>
<!-- <script src="https://www.paypal.com/sdk/js?client-id=sbamp;currency=EUR" data-sdk-integration-source="button-factory"></script> -->
<script src="https://www.paypal.com/sdk/js?client-id=ARcbGj17hMo1yw4nEMDB5E-Y7W00gbie9F_zb0m--XCOjKWo4jIddFV9N5UzbluK-if61HLUVs0rQ7zCamp;currency=EUR" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'pay',
          
      },
      createOrder: function(data, actions) {
          return actions.order.create({
              purchase_units: [{
                  amount: {
                      value: '13.88'
                  }
              }]
          });
      },
      onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
              alert('Transaction completed by '   details.payer.name.given_name   '!');
              window.open('www.google.ba');
          });
      }
  }).render('#paypal-button-container');
</script>  

Но когда я помещаю тот же код с измененной стоимостью денег, он показывает только этот второй, а также, когда я помещаю под третьим элементом, он показывает только этот.

Я попытался выполнить рендеринг.(‘#custompaypalbutton’) — чтобы изменить класс div кнопки, в котором она отображается, но ничего не изменилось.

Я что-то упускаю?

Может быть, мне нужно другое приложение paypal (REST Api) для каждой кнопки, которое будет генерировать новый идентификатор?

Ответ №1:

  1. <script src="https://www.paypal.com/sdk/js... должен быть загружен только один раз на страницу
  2. Каждая кнопка должна .render('...') соответствовать своему собственному контейнерному элементу

Комментарии:

1. Таким образом, нет способа разместить несколько смарт-кнопок PayPal на одной странице? Если я создам новый REST API в Paypal, я получу другой скрипт, потому что у него другой идентификатор? Я прав?

2. Загруженный SDK один раз, и теперь кнопки отображаются. Спасибо