Skip to main content

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> 


post flagged as spam also?

Hi Sam, 

Maybe try putting the script in a “Template” component? * Don’t forget to click “Allow HTML” 



Have you tried using three brackets instead of two? {{{…}}} instead of {{…}}


I have “Allow HTML” checked, but still no bueno.


unfortunately, that didn’t work either. I’m not sure why it’s not working. 


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. 


Scratch that, this actually worked for the amount! but, doesn’t work for the email field in the following script


" title="Link: https://checkout.stripe.com/checkout.js">">https://checkout.stripe.com/checkout.js">;

Pay With Card


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.


;

Pay With Card



If I set the value to a valid email it works, e.g. ‘google@gmail.com’, 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.


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