UpGate is a world-class payment orchestration platform. Our mission is to simplify payments and make it easier for merchants to reach global customers. We use the latest technologies to help you achieve better conversions and global user monetization.
https://docs.upgate.com/_mock/openapi/
https://api.sandbox.upgate.com/v1/
taxOverride object was added to Checkout requestpaymentFormOverride object was added to Checkout request./public folder and create index.html with code below:<html lang="en">
<head>
<script type="module" src="https://js.upgate.com/upgate.js"></script>
<script type="module" src="/main.js"></script>
<style>
body {
min-height: 100vh;
justify-content: center;
width: 350px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px;
}
</style>
</head>
<body>
<div id="payment"></div>
<button id="buy" onclick="submit()">Buy</button>
</body>
</html><div id="payment"> in your payment form. This incorporates an iframe containing a dynamic form that showcases configured payment method types available from the Checkout, enabling your customer to choose a payment method. The form autonomously gathers the relevant payment details for the chosen payment method type. Create main.js file with code below in ./public folder:let upgate;
const elementId = "payment";
async function mount() {
const { url } = await fetch("/checkout", { method: "POST" }).then((res) =>
res.json()
);
upgate.mountPaymentElement(elementId, url);
upgate.onResult(elementId, console.log); // use this method for handle result
}
function submit() {
upgate.submit(elementId);
}
window.onload = async () => {
upgate = new Upgate();
mount();
};Invoke submit('%elementId%'), providing the CheckoutElement and a success_url to specify the destination where Upgate should redirect the user upon completing the payment. For payments necessitating authentication, Upgate presents a modal for 3D Secure authentication or directs the customer to an authentication page, contingent on the payment method utilized. Following the completion of the authentication process, the customer is redirected to the specified success_url.
export type TResult = {
success: boolean;
url?: string;
error_message?: string;
error_code?: number;
retry?: boolean;
};All types of Upgate.js you can find in index.d.ts.
success: true - payment processed successful.success: false; retry: false - payment was not processed, and form must be unmounted with unmountPaymentElement('payment').retry: true; success: false you can submit same form again (form not valid for example).failure_url with query parameters ?error_code=&error_message=In mountPaymentElement function you can pass third config parameter.
declare type TConfig = Partial<{
theme?: "LIGHT" | "DARK" | "BROWSER";
onTimeout?: () => void;
}>;Property theme overrides theme type defined in back office, and you can call embedded form with dynamically changed theme. Callback onTimeout will call when form time limit exceed. After timeout you need to remount component. Theme type BROWSER renders theme depending on system theme.
upgate.mountPaymentElement("%elementId%", "%checkoutUrl%", { theme: "LIGHT" });After 15 minutes, a timeout will occur in the checkout process. The handling differs based on whether the form is embedded or non-embedded:
upgate.mountPaymentElement("%elementId%", "%checkoutUrl%", {
theme: "LIGHT",
onTimeout: handleTimeOutFn,
});Or call onTimeout method after mount with timeout handler function as a parameter:
upgate.onTimeout("%elementId%", handleTimeOutFn);When timeout handler was called you need to remount payment element.