ワードプレスでのpaypalかんたん決済機能の複数設置

Question

ワードプレスでのpaypalかんたん決済機能を1ページで複数設置するのは可能でしょうか？

試みたものの、二ヶ所目からボタンが表示されません。

お詳しい方がおられましたら、ご教示いただけるとありがたいです。

目的としましてはPayPalだけではなく、直接クレジットカード決済ができるようにしたいです。

どうかよろしくお願いいたします🙇🏻‍♂️

Comments

[CHERRY]

どのように設置されたのでしょうか。

[k-jp]

ありがとうございます。
上記の画面で、必要事項を記入→コードをコピー→ワードプレスのHTMLブロックにペースト

で、一ヶ所はボタンが表示されるのですが、二ヶ所目からボタンが表示されず、ディベロッパーツールで確認すると、エラー表示が出てしまいます。

通常のカートボタンで同じ作業を行うと、実装できましたので、このボタンは対応していない恐れがありますので、現在PayPalのテクニカルサポートに問い合わせを行っております。

Answer 1

PayPalに、問い合わせたところ、１つ目に生成されたコードの、２行目の<script src>〜<script>のコードを
2つ目に生成されたコードから、削除することによって複数設置できるようです。

コード

”1つ目のボタンコード”

<div id="paypal-button-container"></div> <script src="https://www.paypal.com/sdk/js?client-id=xxxxxx&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script> <script> paypal.Buttons({ style: { shape: 'rect', color: 'blue', layout: 'vertical', label: 'subscribe' }, createSubscription: function(data, actions) { return actions.subscription.create({ 'plan_id': 'P-4CM5916838609004PL6U74JI' }); }, onApprove: function(data, actions) { alert(data.subscriptionID); } }).render('#paypal-button-container'); </script>

２つ目以降のボタンコードの２列目の<script src> 〜 </script>を削除

<div id="paypal-button-container"></div> <script src="https://www.paypal.com/sdk/js?client-id=xxxxxx&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script> <script> paypal.Buttons({ style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' }, createSubscription: function(data, actions) { return actions.subscription.create({ 'plan_id': 'P-9WA27860P1626910CL6U76HQ' }); }, onApprove: function(data, actions) { alert(data.subscriptionID); } }).render('#paypal-button-container'); </script>

”下記コードが削除完了後の２つめ以降のコード”

<div id="paypal-button-container"></div> paypal.Buttons({ style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' }, createSubscription: function(data, actions) { return actions.subscription.create({ 'plan_id': 'P-9WA27860P1626910CL6U76HQ' }); }, onApprove: function(data, actions) { alert(data.subscriptionID); } }).render('#paypal-button-container'); </script>