第一步引入 paypal-js
安装依赖
npm install @paypal/paypal-js
package.json
"@paypal/paypal-js": "^7.0.3",
第二步页面引入
import { loadScript } from "@paypal/paypal-js";
第三步页面元素
<div id="pay-but-container" class="w-full mt-3 mx-3" :data-pp-amount="calcPriceUs"></div>
第四步配置参数
const loadPaypal = async () => {
let paypalDom = document.getElementById("pay-but-container");
if (paypalDom) {
paypalDom.innerHTML = "";
}
let loadParmes = {
clientId: "VITE_PAYPAL_KEY",
currency: "USD",
components: "messages,marks,buttons",
"enable-funding": "paylater",
"buyer-country": "US"
};
loadScript(loadParmes)
.then((paypal: any) => {
paypal.Messages({ buyerCountry: "US", style: { layout: "text", text: { align: "center" }}}).render("#pay-but-container");
paypal.Buttons({
buyerCountry: "US",
style: { layout: "vertical", color: "gold", shape: "rect", label: "paypal" },
createOrder: async (data: any) => {
let parmes: any = { ... };
let { data, success } = await orderCreate(parmes);
if (success) {
return data?.paySecret;
}
},
onCancel: () => {
},
onError: (err: any) => {
},
onApprove: (data: any, actions: any) => {
return actions.order.capture().then(() => {
router.push(`/pay/paySuccess`);
});
},
})
.render("#pay-but-container");
})
.catch((err: any) => {
Message({ type: "success", text: err });
});
};