function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
aswin balajiaswin balaji 

How to add Recurly script on Lightning web component

I need to add these two scripts on lwc and invoke the functionality
<script src="https://js.recurly.com/v4/recurly.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But I have tried using static resources and the script is loading but I cant able to Invoke it in html page....

LWC.html
<template>  
    <c-wizard header="Billing Details" variant="path" current-step="step-1">
        <c-wizard-step label="Card Details" name="step-1">

                <form id="my-form" method="post">
                    <input type="text" data-recurly="first_name" /><br> <br>
                    <input type="text" data-recurly="last_name" /><br>
                    <div data-recurly="number"></div>
                    <div data-recurly="month"></div>
                    <div data-recurly="year"></div>
                    <div data-recurly="cvv"></div>
                    <br>
                    <!-- Recurly.js will update this field automatically -->
                    <input type="text" name="recurly-token" id="recurly-token" data-recurly="token" />
                    <button>submit</button>
                </form>          
            </c-wizard-step>
    </c-wizard>
</template>

LWC.js
import { LightningElement, track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import jQuery from '@salesforce/resourceUrl/Jquery';
import Recurly from '@salesforce/resourceUrl/Recurly';
//const publicKey = 'ewr1-QJhKfvmz4IlzJJoR4jnwb6';
export default class CreateAccountWizard extends LightningElement {
    @track selectedOffer = 'Enrollment only';
    @track error;
    @track successMessage = '';

    renderedCallback() {
            // alert('newtest');
            // invoke the method when component rendered or loaded
            Promise.all([
                loadScript(this, jQuery + '/Jquery.js'),
                loadScript(this, Recurly + '/Recurly.js'),
            ]).then(() => {
                this.error = undefined;

                recurly.configure('ewr1-QJhKfvmz4IlzJJoR4jnwb6');
                recurly.token(document.querySelector('form'), tokenHandler);

                function tokenHandler(err, token) {
                    if (err) {
                        // handle error using err.code and err.fields
                    } else {
                        // handle success using token.id
                    }
                }
                recurly.on('field:submit', function(event) {
                    $('form').submit();
                });
                alert('newtest1');
                // On form submit, we stop submission to go get the token
                $('form').on('submit', function(event) {
                    alert('newtest2');
                    // Prevent the form from submitting while we retrieve the token from Recurly
                    event.preventDefault();
                    // Reset the errors display
                    $('#errors').text('');
                    $('input').removeClass('error');
                    // Disable the submit button
                    $('button').prop('disabled', true);
                    var form = this;
                    // Now we call recurly.token with the form. It goes to Recurly servers
                    // to tokenize the credit card information, then injects the token into the
                    // data-recurly="token" field above
                    recurly.token(form, function(err, token) {
                        debugger;
                        console.log(token);
                        // send any errors to the error function below
                        if (err) error(err);
                        // Otherwise we continue with the form submission
                        //else form.submit();
                    });
                });
            }).catch(error => {
                console.log('failed with error: ' + error);
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error!!',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
        }
        // showSuccessMessage() { // call back method 
        //     this.successMessage = 'Scripts are loaded successfully!!';
        //     alert('Scripts are loaded successfully!!!');
        // }
        // handleChange(event) {
        //     this.selectedOffer = event.detail.value;
        // }
    getingToken() {}
}

​​​​​​​
{tushar-sharma}{tushar-sharma}
Please check this section of document:

Manipulate the DOM with JavaScript
Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently. However, there are some third-party JavaScript libraries that take over the DOM.
If a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element.
When using these libraries in a Lightning web component, add lwc:dom="manual" to any HTML element that you want to manipulate with JavaScript. When the engine sees the directive, it preserves encapsulation.
Add the lwc:dom="manual" directive to an empty native HTML element. The owner of the component calls appendChild() on that element to manually insert the DOM.

You need to add `wc:dom="manual"` directive to an empty native HTML

Reference: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_third_party_library
                   https://newstechnologystuff.com/2019/03/16/use-static-resource-in-lightning-web-component/


If this answer helps you, please mark it as accepted.

Regards,
Tushar Sharma
https://newstechnologystuff.com/
Ibarra JonasIbarra Jonas
if a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element Tell The Bell (https://tellthebell.onl/).
Kunal Jangid 14Kunal Jangid 14
Hi Aswin,

I'm facing a similar problem while integrating lightning with Recurly. I have uploaded the Recurly.js script as a static resource in the org and using the Aura Lightning Framework to invoke the recurly.configure('public-key') method. When I try to invoke the method, I get an error stating that 'recurly' is not defined.
I have tried invoking it from the afterScriptsLoaded method in the controller but still no luck. Have you been able to successfully integrate Lightning with Recurly? And if yes, it would be brilliant if you can guide me a bit on this?

PS: I also tried this by editing the original Recurly.js and using a window function to call the method inside, so that it becomes Salesforce Locker Service compliant. Didn't solve the problem.

Including the Recurly.js from RecurlyJS static resource in the component

Invoking recurly.configure in afterScriptsLoaded method

Thank you and Warm Regards,
Kunal