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 requestnpm install axios expresssuccess_url and failure_url for redirect customer. Create index.js file with code bellow:const express = require("express");
const axios = require("axios");
const PORT = 5000;
const YOUR_DOMAIN = `http://localhost:${PORT}`;
const API_KEY = "X-api-key";
const app = express();
app.use(express.static("public"));
app.post("/checkout", async (req, res) => {
const result = await axios.post(
"https://api.sandbox.upgate.com/v1/checkout",
{
payment_data: {
ui_mode: "EMBEDDED",
type: "SALE",
methods: ["CARD", "GIROPAY", "MBWAY"],
amount: "20.03",
currency_code: "EUR",
},
customer: {
merchant_customer_id: "test",
},
callback: {
success_url: `${YOUR_DOMAIN}/index.html?success=true`,
failure_url: `${YOUR_DOMAIN}/index.html`,
},
products: [
{
type: "SALE",
price: 55,
name: "Test product name for SALE",
description: "Test product description for SALE",
},
],
},
{
headers: {
"X-Api-Key": API_KEY,
"Content-Type": "application/json",
},
}
);
res.json({ url: result.data.session.redirect_url });
});
app.listen(PORT, () => console.log(`Running on port ${YOUR_DOMAIN}`));./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" });