JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/0ctobat/octobat-beanie.js@latest/dist/octobat-beanie.min.js"></script>


<div>
  <button class="btn" data-plan-id="plan_GjFvKzZ6xhqXTP">
    Plan 1
  </button>

  <button class="btn" data-plan-id="plan_GjFvZEiUgKkmop">
    Plan 2
  </button>

  <button class="btn" data-plan-id="plan_GjFvBUokRZPe1Z">
    Plan 3
  </button>
</div>



<script>

  var beanie = OctobatBeanie("oc_test_pkey_d5SAn2gNOkuJzstQ4Pp4Lgtt");
  
  const $btns = document.querySelectorAll('.btn');
  
  $btns.forEach( $btn => {
  	$btn.addEventListener('click', function ( e ) {
    	const planId = e.target.dataset.planId;
      
      beanie.redirectToBeanie({
        items: [{plan: planId}],
        configurationId: 'oc_beanie_cc_15827501246raaf4c0dc57'
      })
      .then(function (result) {

        if (result.error) {
          handleError(error);
        } else {
	        handleSuccess(result);
        }

      }).catch(function(error) {

        handleError(error);

      })
    });
  });

  
  
  function handleError( error ) {

  }

  function handleSuccess( result ) {

  }
</script>

CSS

.caixa {
  border: 1px solid;
}

#beanie-button {
  display: none;
}

JavaScript

<script src="https://cdn.jsdelivr.net/gh/0ctobat/octobat-beanie.js@latest/dist/octobat-beanie.min.js"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button id="beanie-button" style="background-color:#e71d36;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em; cursor: pointer;" role="link">
  Pay with Beanie
</button>

<div id="error-message"></div>

<script>
  var beanie = OctobatBeanie("oc_test_pkey_d5SAn2gNOkuJzstQ4Pp4Lgtt");

  var checkoutButton = document.getElementById('beanie-button');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Beanie.
    beanie.redirectToBeanie({
      items: [{plan: 'prod_GjFvH6sRebxBDC'}, {plan: 'prod_GjFv1pAKnuiqoe'}, {plan: 'prod_GjFven3iyO0P22'}],
      configurationId: 'oc_beanie_cc_15827501246raaf4c0dc57'
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToBeanie` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    }).catch(function(error) {
      // If `redirectToBeanie` can't be triggered because of invalid parameters
      // or implementation, error, display a generic error message to your customer,
      // and report the error to the console for debugging purposes, or send it to Sentry
      // Sentry.log(error)
      console.log(error)
      var displayError = document.getElementById('error-message');
      displayError.textContent = "Implementation error, please contact website administrator"
    })
  });
</script>