Using Stripe Checkout Form Action in Skuid page

  • 1
  • Question
  • Updated 7 months ago
  • Answered
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>&nbsp;
</form>
Photo of Sam Becker

Sam Becker

  • 160 Points 100 badge 2x thumb

Posted 8 months ago

  • 1
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
Hi Sam, 

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

Sam Becker

  • 160 Points 100 badge 2x thumb
I have "Allow HTML" checked, but still no bueno.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Have you tried using three brackets instead of two? {{{...}}} instead of {{...}}
Photo of Sam Becker

Sam Becker

  • 160 Points 100 badge 2x thumb
unfortunately, that didn't work either. I'm not sure why it's not working. 
Photo of Sam Becker

Sam Becker

  • 160 Points 100 badge 2x thumb
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>
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 
Photo of Sam Becker

Sam Becker

  • 160 Points 100 badge 2x thumb
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. '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.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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