Instance.paymentRequest

interface Instance {
  // ...
  paymentRequest: (options: Options) => {
    destroy: () => void
  }
}

interface Options {
  target: HTMLElement
  locale: 'en'
  requestShipping?: boolean
  shippingOptions?: ShippingOption[]
  onShippingOptionChange?: (shippingOption: ShippingOption) => Promise<{
    status: 'fail' | 'success'
    total: {
      amount: number
      label?: string
    }
  }>
  onShippingAddressChange?: (shippingAddress: Address) => Promise<{
    status: 'fail' | 'success'
    shippingOptions?: ShippingOption[]
    total: {
      amount: number
      label?: string
    }
  }>
  buttonStyle?: {
    radius?: 'none' | 'small' | 'large' | 'round'
    size?: 'none' | 'small' | 'large'
    variant?: 'light' | 'dark' | 'light-outlined'
    action?: 'subscribe' | 'donate' | 'pay' | 'buy'
  }
}

interface ShippingOption {
  id: string
  label: string
  amount: number
  description?: string
}

type Address =
  | {
      city: string
      phone: string
      region: string
      country: string
      recipient: string
      postalCode: string
      sortingCode: string
      addressLine: string[]
      dependentLocality: string
    }
  | {
      city: string
      region: string
      country: string
      postalCode: string
    }

RevolutCheckout("<token>").then((instance) => {
  const shippingOptions = [
    {
      id: 'flex',
      label: 'The big flex express shipping',
      amount: 1000,
    },
    {
      id: 'countrystrong',
      label: 'Country strong shipping',
      amount: 3000,
    },
  ]

  const paymentRequest = instance.paymentRequest({
    target: document.getElementById('revolut-payment-request'),
    requestShipping: true,
    shippingOptions,
    onShippingOptionChange: (selectedShippingOption) => {
      // ideally compute new total price. calls can be made to a server here
      return Promise.resolve({
        status: 'success',
        total: {
          amount: 777 + selectedShippingOption.amount,
        },
      })
    },
    onShippingAddressChange: (selectedShippingAddress) => {
      // ideally compute new total price. calls can be made to a server here
      const newShippingOption = {
        id: 'new-shipping',
        label: 'The new ultra-fast method',
        amount: 500,
        description: 'The shipping method faster than lightning',
      }

      return Promise.resolve({
        status: 'success',
        shippingOptions: [newShippingOption, ...shippingOptions],
        total: {
          amount: 777 + newShippingOption.amount,
        },
      })
    },
    onSuccess() {
      setResult('Paid')
    },
    onError(error) {
      setResult(`Error: ${error.message}`)
    },
    // buttonStyle: { size: 'small', variant: 'light-outlined' },
  })

  paymentRequest.canMakePayment().then((method) => {
    if (method) {
      paymentRequest.render()
    } else {
      setResult('Not supported')
      paymentRequest.destroy()
    }
  })
})