(null);
const [modalVisible, setModalVisible] = useState(false);
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
modalRef.current?.open({ wechatUrl: res.url });
};
return (
自定义 Button - visible 参数唤起 modal
setModalVisible(false)}
wechatProps={{ wechatUrl }}
/>
自定义 Button - ref open 方法唤起 modal
);
};
export default WechatComponent;
```
#### 方式四：自定义承接
直接引入二维码组件，自定义承接和唤起方式。用户扫码完成支付后，微信会通知业务后端支付结果。
```typescript
import { Wechat } from 'pay-sdk-react';
const wechatUrl = 'weixin://wxpay/...';
const WechatComponent = () => {
return (
直接使用 Wechat - 用户自定义承接方式&展示时机
);
};
export default WechatComponent;
```
### H5 端
#### 方式一：PayButton
引入支付按钮，点击唤起等待支付弹窗（或蒙层），自动打开微信支付链接，微信内浏览器自动唤起支付。用户完成支付后，微信会通知业务后端支付结果。等待结果承接：支持弹窗和蒙层两种方式。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const MWechatComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { wechatUrl: res.url };
};
return (
PayButton - 基础用法
Pay Button
PayButton - mask
Pay Button
);
};
export default MWechatComponent;
```
#### 方式二：MWechatButton
引入 MWechatButton 按钮，点击唤起等待支付弹窗（或蒙层），自动打开微信支付链接，微信内浏览器自动唤起支付。用户完成支付后，微信会通知业务后端支付结果。
```typescript
import { MWechatButton } from 'pay-sdk-react';
const wechatUrl = 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?...';
const MWechatComponent = () => {
return (
wechat Button - modal
Wechat Button
);
};
export default MWechatComponent;
```
## PayPal
引入支付按钮，点击唤起支付，自动打开 PayPal 支付链接，同时展示等待支付结果蒙层。PayPal 支付完成后，PayPal 官方会重定向到业务指定的结果页面，重定向地址由业务后端服务调用 PayPal 官方创建支付订单 API 时传入。
### 方式一：PayButton
引入支付按钮，点击唤起支付，自动打开 PayPal 支付链接，同时展示等待支付结果蒙层。用户完成支付后，PayPal 会重定向到业务指定的结果页面。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const PaypalComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { wechatUrl: res.url };
};
return (
PayButton-基础用法
Pay Button
PaypalButton - 不自动打开第三方支付页面 - 新tab
Pay Button
);
};
export default PaypalComponent;
```
### 方式二：PaypalButton
引入 PaypalButton 按钮，点击唤起支付，自动打开 PayPal 支付链接，同时展示等待支付结果蒙层。用户完成支付后，PayPal 会重定向到业务指定的结果页面。
```typescript
import { PaypalButton } from 'pay-sdk-react';
const paypalUrl = 'https://www.sandbox.paypal.com/checkoutnow?...';
const PaypalComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { wechatUrl: res.url };
};
return (
PaypalButton - 自动打开第三方支付页面 - 当前tab
Paypal Button
PaypalButton - 不自动打开第三方支付页面 - 新tab
Paypal Button
Paypal Button - 不自动打开第三方支付页面 - 当前tab
Paypal Button
);
};
export default PaypalComponent;
```
## Stripe
引入支付组件，使用 Stripe 支付。Stripe 支付完成后，Stripe 官方会重定向到业务指定的结果页面，重定向地址由业务后端服务调用 Stripe 官方创建支付订单 API 时传入。
### 方式一：PayButton
引入支付按钮，点击唤起支付 modal 或 popup，展示 Stripe 支付表单。用户完成支付后，Stripe 会重定向到业务指定的结果页面。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const StripeComponent = () => {
const createOrder = async () => {
return await fetch('/create-order', {
method: 'POST',
});
};
return (
PayButton-基础用法
Pay Button
);
};
export default StripeComponent;
```
### 方式二：Stripe.Button
引入 Stripe.Button 按钮，点击唤起支付 modal 或 popup，展示 Stripe 支付表单。用户完成支付后，Stripe 会重定向到业务指定的结果页面。
```typescript
import { Stripe } from 'pay-sdk-react';
const StripeComponent = () => {
const createOrder = async () => {
return await fetch('/create-order', {
method: 'POST',
});
};
return (
Stripe.Button
Stripe Button
);
};
export default StripeComponent;
```
### 方式三：自定义唤起 popup - 推荐 移动端 使用
使用自定义按钮，调用 Stripe.Popup 组件，展示 Stripe 支付表单。用户完成支付后，Stripe 会重定向到业务指定的结果页面。
```typescript
import { useRef, useState } from 'react';
import { Stripe, StripePopupRef } from 'pay-sdk-react';
const options = {
stripeKey: '***',
clientSecret: '***',
} as const;
const StripeComponent = () => {
const popupRef = useRef(null);
const [popupVisible, setPopupVisible] = useState(false);
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
popupRef.current?.open(res);
};
return (
自定义 button-visible 参数唤起 popup
setPopupVisible(false)}
stripeProps={options}
/>
自定义 button-ref open 方法唤起 popup
);
};
export default StripeComponent;
```
### 方式四：自定义唤起 modal - 推荐 PC 端使用
使用自定义按钮，调用 Stripe.Modal 组件，展示 Stripe 支付表单。用户完成支付后，Stripe 会重定向到业务指定的结果页面。
```typescript
import { useRef, useState } from 'react';
import { Stripe, StripeModalRef } from 'pay-sdk-react';
const options = {
stripeKey: '***',
clientSecret: '***',
} as const;
const StripeComponent = () => {
const modalRef = useRef(null);
const [modalVisible, setModalVisible] = useState(false);
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
modalRef.current?.open(res);
};
return (
自定义 button-visible 参数唤起 modal
setModalVisible(false)}
stripeProps={options}
/>
自定义 button-ref open 方法唤起 modal
);
};
export default StripeComponent;
```
### 方式五：Stripe 表单
引入 Stripe 表单组件，自定义承接和展示时机。用户完成支付后，Stripe 会重定向到业务指定的结果页面。
```typescript
import { Stripe } from 'pay-sdk-react';
const options = {
stripeKey: '***',
clientSecret: '***',
} as const;
const StripeComponent = () => {
return (
Stripe表单
);
};
export default StripeComponent;
```
## 空中云汇（Airwallex）
引入支付组件，使用空中云汇支付。空中云汇支付完成后，空中云汇支付组件会回调 onSuccess 方法，业务执行后续逻辑。
### 方式一：PayButton
引入支付按钮，点击唤起 popup 承接表单（推荐移动端），PC 端推荐唤起 modal。用户完成支付后，空中云汇支付组件会回调 onSuccess 方法，业务执行后续逻辑。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const AirwallexComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return {
type: 'fullFeaturedCard',
initOptions: {
env: 'demo',
locale: 'en',
},
options: {
currency: res.currency,
intent: {
id: res.intentId,
client_secret: res.client_secret,
},
client_secret: res.client_secret,
},
onSuccess: () => {
window.location.replace('支付成功结果页');
},
};
};
return (
PayButton-基础用法
Pay Button
);
};
export default AirwallexComponent;
```
### 方式二：自定义唤起 popup
使用自定义按钮，调用 Airwallex.Popup 组件，展示空中云汇支付表单。用户完成支付后，空中云汇支付组件会回调 onSuccess 方法，业务执行后续逻辑。
```typescript
import { useRef, useState } from 'react';
import { Airwallex, AirwallexPopupRef } from 'pay-sdk-react';
const intentId = '***';
const clientSecret = '***';
const options = {
type: 'fullFeaturedCard',
initOptions: {
env: 'demo',
locale: 'en',
},
options: {
currency: 'USD',
intent: {
id: intentId,
client_secret: clientSecret,
},
client_secret: clientSecret,
},
onSuccess: () => {
window.location.replace('支付成功结果页');
},
} as const;
const AirwallexComponent = () => {
const [popupVisible, setPopupVisible] = useState(false);
const popupRef = useRef(null);
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
popupRef.current?.open({
type: 'fullFeaturedCard',
initOptions: {
env: 'demo',
locale: 'en',
},
options: {
currency: res.currency,
intent: {
id: res.intentId,
client_secret: res.client_secret,
},
client_secret: res.client_secret,
},
onSuccess: () => {
window.location.replace('支付成功结果页');
},
});
};
return (
自定义 button - visible 参数唤起 popup
setPopupVisible(false)}
airwallexProps={options}
/>
自定义 button - ref open 方法唤起 popup
);
};
export default AirwallexComponent;
```
### 方式三：唤起 modal
使用自定义按钮，调用 Airwallex.Modal 组件，展示空中云汇支付表单。用户完成支付后，空中云汇支付组件会回调 onSuccess 方法，业务执行后续逻辑。
```typescript
import { useRef, useState } from 'react';
import { Airwallex, AirwallexModalRef } from 'pay-sdk-react';
const intentId = '***';
const clientSecret = '***';
const options = {
type: 'fullFeaturedCard',
initOptions: {
env: 'demo',
locale: 'en',
},
options: {
currency: 'USD',
intent: {
id: intentId,
client_secret: clientSecret,
},
client_secret: clientSecret,
},
onSuccess: () => {
window.location.replace('支付成功结果页');
},
} as const;
const AirwallexComponent = () => {
const [modalVisible, setModalVisible] = useState(false);
const modalRef = useRef(null);
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
modalRef.current?.open({
type: 'fullFeaturedCard',
initOptions: {
env: 'demo',
locale: 'en',
},
options: {
currency: res.currency,
intent: {
id: res.intentId,
client_secret: res.client_secret,
},
client_secret: res.client_secret,
},
onSuccess: () => {
window.location.replace('支付成功结果页');
},
});
};
return (
自定义 button-visible 参数唤起 modal
setModalVisible(false)}
airwallexProps={options}
/>
Airwallex.button - ref open 方法唤起 modal
);
};
export default AirwallexComponent;
```
### 方式四：自定义承接
引入 Airwallex 表单组件，自定义承接和展示时机。用户完成支付后，空中云汇支付组件会回调 onSuccess 方法，业务执行后续逻辑。
```typescript
import { Airwallex } from 'pay-sdk-react';
const intentId = '***';
const clientSecret = '***';
const options = {
type: 'fullFeaturedCard',
initOptions: {
env: 'demo',
locale: 'en',
},
options: {
currency: 'USD',
intent: {
id: intentId,
client_secret: clientSecret,
},
client_secret: clientSecret,
},
onSuccess: () => {
window.location.replace('支付成功结果页');
},
} as const;
const AirwallexComponent = () => {
return (
);
};
export default AirwallexComponent;
```
### 方式五：Airwallex.Button
引入支付按钮，点击打开第三方支付链接，同时唤起等待支付结果蒙层。用户完成支付后，空中云汇会重定向到业务指定的结果页面。
```typescript
import { Airwallex } from 'pay-sdk-react';
const AirwallexComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { airwallexUrl: res.url };
};
return (
Airwallex.Button
Airwallex Button
);
};
export default AirwallexComponent;
```
## PIX（巴西即时支付）
引入支付组件，使用 PIX 巴西即时支付。用户扫码完成支付后，业务后端会收到支付通知。
### PC 端
#### 方式一：PayButton
引入 PayButton 按钮，点击唤起支付弹窗，展示 PIX 二维码。用户扫码完成支付后，业务后端会收到支付通知。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const PixComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { pixCode: res.pixCode };
};
return (
PayButton-基础用法
Pay Button
);
};
export default PixComponent;
```
#### 方式二：Pix.Button
引入 Pix.Button，点击唤起支付弹窗，展示 PIX 二维码。用户扫码完成支付后，业务后端会收到支付通知。
```typescript
import { Pix } from 'pay-sdk-react';
const PixComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { pixCode: res.pixCode };
};
return (
Pix.Button - modal
PIX Button
);
};
export default PixComponent;
```
#### 方式三：自定义按钮
使用自定义按钮，调用支付弹窗组件，展示 PIX 二维码。用户扫码完成支付后，业务后端会收到支付通知。
```typescript
import { useRef, useState } from 'react';
import { Pix, PixModalRef } from 'pay-sdk-react';
const pixCode = '00020126580014br.gov.bcb.pix...';
const PixComponent = () => {
const modalRef = useRef(null);
const [modalVisible, setModalVisible] = useState(false);
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
modalRef.current?.open({ pixCode: res.pixCode });
};
return (
自定义 Button - visible 参数唤起 modal
setModalVisible(false)}
pixProps={{ pixCode }}
/>
自定义 Button - ref open 方法唤起 modal
);
};
export default PixComponent;
```
#### 方式四：自定义承接
直接引入 PIX 二维码组件，自定义承接方式&展示时机。用户扫码完成支付后，业务后端会收到支付通知。
```typescript
import { Pix } from 'pay-sdk-react';
const pixCode = '00020126580014br.gov.bcb.pix...';
const PixComponent = () => {
return (
);
};
export default PixComponent;
```
### H5 端
#### 方式一：PayButton
引入支付按钮，点击唤起等待支付弹窗（或蒙层），自动打开 PIX 支付链接。用户完成支付后，业务后端会收到支付通知。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const MPixComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { pixCode: res.pixCode };
};
return (
PayButton - 基础用法
Pay Button
PayButton - mask
Pay Button
);
};
export default MPixComponent;
```
#### 方式二：MPix.Button
引入 MPix.Button 按钮，点击唤起等待支付弹窗（或蒙层），自动打开 PIX 支付链接。用户完成支付后，业务后端会收到支付通知。
```typescript
import { MPixButton } from 'pay-sdk-react';
const pixCode = '00020126580014br.gov.bcb.pix...';
const MPixComponent = () => {
return (
PIX Button - modal
PIX Button
PIX Button - mask
PIX Button
);
};
export default MPixComponent;
```
## Payssion
引入支付组件，使用 Payssion 支付。Payssion 支付完成后，Payssion 官方会重定向到业务指定的结果页面，重定向地址由业务后端服务调用 Payssion 官方创建支付订单 API 时传入。
### 方式一：PayButton
引入支付按钮，点击打开第三方支付链接，同时唤起等待支付结果蒙层。用户完成支付后，Payssion 会重定向到业务指定的结果页面。
```typescript
import { PayButton, PaymentMethod } from 'pay-sdk-react';
const PayssionComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { payssionUrl: res.url };
};
return (
PayButton-基础用法
Pay Button
Pay Button - 不自动打开第三方支付页面
Pay Button
);
};
export default PayssionComponent;
```
### 方式二：PayssionButton
引入 PayssionButton 按钮，点击打开第三方支付链接，同时唤起等待支付结果蒙层。用户完成支付后，Payssion 会重定向到业务指定的结果页面。
```typescript
import { PayssionButton } from 'pay-sdk-react';
const PayssionComponent = () => {
const createOrder = async () => {
const res = await fetch('/create-order', {
method: 'POST',
});
return { payssionUrl: res.url };
};
return (
Payssion Button - 自动打开第三方支付页面 - 当前tab
Payssion Button
PaypalButton - 不自动打开第三方支付页面 - 新tab
Payssion Button
PayssionButton - 不自动打开第三方支付页面 - 当前tab
Payssion Button
);
};
export default PayssionComponent;
```