Skip to main content
Before following these steps, please configure your payment methods. Use this guide to integrate Vaultera Switch SDK to your React app. You can use the “Try out” in our dashboard as a reference with your Vaultera Switch credentials to test the setup.

​
1. Setup the Server

​
1.1 Follow the Server Setup Section

Follow the Server Setup section for backend configuration.

​
2. Build Checkout Page on the Client

​
2.1 Install the switch-js and react-switch-js Libraries

Install the packages and import them into your code: 
npm install @vaultera-tech/switch-js
npm install @vaultera-tech/react-switch-js

​
2.2 Add Vaultera Switch to Your React App

Use switch-js to ensure that you stay PCI compliant by sending payment details directly to the Vaultera Switch server: 
import React, { useState, useEffect } from "react";
import { loadSwitch } from "@vaultera-co/react-js";
import { SwitchElements } from "@vaultera-co/react-switch-js";

​
2.3 Load switch-js

Call loadSwitch with your publishable API keys to configure the library. To get a publishable key, please find it here: For the backend url you can use https://api.switch.vaultera.co for test environment 
const switchPromise = loadSwitch("YOUR_PUBLISHABLE_KEY", {
  customBackendUrl: "YOUR_BACKEND_URL",
});

​
2.4 Fetch the Payment and Initialize SwitchElements

Immediately make a request to the endpoint on your server to create a new Payment as soon as your checkout page loads. The clientSecret returned by your endpoint is used to complete the payment: 
useEffect(() => {
  // Create PaymentIntent as soon as the page loads
  fetch("/create-payment-intent", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
  })
    .then((res) => res.json())
    .then((data) => setClientSecret(data.clientSecret));
}, []);

​
2.5 Initialize SwitchElements

Pass the promise from loadSwitch to the SwitchElements component. This allows the child components to access the Switch service via the SwitchElements parent component. Additionally, pass the client secret as options to the SwitchElement component: 
<div
  style={{
    width: "480px",
  }}
  >
  <h2>Vaultera Switch Unified Checkout</h2>
  {clientSecret && switchPromise && (
    <SwitchElements switch_promise={switchPromise} options={{ clientSecret }}>
      <CheckoutForm />
    </SwitchElements>
  )}
</div>

​
2.6 Setup the State (Optional)

Initialize a state to keep track of payment, display errors, and control the user interface: 
const [message, setMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);

​
2.7 Store a Reference to Switch

Access the switch-js library in your CheckoutForm component by using the useSwitch() and useElements() hooks. 
const vaultera_switch = useSwitch();
const elements = useElements();

​
3. Add the unified checkout

Add the UnifiedCheckout to your Checkout. This embeds an iframe with a dynamic form that displays configured payment method types available for the Payment, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. (Optional) Define paymentElementOptions: 
var unifiedCheckoutOptions = {
  wallets: {
    walletReturnUrl: "https://example.com/complete",
    //Mandatory parameter for Wallet Flows such as Googlepay, Paypal and Applepay
  },
};

<form id="payment-form" onSubmit={handleSubmit}>
  <PaymentElement id="payment-element" />
  <button disabled={isProcessing || !vaultera_switch || !elements} id="submit">
    <span id="button-text">
      {isProcessing ? "Processing ... " : "Pay now"}
    </span>
  </button>
  {/* Show any error or success messages */}
  {message && <div id="payment-message">{message}</div>}
</form>

​
3.1 Complete the payment and handle errors

Call confirmPayment(), passing along the UnifiedCheckout and a return_url to indicate where Switch should redirect the user after they complete the payment. For payments that require additional authentication, Vaultera Switch sdk redirects the customer to an authentication page depending on the payment method. After the customer completes the authentication process, they’re redirected to the return_url. If there are any immediate errors (for example, some fields are missing), switch-js returns an error. Show that error message to your customer so they can try again. 
const handleSubmit = async (e) => {
e.preventDefault();

if (!vaultera_switch || !elements) {
  return;
}

setIsProcessing(true);

const { error, status } = await vaultera_switch.confirmPayment({
  elements,
  confirmParams: {
    // Make sure to change this to your payment completion page
    return_url: "https://example.com/complete",
  },
  redirect: "always",
});

if (error) {
  if (error.type === "card_error" || error.type === "validation_error") {
    setMessage(error.message);
  } else {
    if (error.message) {
      setMessage(error.message);
    } else {
      setMessage("An unexpected error occurred.");
    }
  }
}
if (status) {
  handlePaymentStatus(status);
}
setIsLoading(false);