Function initSecureDeviceToken

  • Introduction

    Function to render cvv hosted field and init an instance of ICardSubscriptions

    Parameters

    Returns Promise<ICardSubscriptions>

    Promise - instance of ICardSubscriptions

    Throws

    • if params: options or kushkiInstance are null or undefined then throw ERRORS.E012
    • if the param options.fields any field has non-existent selector then throw ERRORS.E013

    Examples

    Basic setup to Secure Device Token

    Define the container for the cvv field
    <!DOCTYPE html>
    <html lang="en">
    <body>
        <section>
            <div id="cvv_id"></div>
        </section>
    </body>
    </html>
    Init subscription card instance
    • To enable subscription on demand or one click payment, you need to define the cvv field. In background this method render the hosted field
    import { IKushki, init, KushkiError } from "@kushki/js-sdk";
    import {
      SecureDeviceTokenOptions,
      ICardSubscriptions,
      initSecureDeviceToken
    } from "@kushki/js-sdk/Card";

    const kushkiOptions : KushkiOptions = {
      publicCredentialId: 'public-merchant-id',
      inTest: true
    };

    const options : SecureDeviceTokenOptions = {
      fields: {
          cvv: {
             selector: "cvv_id"
          }
      }
    }

    const initCardSubscription = async () => {
     try {
         const kushkiInstance : Ikushki =  await init(kushkiOptions);
         const cardSubscription :  ICardSubscriptions  = await initSecureDeviceToken(kushkiInstance, options)
     } catch (e: any) {
          console.error(e.message);
     }
    }

    Card Subscription body with amount, currency, prevent autofill and custom field Example

    Definition container in html
    <!DOCTYPE html>
    <html lang="en">
    <body>
        <section>
            <div id="cvv_id"></div>
        </section>
    </body>
    </html>
    Init subscription card instance
    • To enable prevent autofill in fields the preventAutofill flag must be true
    • Can define more properties for Field cvv param
    import { IKushki, init, KushkiError } from "@kushki/js-sdk";
    import {
      SecureDeviceTokenOptions,
      ICardSubscriptions,
      initSecureDeviceToken
    } from "@kushki/js-sdk/Card";

    const kushkiOptions : KushkiOptions = {
      publicCredentialId: 'public-merchant-id',
      inTest: true
    };

    const options : SecureDeviceTokenOptions = {
      fields: {
          cvv: {
             inputType: "password",
             label: "CVV",
             placeholder: "CVV",
             selector: "cvv_id"
          },
      },
      preventAutofill: true, //To Enable prevent autofill in fields this flag must be true
    }

    const initCardSubscription = async () => {
     try {
         const kushkiInstance : Ikushki =  await init(kushkiOptions);
          const cardInstance:  ICardSubscriptions  = await initSecureDeviceToken(kushkiInstance, options)
     } catch (e: any) {
          console.error(e.message);
     }
    }

    Definition Custom Styles

    Consider the application of the same definition custom styles for card token, the difference is that the styles would be applied only into the cvv field.

    Definition container in html
    <!DOCTYPE html>
    <html lang="en">
    <body>
        <section>
            <div id="cvv_id"></div>
        </section>
    </body>
    </html>
    Init subscription card instance
    • Can use custom styles only for cvv field
    import { IKushki, init, KushkiError } from "@kushki/js-sdk";
    import {
      SecureDeviceTokenOptions,
      ICardSubscriptions,
      initSecureDeviceToken,
      Styles
    } from "@kushki/js-sdk/Card";

    const kushkiOptions : KushkiOptions = {
      publicCredentialId: 'public-merchant-id',
      inTest: true
    };

    const hostedFieldsStyles: Styles = {
            container: {
                display: "flex",
            },
            input: {
                fontSize: "12px",
                border: "1px solid #ccc",
                borderRadius: "10px",
                height: "30px",
                width: "300px",
            },
            focus: {
                border: "1px solid #0077ff",
                outline: "none",
            },
            invalid: {
                border: "1px solid #ff0000",
            }
        };

    const options : SecureDeviceTokenOptions = {
      fields: {
          cvv: {
             selector: "cvv_id"
          },
      },
      styles: hostedFieldsStyles //custom styles
    };

    const initCardSubscription = async () => {
     try {
         const kushkiInstance : Ikushki =  await init(kushkiOptions);
          const cardInstance:  ICardSubscriptions  = await initSecureDeviceToken(kushkiInstance, options)
     } catch (e: any) {
          console.error(e.message);
     }
    }

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc