Reference

import ClickOnceComponentConfig from "@pxpio/web-components-sdk/src/components/clickOnceComponents/types/ClickOnceComponentConfig";

const clickOnceConfig: ClickOnceComponentConfig = {
  cardBrandImages: {
    visaSrc: string,
    mastercardSrc: string,
    amexSrc: string,
    cupSrc: string,
    dinersSrc: string,
    discoverSrc: string,
    jcbSrc: string
  },
  isCvcRequired: boolean,
  cvcComponentConfig: CardCvcComponentConfig,
  cardSubmitComponentConfig: CardSubmitComponentConfig,
  hideCardBrandLogo: boolean,
  submitButtonText: string,
  disableCardSelection: boolean,
  isRenderLastPurchaseCard: boolean,
  isRenderLastPayoutCard: boolean,
  isProcessNextStepOnCardClick: boolean,
  onOnceCardClick?:() => void,
  onCvcEntered?:() => void
}

const clickOnce = pxpCheckoutSdk.create("click-once");

Parameters

Parameter	Description
`cardBrandImages` object	Details about the card brand images.
`cardBrandImages.visa` string	The URL for the Visa card brand image.
`cardBrandImages.mastercard` string	The URL for the Mastercard card brand image.
`cardBrandImages.amex` string	The URL for the Amex card brand image.
`cardBrandImages.cup` string	The URL for the CUP card brand image.
`cardBrandImages.diners` string	The URL for the Diners card brand image.
`cardBrandImages.discover` string	The URL for the Discover card brand image.
`cardBrandImages.jcb` string	The URL for the JCB card brand image.
`isCvcRequired` boolean	Whether CVC is required.
`cvcComponentConfig` CardCvcComponentConfig	Details about the configuration for the card CVC component. See reference.
`cardSubmitComponentConfig` CardSubmitComponentConfig	Details about the configuration for the card submit component. See reference.
`hideCardBrandLogo` boolean	Whether to hide the card brand logo.
`submitButtonText` string	The text for the submit button.
`disableCardSelection` boolean	Whether to disable card selection.
`isRenderLastPurchaseCard` boolean	Whether to render the last card that was used for a purchase.
`isRenderLastPayoutCard` boolean	Whether to render the last card that was used for a payout.
`isProcessNextStepOnCardClick` boolean	Whether to process the next step on card click.

Callback

Callback	Description
`onOnceCardClick:() => void`	Callback function triggered when a card is clicked.
`onCvcEntered:() => void`	Callback function triggered when a CVC is entered.

Example

import ClickOnceComponentConfig from "@pxpio/web-components-sdk/src/components/clickOnceComponents/types/ClickOnceComponentConfig";

const clickOnceConfig: ClickOnceComponentConfig = {
  cardBrandImages: {
    visaSrc: "https://example.com/visa.png",
    mastercardSrc: "https://example.com/mastercard.png",
    amexSrc: "https://example.com/amex.png",
    cupSrc: "https://example.com/cup.png",
    dinersSrc: "https://example.com/diners.png",
    discoverSrc: "https://example.com/discover.png",    
   jcbSrc: "https://example.com/jcb.png",
  },
  isCvcRequired: true,
  cvcComponentConfig: {
    required: true,
    label: "Security Code",
    applyMask: true,
    showMaskToggle: true,
    labelPosition: "left",
    errorMessage: "Please enter a valid security code",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  cardSubmitComponentConfig: {
    submitText: "Pay {amount} {currency}",
  },
  hideCardBrandLogo: false,
  submitButtonText: "Pay now",
  disableCardSelection: false,
  isRenderLastPurchaseCard: true,
  isRenderLastPayoutCard: true,
  isProcessNextStepOnCardClick: true,
  onOnceCardClick:() => console.log("Card clicked"),
  onCvcEntered:() => console.log("CVC entered")
}

const clickOnce = pxpCheckoutSdk.create("click-once");