Can i have 3 'BUY button' in a same webpage?

Questions
,
1

Hi to all,
I have a little question about Square, ‘Web Payments SDK’

Here the link i used to create my webform to let the user choose the desired payment method (credit card, Apple Pay, Google Pay)

https://github.com/square/connect-api-examples/blob/master/connect-examples/v2/php_payment/index.php

On my website, I offer 3 differents subscription plans.
Monthly plan
3-month plan
6-month plan

So is there a way to add 3 ‘buy button’ on the same page ? to let me know, in my PHP backend, which subscription plan the user has chosen ? After Squareup return token and call my backend !
Or, is there another ‘better’ way to do this than adding 3 buttons?

Thanks so much !
Have a great day !

2

Yes, you can add three different buttons or a dropdown for customers to select which plan they want. Each button or selection can have an id associated to it. When sent to the backend it can trigger an order for a subscription that you then pass to the CreateSubscription or CreatePayment request. :slightly_smiling_face:

3

Hi Bryan,
Thanks so much ! I really appreciate your help !

is this also good, if instead of adding 3 payment buttons, I slightly modify the JavaScript to create a Javascript variable. A JavaScript window variable like :

  <script>
        window.subscriptionChosen = 0;
  </script>

So when the user click on the subscription plan he wants… i update the variable : subscriptionChosen

      const btnplan1 = document.getElementById("btn_1");
      btnplan1.addEventListener("click",function() {
        selectPlan(1);
      });

     const btnplan2 = document.getElementById("btn_2");
      btnplan2.addEventListener("click", function() {
        selectPlan(2);
      });

      const btnplan3 = document.getElementById("btn_3");
      btnplan3.addEventListener("click", function() {
        selectPlan(3);
      });

      function selectPlan(plan) {
        window.subscriptionChosen = plan;
      }

So after, when the user click on the desired payment method, i add the “plan” variable in the HTTP request in the sq-payment-flow.js in the createPayment function.

plan: window.subscriptionChosen

 const dataJsonString = JSON.stringify({
    token,
    idempotencyKey: window.idempotencyKey,
    plan: window.subscriptionChosen
  });

So my backend will receive the selected plan by the user!

Currently it seems to work, but I wanted your opinion on this way of doing it :slight_smile:
Thank you so much
Have a great day !

Pascal

4

This looks great! Definitely on the right track. :slightly_smiling_face:

1 Like
5

Thanks Bryan !
I really appreciate it !

Thanks for all you great help !
Have a great day :slight_smile:
Pascal