You need to sign in to do that
Don't have an account?
aswin 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
LWC.js
<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() {} }
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/
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.
Thank you and Warm Regards,
Kunal