thanks for link, your safed my day.
if someone need a Typescript React example for switching between subscriptions and orders
import { useEffect } from 'react'
import { loadScript } from "@paypal/paypal-js";
import {PayPalButtonsComponentOptions, OnApproveData, OnApproveActions, CreateSubscriptionActions, CreateOrderActions } from "@paypal/paypal-js/types/components/buttons"
interface Props {
onApprove: (order: any) => void;
onClick: () => void;
type: 'subscription' | 'order'
}
export default function PayPalComponent(props: Props) {
const components = "buttons";
let buttons;
useEffect(() => {
loadAndRender();
});
function render(options: PayPalButtonsComponentOptions ) {
if(window.paypal && window.paypal.Buttons){
buttons = window.paypal.Buttons(options);
buttons.render("#paypal-button-container").catch((err: any) => {
console.warn(
"Warning - Caught an error when attempting to render component",
err
);
});
}
}
function loadAndRender(transactionType = props.type) {
const clientId = "YOUCLIENTIDHERE"
function createOrder(data: any, actions: CreateOrderActions) {
return actions.order.create({
purchase_units: [
{
amount: {
value: "0.01",
},
},
],
});
};
function createSubscription(data: any, actions: CreateSubscriptionActions) {
return actions.subscription.create({
'plan_id': 'P-YOURESUBIDHERE'
});
}
async function onApproveOrder(data: OnApproveData, actions: OnApproveActions) {
const order = await actions.order.capture();
props.onApprove(order)
};
async function onApproveSubsciption(data: OnApproveData, actions: OnApproveActions) {
props.onApprove(data)
};
if (transactionType === "order") {
loadScript({
"client-id": clientId,
vault: false,
components
})
.then(() => {
render({
onApprove: onApproveOrder,
createOrder
});
});
} else {
loadScript({
"client-id": clientId,
vault: true,
intent: "subscription",
components
})
.then(() => {
render({
style: {
shape: "rect",
color: "gold",
layout: "vertical",
label: "subscribe" as any
},
onApprove: onApproveSubsciption,
createSubscription
});
});
}
}
///how to use <PayPalComponent type="subscription" onApprove={saveOrder} onClick={() => undefined}></PayPalComponent>
return (
<div id='paypal-button-container'></div>
);
}
the
