Function initCardPayoutToken

  • Introduction

    Function to init an instance of ICardPayouts

    Parameters

    Returns Promise<ICardPayouts>

    Promise - instance of ICardPayouts

    Throws

    • if params: options or kushkiInstance are null or undefined then throw ERRORS.E012
    • if params: options.paymentType have invalid length ERRORS.E011
    • if the param options.fields in some field has non-existent selector then throw ERRORS.E013
    • if into the param options.fields not exist the required fields for card payout token, then throw ERRORS.E020

    Examples

    Basic Card Payout Token

    Define the containers for the hosted fields

    <!DOCTYPE html>
    <html lang="en">
    <body>
        <section>
            <div id="cardholderName_id"/>
            <div id="cardNumber_id"/>
            <div id="isSubscription_id"/>
        </section>
    </body>
    </html>

    Init card payout token instance

    • In background this method render the hosted fields
    import { IKushki, init, KushkiError } from "@kushki/js-sdk";
    import {
      CardPayoutOptions,
      ICardPayouts,
      initCardPayoutToken
    } from "@kushki/js-sdk/CardPayouts";

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

    const options : CardPayoutOptions = {
      fields: {
          cardholderName: {
             selector: "cardholderName_id"
          },
          cardNumber: {
             selector: "cardNumber_id"
          },
          isSubscription: {
             selector: "isSubscription_id"
         }
      }
    }

    const buildCardPayoutInstance = async () => {
     try {
         const kushkiInstance : Ikushki =  await init(kushkiOptions);
         const cardPayoutInstance:  ICardPayouts  = await initCardPayoutToken(kushkiInstance, options)
     } catch (e: KushkiError) {
          console.error(e.message);
     }
    }

    Card Payout Token with required isSubscription

    Configurations for required isSubscription field

    • To specify if the isSubscription hosted field is required or not, add the isRequired flag into isSubscription configuration, default value is false
    • If the isSubscription field is required, when call requestToken method, the isSubscription checkbox must be checked, otherwise it will throw an error
    • If the isSubscription field is not required, is not necessary that the isSubscription checkbox to be selected
    const options : CardPayoutOptions = {
      fields: {
          cardholderName: {
             label: "Cardholder Name",
             placeholder: "Cardholder Name",
             selector: "cardholderName_id"
          },
          cardNumber: {
             label: "Card Number",
             placeholder: "Card Number",
             selector: "cardNumber_id"
          },
          isSubscription: {
             label: "Save card Data",
             selector: "isSubscription_id",
             isRequired: true,
          },
      },
    }

    Card Payout Token with isSubscription field omitted

    Configurations for omitted isSubscription field

    • To omit the isSubscription hosted field delete the isSubscription configuration
    • If the isSubscription configuration not exist, the isSubscription checkbox will not render in the page
    • The default value for isSubscription checkbox is false
    const options : CardPayoutOptions = {
      fields: { //Fields without isSubscription configurations
          cardholderName: {
             selector: "cardholderName_id"
          },
          cardNumber: {
             selector: "cardNumber_id"
          },
      },
    }

    Options Example

    • Consider the application of the same definition custom styles for card token, the difference is that the styles would be applied in payout hosted fields.
    • Can use preventAutofill flag to enable or disable autofill with navigator data in all fields
    • Can define the paymentType, this value is send in the token request, only accept two characters
    • The paymentType for Visa and Mastercard, the accepted value is 'GP'. For other brands, please refer to the list of allowed values.

    const hostedFieldsStyles: Styles = {
       container: {
         alignItems: "center",
         display: "flex"
       },
       focus: {
         border: "1px solid #0077ff",
         outline: "none"
       },
       input: {
         border: "1px solid #ccc",
         borderRadius: "10px",
         fontSize: "12px",
         height: "30px",
         width: "300px"
       },
       invalid: {
         border: "1px solid #ff0000"
       },
       isSubscription: {//consider is a checkbox
         "&:invalid": {
           appearance: "none",
           borderRadius: "3px"
         },
         height: "15px",
         width: "15px"
       },
       label: {
         fontSize: "12px"
       }
     };

    const options: CardPayoutOptions = {
       fields: {
         cardholderName: {
           placeholder: "Nombre de Tarjeta",
           selector: "cardHolderName_id"
         },
         cardNumber: {
           placeholder: "Número de tarjeta",
           selector: "cardNumber_id"
         },
         isSubscription: {
           selector: "isSubscription_id"
         }
       },
       paymentType: "GP",//optional, please read the specification text
       preventAutofill: true,
       styles: hostedFieldsStyles,
     }

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc