Forums

Hi all,
I'm integrating Stripe and to do so I created a button with the following code that I founded on Stripe Dashboard => Product => Checkout Snipped Generator.
​

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-sku_FwsevWkNqQUDXH"
  role="link"
>
  Checkout
</button>

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

<script>
(function() {
  var stripe = Stripe('pk_test_xxxxx');

  var checkoutButton = document.getElementById('checkout-button-sku_FwsevWkNqQUDXH');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_FwsevWkNqQUDXH', quantity: 1}],

      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://mysite/success',
      cancelUrl: 'https://mysite/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` 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;
      }
    });
  });
})();
</script>

​
​
I modified the code, extracting only the function:

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<script>

 var stripe = Stripe('pk_test_xxxxx');

    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_FwsevWkNqQUDXH', quantity: 1}],

      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://mysite/success?session_id={CHECKOUT_SESSION_ID}',
      cancelUrl: 'https://mysite/cancel',
      submitType: 'pay',
      customerEmail: '<?=$this->data['contactEmailAddress']?>',
      clientReferenceId: '<?=$this->data['unique_id']?>',
    });

</script>

​
Then I put this code on Chronoform V6 form, on Submit section as custom code.
​
The problem is the following: all works well when I use preview page on Administrative Chronoform side, but the redirect doesn't work on frontend.
The site not redirect to Stripe payment form.
​
Someone have some solution?

The answer that is given to me by js.stripe.com is 304 In Cache, as if the site is not really opened because it is already present in the cache.
How do I force to say that the page cache has expired?
I'm using MijoSEF.

Also if I delete the cache, I had the same behaviour: the page is loaded, but with no redirect to Stripe site.
​
If I use the on Preview form, It works correctly

That script stuff is javascript, you can't just dump it in a "custom code" block in your submit event. Are there any errors in the javascript console?

None. I check.
How I can change it in other language?
Or... How I can use as is?
​
The strange thing is that in administrative side it works.... Maybe some kind of cache interfere with it, but I don't found it

Except for the last one, those all sound like questions for the Stripe team.
​
The last one I can't help you with much either unless you can come up with more than just "not working". Try disabling cache and seeing if it works, let us know of any errors in console, or in the Network tab of the dev tools when you click it.

Your right!
just "not working" is unuseful.
​
The problem was caching of javascript.
stripe.js MUST NOT BE cached
​
The code that I posted works well to take single payments from stripe.
Then you must create an IPN file.
​
I use JCH Optimize Pro as caching system that need to configure as following to works well for stripe
​