Using Stripe Checkout Form Action in Skuid page

Sam BeckerSam Becker Member ✭✭
edited April 2018 in Questions
I'm trying to use Stripe's Checkout button in a Skuid page. https://stripe.com/docs/checkout
I've put the following code in a template it it opens up correctly, but it won't allow me to use any of the model data as values in the form action. I've tried {{Total}} and global merge {{$Model.data.0.Total}}, but neither are accepted no matter how many field types I'm using. 

I know I'm probably missing a lot here since I can't find any help about this online. 

How can I use model data in a form action?
Should I be using a snippet to do this? and if so, how?

Appreciate any help you can give!

(using Stripes Test API Key)
<form action="your-server-side-code" method="POST">    <script      src="https://checkout.stripe.com/checkout.js" class="stripe-button"      data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"       data-amount="999"      data-name="Stripe.com"      data-description="Widget"      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"      data-locale="auto"      data-zip-code="true">    </script> 
</form>

Comments

  • Matt SmallMatt Small Member
    edited April 2018
    Hi Sam, 

    Maybe try putting the script in a "Template" component? * Don't forget to click "Allow HTML" 


  • Stephen SellsStephen Sells Member
    edited April 2018
    Have you tried using three brackets instead of two? {{{...}}} instead of {{...}}
  • Sam BeckerSam Becker Member ✭✭
    edited March 2018
    I have "Allow HTML" checked, but still no bueno.
  • Sam BeckerSam Becker Member ✭✭
    edited March 2018
    unfortunately, that didn't work either. I'm not sure why it's not working. 
  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited March 2018
    In the template component make sure you are doing one of 2 things. 

    1. Bind template to the particular model you expect.  Make sure the property "Do not run template on each row" is NOT selected.  Then use the local merge syntax   --  {{fieldName}}

    - or - 

    2.  Don't bind template to any model.   And use Global merge syntax.   Your example above is not correct.  It should be 

    {{$Model.YourModelName.data.0.YourFieldName}} .     You were missing the model name. 

    This should work. 
  • Sam BeckerSam Becker Member ✭✭
    edited April 2018
    Scratch that, this actually worked for the amount! but, doesn't work for the email field in the following script

    <script src="">https://checkout.stripe.com/checkout.js"></script>;

    <button id="customButton">Pay With Card</button>

    <script>
    var handler = StripeCheckout.configure({
      key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
      image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
      locale: 'auto',
      token: function(token) {
        // You can access the token ID with 'token.id'.
        // Get the token ID to your server-side code for use.
      }
    });

    document.getElementById('customButton').addEventListener('click', function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'test 1',
        description: '2 widgets',
        zipCode: true,
        amount: {{{$Model.DiveSelect.data.0.Total}}},
        email: {{{$Model.DiveSelect.data.0.Email__c}}}
      });
      e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
    </script>
  • Sam BeckerSam Becker Member ✭✭
    edited April 2018
    I was able to get the amount to work by using the triple brackets and the correct syntax. Thank you! However, now I can't get the Email to prefill using the custom script from Stripe. 

    <script src="https://checkout.stripe.com/checkout.js"></script>;

    <button id="customButton">Pay With Card</button>

    <script>
    var handler = StripeCheckout.configure({
      key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
      image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
      locale: 'auto',
      token: function(token) {
        // You can access the token ID with 'token.id'.
        // Get the token ID to your server-side code for use.
      }
    });

    document.getElementById('customButton').addEventListener('click', function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'DD',
        description: '2 widgets',
        zipCode: true,
        amount: {{{$Model.DiveSelect.data.0.Total}}},
        email: {{{$Model.Diver.data.0.Email__c}}}
      });
      e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
    </script>

    If I set the value to a valid email it works, e.g. '[email protected]', but when I use global Merge Syntax it doesn't work. I tried to use different UI Formula fields, but that doesn't work either. 

    Any idea why amount would work and not email? It actually breaks the script when I use it this way, so I've been trying to include the quotations somehow, but can't get it to work.
  • edited April 2018
    Sam,

    In the JSON that you are passing to the function, you have 'email' in the last line with the merge syntax as the last element.  I think what is happening is that the 'merge' logic is seeing the 'email' merge syntax as '{{{$Model.Diver.data.0.Email__c}}}}' (with a 4th brace at the right).

    Try re-ordering your JSON to:

      handler.open({
        name: 'DD',
        description: '2 widgets',
        amount: {{{$Model.DiveSelect.data.0.Total}}},
        email: {{{$Model.Diver.data.0.Email__c}}},
        zipCode: true
      });

    Or you can add lookups your models using Skuid's API and set the 'amount' and 'email' using variables.

    Thanks,

    Bill
Sign In or Register to comment.