Skip to main content

​
1. Initialize the Vaultera Switch SDK

Initialize Vaultera Switch Headless SDK onto your app with your publishable key. To get a Publishable Key please find it here. 
// Source Switchloader on your HTML file using the <script /> tag
switch = Switch.init("YOUR_PUBLISHABLE_KEY",{
    customBackendUrl: "YOUR_BACKEND_URL",
    //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
});

​
2. Create a Payment Intent

Make a request to the endpoint on your server to create a new Payment. The clientSecret returned by your endpoint is used to initialize the payment session.
Important: Make sure to never share your API key with your client application as this could potentially compromise your security

​
3. Initialize your Payment Session

Initialize a Payment Session by passing the clientSecret to the initPaymentSession 
paymentSession = switch.initPaymentSession({
  clientSecret: client_secret,
});
options (Required)Description
clientSecret (string)Required. Required to use as the identifier of the payment.

​
4. Craft a customized payments experience

Using the paymentSession object, the default customer payment method data can be fetched, using which you can craft your own payments experience. The paymentSession object also exposes a confirmWithCustomerDefaultPaymentMethod function, using which you can confirm and handle the payment session. 
paymentMethodSession = await paymentSession.getCustomerSavedPaymentMethods();

if (paymentMethodSession.error) {
    // handle the case where no default customer payment method is not present
} else {
    // use the customer_default_saved_payment_method_data to fulfill your usecases (render UI)
    const customer_default_saved_payment_method_data =
        paymentMethodSession.getCustomerDefaultSavedPaymentMethodData();
}

//handle press for pay button 
function handlePress() { 
    if (paymentMethodSession.error) {
        // handle the case where no default customer payment method is not present
    } else {
        // use the confirmWithCustomerDefaultPaymentMethod function to confirm and handle the payment session response
        const { error, status } = await
        paymentMethodSession.
            confirmWithCustomerDefaultPaymentMethod({
                confirmParams: {
                    // Make sure to change this to your payment completion page
                    return_url: "https://example.com/complete"
                },
                // if you wish to redirect always, otherwise it is defaulted to "if_required"
                redirect: "always",
            });

        // use error, status to complete the payment journey
        if (error) {
            if (error.message) {
                // handle error messages
                setMessage(error.message);
            } else {
                setMessage("An unexpected error occurred.");
            }
        }
        if (status) {
            // handle payment status
            handlePaymentStatus(status);
        }
    }
}
Payload for confirmWithCustomerDefaultPaymentMethod(payload)
options (Required)Description
confirmParams (object)Parameters that will be passed on to the Switch API.
redirect (string)(web only) Can be either ‘always’ or ‘if_required’
By default, confirmWithCustomerDefaultPaymentMethod() will always redirect to your return_url after a successful confirmation. If you set redirect: “if_required”, then this method will only redirect if your user chooses a redirection-based payment method.
ConfirmParams object
confirmParamsDescription
return_url (string)(web only) The url your customer will be directed to after they complete payment.