Payment Details Two

Playground

Copy Page

import { PaymentDetailsTwo , type PaymentFormData} from "@/components/billingsdk/payment-details-two";

"use client"

import { PaymentDetailsTwo , type PaymentFormData} from "@/components/billingsdk/payment-details-two";


export function PaymentDetailsTwoDemo() {

//Function that handles onSubmit in the Form
const handleSubmit = async (_data: PaymentFormData) => {
  // _data contains all the form values entered by the user:
  // e.g., _data.cardNumber, _data.nameOnCard, _data.validTill, _data.cvv, _data.firstName, etc.
  // You can use this object to make an API call to your backend, for example:
  // await fetch('/api/payment', { method: 'POST', body: JSON.stringify(_data) })
  
  return await new Promise((resolve) => {
    setTimeout(() => {
      console.log("Handle Submit Function")
      resolve('The promise is resolved')
    }, 3000)
  })
}


//Function that handles onCancel in the Form
  const handleDiscard = ()=>{
    console.log("The Discard Function")
  }

  return (
    <PaymentDetailsTwo
      onSubmit={handleSubmit}
      onDiscard={handleDiscard}
    />
  )
}

<PaymentDetailsTwo
  onSubmit={handleSubmit}
  onDiscard={handleDiscard}
  countries={[
  { name: "India", isoCode: "IN" },
  { name: "United States", isoCode: "US" },
  { name: "United Kingdom", isoCode: "GB" },
  { name: "Canada", isoCode: "CA" },
  { name: "Australia", isoCode: "AU" },
  ]}
  states={[
    { name: "Bihar", isoCode: "BR" },
    { name: "Karnataka", isoCode: "KA" },
    { name: "Maharashtra", isoCode: "MH" },
  ]}
  cities={[
    { name: "Patna", },
    { name: "Bangalore",},
    { name: "Mumbai",},
  ]}
/>

interface PaymentFormData {
  nameOnCard?: string;
  cardNumber?: string;
  validTill?: string;
  cvv?: string;
  firstName?: string;
  middleLastName?: string;
  country?: string;
  state?: string;
  city?: string;
  billingAddress?: string;
  pinCode?: string;
  contactNumber?: string;
  general? : string

}

import { useTheme } from '@/contexts/theme-context'
import { getThemeStyles } from '@/lib/themes'

// The component automatically applies theme styles
<PaymentDetails 
  // Theme styles are applied automatically
  // ... other props
/>

<PaymentDetails 
  className="max-w-2xl mx-auto" 
  // ... other props
/>

"use client"

import { PaymentDetailsTwo, type PaymentFormData } from "@/components/billingsdk/payment-details-two";


export function PaymentDetailsTwoDemo() {

  //Function that handles onSubmit in the Form
  const handleSubmit = async (_data: PaymentFormData) => {
    // _data contains all the form values entered by the user:
    // e.g., _data.cardNumber, _data.nameOnCard, _data.validTill, _data.cvv, _data.firstName, etc.
    // You can use this object to make an API call to your backend, for example:
    // await fetch('/api/payment', { method: 'POST', body: JSON.stringify(_data) })

    return await new Promise((resolve) => {
      setTimeout(() => {
        console.log("Handle Submit Function")
        resolve('The promise is resolved')
      }, 3000)
    })
  }


  //Function that handles onCancel in the Form
  const handleDiscard = () => {
    console.log("The Discard Function")
  }

  return (
    <PaymentDetailsTwo
      onSubmit={handleSubmit}
      onDiscard={handleDiscard}
    />
  )
}