@ flagment-dev/支付要素
在你的产品中嵌入了Flagment的支付元素,通过Flagment处理支付.
安装
npm install @fragment-dev/payment-elements
反应17,18或19必须是同级依赖.
使用量
您的服务器调用服务器侧断层 SDK createPayment 和通过返回的 Payment 转到你产品的支付页面.
import {
Checkout,
PaymentElements,
usePayment,
} from '@fragment-dev/payment-elements';
const PayButton = () => {
const { state, canSubmit, submit, error } = usePayment();
if (state.status === 'accepted') {
return <p>Payment accepted.</p>;
}
return (
<>
<button
type="button"
disabled={!canSubmit}
// Call submit() inside the click handler. It never rejects.
onClick={() => submit()}
>
{state.status === 'processing' ? 'Paying…' : 'Pay'}
</button>
{state.status === 'declined' && <p role="alert">{state.message}</p>}
{error && <p role="alert">{error.message}</p>}
</>
);
};
const PaymentPage = ({ payment, email }) => (
<PaymentElements>
<Checkout
payment={payment}
billingDetails={{ email }}
onPaymentAccepted={close}
onPaymentDeclined={recordDecline}
onError={({ message }) => showError(message)}
>
<PayButton />
</Checkout>
</PaymentElements>
);
Checkout 在地址和卡片字段下方设置您的付费按钮 。 这需要
同样的道具 PaymentSession。 。 。 .
使用 usePayment().state 让你的产品处于状态.
type PaymentCheckoutState =
| { status: 'loading' }
| { status: 'ready' }
| { status: 'processing' }
| { status: 'declined'; message: string; declineCode: string | null }
| { status: 'accepted' };
挂起会话时从断块中加载支付状态并继续
继续飞行的尝试,所以重装不会两次. state
读取 loading 直到那时.
submit()等待卡片银行要求的任何核查步骤 在接受或拒绝收费时,或在收费失败时解决 错误.onPaymentAccepted接受指控时起火。 阅读支付 在您执行命令前从服务器上的 Flagment 状态 .onPaymentDeclined当卡被拒绝时开火。 付款人可以 输入另一张卡,然后再次提交。 下降趋势保持不变state直至 那麽.onError对不是下降的每一次失败都要开火. 无效的付款报告通过这个回拨, 没有孩子 .
自定义布局
要自定义布局, 渲染 PaymentSession 与 AddressElement, (中文(简体) ),
CardElement 还有你小时候的薪水扣 挂起一个 CardElement 百分比
届会. AddressElement 是可选的。 见 账单细节
学习更多.
错误
使用 usePayment().error 使失败不会减少。 说得很清楚
当一个字段更改时和何时 submit() 启动。 失败会离开会话
ready,所以支付的人可以再次屈服.
保存支付方法
设定 savePaymentMethod 改为 true 将卡片保存给付款人 billingDetails.email 当
付款确认。 默认为 false。 。 。 .
账单细节
你可以选择提供 name 财务报告和审定财务报表 address 支付人。 打开
AddressElement 如果你不提供它们.
保存一张牌
为了在不收费的情况下保存最终用户卡,您的服务器呼叫
服务器侧碎片 SDK 软件 createPaymentMethodSetup 使用终端用户的电子邮件
和通过返回的 PaymentMethodSetup 到您的页面.
import {
PaymentElements,
SavePaymentMethod,
usePaymentMethodSetup,
} from '@fragment-dev/payment-elements';
const SaveCardButton = () => {
const { state, canSubmit, submit, error } = usePaymentMethodSetup();
if (state.status === 'saved') {
return <p>Card saved.</p>;
}
return (
<>
<button
type="button"
disabled={!canSubmit}
// Call submit() inside the click handler. It never rejects.
onClick={() => submit()}
>
{state.status === 'processing' ? 'Saving…' : 'Save card'}
</button>
{state.status === 'declined' && <p role="alert">{state.message}</p>}
{error && <p role="alert">{error.message}</p>}
</>
);
};
const SaveCardPage = ({ paymentMethodSetup }) => (
<PaymentElements>
<SavePaymentMethod
paymentMethodSetup={paymentMethodSetup}
onPaymentMethodSaved={close}
onPaymentMethodDeclined={recordDecline}
onError={({ message }) => showError(message)}
>
<SaveCardButton />
</SavePaymentMethod>
</PaymentElements>
);
SavePaymentMethod 使您的保存按钮位于地址和卡片字段下面.
它需要同样的道具 PaymentMethodSetupSession。 。 。 .
要自定义布局, 渲染 PaymentMethodSetupSession 与
AddressElement, (中文(简体) ), CardElement 还有你小时候的"拯救按钮" 挂起一个
CardElement 每个届会. AddressElement 是可选的。 见
billingDetails (c) 将进一步学习.
使用 usePaymentMethodSetup().state 让你的产品处于状态.
type PaymentMethodSetupState =
| { status: 'loading' }
| { status: 'ready' }
| { status: 'processing' }
| { status: 'declined'; message: string; declineCode: string | null }
| { status: 'saved' };
在挂载会话时从分块中装入设置状态, 并继续一个
还在飞行中. state 读取 loading 直到那时.
submit()等待卡片银行要求的任何核查步骤 当卡片被保存或被拒绝,或者当它因出错而失败时,解析.onPaymentMethodSaved成功保存支付方法时起火. 这个saved状态没有卡片细节。 要读取卡片, 您的服务器 查询paymentMethodSetup并阅读其paymentMethod字段,或列表 最终用户卡带有paymentMethods(filter: { user })。 。 。 .onPaymentMethodDeclined当卡被拒绝时开火。 最终用户可以 输入另一张卡,然后再次提交。 下降趋势保持不变state直至 那麽.onError需要为其他非底线故障开火. 无效的设置通过此调用报告, 并且没有孩子 .billingDetails选择name财务报告和审定财务报表address。没有AddressElement,保存卡片需要name, (中文(简体) ),address.line1, (中文(简体) ),address.postalCode财务报告和审定财务报表address.country. 使AddressElement若为 你不给他们.
他们
过 theme 样式。 每个设置都有默认值 :
<PaymentElements
theme={{
appearance: 'light',
fontFamily: 'Arial, sans-serif',
input: {
fontSize: '16px',
backgroundColor: '#ffffff',
borderColor: '#d6d1c7',
borderWidth: '1px',
borderRadius: '8px',
padding: '12px',
focus: { borderColor: '#00a7c9' },
invalid: { borderColor: '#c62828' },
},
label: { fontSize: '12px', color: '#555562', spacing: '8px' },
error: { fontSize: '12px', color: '#c62828' },
layout: { rowGap: '16px', columnGap: '10px' },
}}
>
input 支持 fontSize, (中文(简体) ), color, (中文(简体) ), backgroundColor, (中文(简体) ), borderColor, (中文(简体) ),
borderWidth, (中文(简体) ), borderRadius 财务报告和审定财务报表 padding。 。 focus 财务报告和审定财务报表 invalid 对象
接受相同的属性;未指定属性继承了基础输入样式.
当一个无效字段被聚焦时,无效的样式优先 .
设定 input.borderWidth 改为 '0px' 为无边田地.
label 财务报告和审定财务报表 error 样式 hosted 标签和内置验证信件, 不
您的应用程序从会话错误中生成的消息 . label.spacing 控件
标签下的空格. layout 控制字段间的差距,而不是它们的顺序.
这些设置既适用于卡片,也适用于地址元素.
appearance 实值 light 或者说 dark。当省略时 dark 类
打开 <html>。默认使用16px输入文本,12px标签,1px边框,
8px角和12px输入垫.
使用字形颜色和系统字体. 主机字段无法继承您的页面 CSS自定义属性或字体. 将输入文本至少保存在 16px 上 .
许可证
麻省理工学院