Payment Module in React

Admin 1
Viewed 122

I am building a website for a aid organisation. They want a donation module on their page. I am trying to implement this but don't seem to get this to work.

This is the code I am trying to use:

<div class="rnw-widget-container"></div>
<script src="https://tamaro.raisenow.com/XXX/latest/widget.js"></script> 
<script>
    window.rnw.tamaro.runWidget('.rnw-widget-container', {language: 'en'})
</script>

(from https://support.raisenow.com/hc/en-us/articles/360001586658-Integrate-the-Widget-into-your-Page)

Obviously I am using the API token that I received instead of XXX.

import React from "react"
import {Helmet} from "react-helmet"
import Layout from "../components/Layout";

const SpendenPage = () => (
    <Layout>
    <Helmet>
    <script src="https://tamaro.raisenow.com/xxx/latest/widget.js"></script>
      <script>window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'});</script>
        </Helmet>
    <div className="dds-widget-container"></div>

    </Layout>
)

export default SpendenPage

gives me this error Syntax error: /home/hanna/Code/brnhrz-cms/src/pages/jetzt-spenden.js: Unexpected token, expected "}" (9:73)

I would greatly appreciate any help with this.

gatsby reactjs javascript
2 Answers

In order to render an expression or method invocation like window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'}); ins JSX you need to wrap it in curly braces.

See here for more details.

Basically just change the following from:

<script>window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'});</script>

to:

<script>{window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'})}</script>

And you should at least no longer have the syntax error.

user_52204890

You need to wrap the content of the script between backticks (``) along with curly braces ({}):

<Helmet>
  <script src="https://tamaro.raisenow.com/xxx/latest/widget.js"></script>
  <script type='text/javascript' async defer>
    {` window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'}) `}
  </script>
</Helmet>

Be aware that window and other global object limitations when using Gatsby with SSR (Server-Side Rendering), it may break the compilation during the gatsby build. If it breaks, you may need to add the following condition before using window:

typeof window !== "undefined"

You can check for an example in this CodeSandbox: https://codesandbox.io/s/l9qmrwxqzq

Related topics:

user_55853710
Related