• Kunal Jangid 14
  • NEWBIE
  • 0 Points
  • Member since 2021

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
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() {}
}

​​​​​​​