Mand Mobile

Cashier

Business payment pop-up window, supports payment channel selecting and payment verification code sending

Import

import { Cashier } from  'mand-mobile-next'

Vue.createApp().component(Cashier.name, Cashier)

Code Examples

API

Cashier Props

PropsDescriptionTypeDefaultNote
v-modeldisplay cashier or notBooleanfalse-
channelsdata source of payment channelArray<{text, value, icon, iconSvg, img, action}>[]icon can be used as the name attribute of className or component Icon, iconSvg for using svg icon, img is an icon link (choose one with icon), action is a special action handler
channel-limitshow more payment channels button when the payment channels exceeds the limitNumber2-
default-indexdefault selected index of payment channelNumber0-
titlecashier titleStringpay -
describecashier describeString--
payment-titlepayment amount titleString支付金额(元)support html fragment
payment-amountpayment amountString0.00support html fragment
payment-describethe description of payment amountString-support html fragment
pay-button-textconfirm payment button textString确认支付-
pay-button-disableddisable payment buttonBooleanfalse-

Cashier Methods

next(scene, option)

To the next step of Cashier

ParametersDescriptionTypeDefaultNote
scenestep identifierString-choose(payment channel selection)
captcha(Send verification code)
loading(Payment is in process)
success(Payment succeed)
fail(Payment failed)
custom(fill content using slot scene)
optionthe configuration of current stepObjectproperties are listed as follows-
  • captcha option
PropsDescriptionTypeDefaultNote
textinstructions of sending verification codeString--
briefbrief of sending verification codeString--
maxlengthlength of verification codeNumber4-1 means no restriction of the input length
countcountdown of resending verification codeNumber600 means no resending display
onSendCallback of sending verification codeFunction(countdown: Function)-countdown is the function of starting counting down
onSubmitCallback of submitting verification codeFunction(code: String)-code is the verification code
autoCountdownstart the countdown automatically, otherwise need to manually call countdownBooleantrue-
countNormalTexttext of send verification code buttonString发送验证码-
countActiveTexttext of send verification code button in countdown stateString{$1}秒后重发-
  • loading option
PropsDescriptionTypeDefaultNote
textThe introduction of in-process paymentStringpayment result is loading...support html fragment
  • success option
PropsDescriptionTypeDefaultNote
textThe introduction of successful paymentStringpayment succeedssupport html fragment
buttonTextbutton textString我知道了support html fragment
handlerbutton clickbackFunction--
actionsbuttons groupArray<{buttonText, handler}>-used when there are two buttons
  • fail option
PropsDescriptionTypeDefaultNote
textThe introduction of unsuccessful paymentStringpayment fails, please try again latersupport html fragment
buttonTextbutton textString我知道了support html fragment
handlerbutton clickbackFunction--
actionsbuttons groupArray<{buttonText, handler}>-used when there are two buttons

Captcha Slots

Scoped slot of captcha header

<div slot-scope="{ scene }" slot="header">
  <md-notice-bar
    v-if="scene === 'choose'"
    mode="closable"
    icon="warn"
    type="warning"
  ></md-notice-bar>
</div>
header

Scoped slot of captcha footer

channel

Payment channel area slot, which can be used to add payment channel special operations, such as adding a bank card

payButton

Payment button slot

scene

Custom scene slot, open with next('custom')

Cashier Events

@select(item: {text, value})

Payment channel selected

@pay(item: {text, value})

Confirm payment channels and initiate payment

@cancel()

Cancel payment

@show()

Display cashier

@hide()

Hide cashier