PaySwitcher
  • About PaySwitcher
    • 🛒For Online Businesses
    • 🪜For Small & Medium Enterprises
    • 🏢For Enterprises
    • 🖥️For SaaS Providers
    • 🛍️For E-Commerce Businesses
    • 📦For Marketplace/Platforms
    • 🏦For Banks & Financial Institutions
  • PaySwitcher Cloud
    • ⚡Quickstart
      • 📥Migrate from Stripe
        • Web
        • Android
        • iOS
        • React Native
      • 🥗Payment Recipes
        • Use PayPal With Stripe
    • ⚙️Control Centre Account setup
    • 📦Integration guide
      • 🌐Web
        • Node And React
        • Customization
        • Error Codes
        • Node and HTML
        • Vanilla JS and REST API Integration
      • 📱Android
        • Kotlin with Node Backend
        • Customization
        • Features
      • 📱iOS
        • Swift with Node Backend
        • Customization
        • Features
      • ⏺️React Native
        • React Native with Node Backend (Beta)
        • Card Widget (Beta)
        • Customization
      • ⏺️Flutter
        • Flutter with Node Backend
        • Customization
      • Headless SDK
      • Payment Methods Management
    • 💳Payment methods setup
      • 💳Cards
      • 📱Wallets
        • Apple Pay
          • Web Domain
          • iOS Application
        • Google Pay
        • PayPal
      • 📆Pay Later
      • 🏦Banks
        • Bank Debits
        • Bank Redirects
        • Bank Transfers
      • 🪙Crypto
      • 🔑Test Credentials
    • 🔌Connectors
      • 🖲️Available Connectors
        • ACI
        • Adyen
        • Airwallex
        • Authorizedotnet
        • Bambora
        • Bank of America
        • Billwerk
        • Bluesnap
        • Braintree
        • Checkout
        • Coinbase
        • Cybersource
          • Apple Pay
          • Google Pay
        • dLocal
        • Fiserv
        • GlobalPayments
        • GoCardless
        • Klarna
        • Mollie
        • MultiSafepay
        • Nuvei
        • OpenNode
        • Paypal
        • PayU
        • Prophetpay
        • Rapyd
        • Shift4
        • Stripe
        • TrustPay
        • Volt
        • Worldline
        • Worldpay
        • Zen
      • Activate connector on PaySwitcher
      • Test a Payment with connector
    • 🪝Webhooks
  • Features
    • 🔀Payment flows
      • 🔁Saving payment methods & recurring payments
      • 💵Payouts
        • ➕Get started with payouts!
        • 🔗Process payouts using saved payment methods
        • 🛣️Route your payout transactions using Smart Router
        • ♻️Smart Retries in Payout
        • 🔗Payout links
      • 0️ 0️ 0️ Zero Amount Authorization
      • 🔓Tokenization & saved cards
      • 🔗Payment links
      • ⏭️External Authentication for 3DS
      • 💰Manual Capture
      • 🛑Fraud Blocklist
      • 🔁Subscriptions
      • 🔃PG Agnostic Recurring Payments
    • 🕹️Merchant controls
      • 🛣️Smart Router
        • Rule Based Routing
        • Volume Based Routing
        • Default Fallback Routing
      • 🛡️Fraud & risk management
      • 🔃Smart retries
      • 🎛️Analytics & operations
      • 📋3DS decision manager
        • Setup guide
      • 📋Surcharge
        • Surcharge Setup guide
      • 🔼3DS Step-up retries
      • 🚩Disputes/Chargebacks Management
      • 🤝Reconciliation
        • Getting Started with Recon
    • 🔑Account management
      • 🔢Exporting payments data
      • 🤹Multiple accounts & profiles
      • 🛂Manage your team
    • 🛍️E-commerce platform plugins
      • WooCommerce Plugin
        • Setup
        • Compatibility
        • FAQs
  • SECURITY AND COMPLIANCE
    • 🔏Overview
    • 💳PCI Compliance
    • 🔐Data Security
    • 💽GDPR compliance
    • 🕵️Identity and Access Management
  • Learn more
    • 🍡SDK Reference
      • Node
      • React
      • JS
    • 📐PaySwitcher Architecture
      • Router
      • Storage
      • A Payments Switch with virtually zero overhead
    • 🌊Payment flows
Powered by GitBook
On this page
  • 1. Setup the server
  • 2. Build Payment Management Page on the client
  1. PaySwitcher Cloud
  2. Integration guide

Payment Methods Management

PaySwitcher is designed to facilitate the management of saved payment methods

PreviousHeadless SDKNextPayment methods setup

Last updated 11 months ago

This section guides you through the integration of PaySwitcher Payment Methods Management

1. Setup the server

1.1 Create an ephemeral key

Get your API key from .

Add an endpoint on your server that creates an Ephemeral Key. An ephemeral key is a temporary, short-lived key used to securely manage sensitive operations, such as updating or deleting payment methods, without exposing full access credentials. It has a limited validity period and restricted capabilities, ensuring that it can only be used for specific tasks and not for initiating payments. This enhances security by minimizing the risk of unauthorized access and reducing the exposure of sensitive data. Return the secret obtained in the response to setup Payment Methods Management on client.

// Create an Ephemeral Key
const app = express();

app.post("/create-ephemeral-key", async (req, res) => {
  try {
    const response = await fetch(`https://sandbox.payswitcher.com/ephemeral_keys`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json", "api-key": "YOUR_API_KEY" },
        body: JSON.stringify(req.body),
      });
    const ephemeralKey = await response.json()
    // Send publishable key and PaymentIntent details to client
    res.send({
      ephemeralKey: ephemeralKey.secret,
    });
  } catch (err) {
    return res.status(400).send({
      error: {
        message: err.message,
      },
    });
  }
});

2. Build Payment Management Page on the client

2.1 Install the hyper-js and react-hyper-js libraries

Install the packages and import it into your code

$ npm install @payswitcher/hyper-js
$ npm install @payswitcher/react-hyper-js

2.2 Add hyper to your React app

import React, { useState, useEffect } from "react";
import { loadHyper } from "@payswitcher/hyper-js";
import { HyperManagementElements } from "@payswitcher/react-hyper-js";

2.3 Load hyper-js

const hyperPromise = loadHyper("YOUR_PUBLISHABLE_KEY");

2.4 Fetch the Payment

Make a request to the endpoint on your server to create a new Ephemeral Key. The ephemeralKey returned by your endpoint is used to fetch all the customer saved payment methods.

useEffect(() => {
  // Create PaymentIntent as soon as the page loads
  fetch("/create-ephemeral-key", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({customer_id: "payswitcher_sdk_demo_id"}),
  })
    .then((res) => res.json())
    .then((data) => setEphemeralKey(data.ephemeralKey));
}, []);

2.5 Initialise HyperManagementElements

<div className="App">
  {ephemeralKey && (
    <HyperManagementElements options={options} hyper={hyperPromise}>
      <PaymentMethodsManagementForm />
    </HyperManagementElements>
  )}
</div>

2.6 Add the Payment Methods Management Element

Add the PaymentMethodsManagementElement to your Payment Management Form. This embeds an iframe with a dynamic form that displays saved payment methods, allowing your customer to see all their saved payment methods and delete them.

<PaymentMethodsManagementElement id="payment-methods-management-element" />

2.1 Define the Payment Methods Management Form

Add one empty placeholder div to your checkout form for each Widget that you’ll mount.

<form id="payment-methods-management-form">
  <div id="payment-methods-management-element">
   <!--HyperLoader injects the Payment Methods Management-->
  </div>
</form>

2.1 Fetch the Ephemeral Key and mount the Payment Methods Management Element

Make a request to the endpoint on your server to create a new Ephemeral Key. The ephemeralKey returned by your endpoint is used to fetch all the customer saved payment methods.

Important: Make sure to never share your API key with your client application as this could potentially compromise your payment flow

Following this, create a paymentMethodsManagement and mount it to the placeholder div in your payment form. This embeds an iframe with a dynamic form that displays saved payment methods, allowing your customer to see all their saved payment methods and delete them.

// Fetches an ephemeral key and captures the secret
async function initialize() {
  const response = await fetch("/create-ephemeral-key", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({customer_id: "payswitcher_sdk_demo_id"}),
  });
  const { ephemeralKey } = await response.json();
  
  // Initialise Hyperloader.js
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://beta.payswitcher.com/v1/HyperLoader.js";
 
  let hyper; 
  script.onload = () => {
      hyper = window.Hyper("YOUR_PUBLISHABLE_KEY")
      const appearance = {
          theme: "midnight",
      };
      const paymentMethodsManagementElements = hyper.paymentMethodsManagementElements({ appearance, ephemeralKey });
      const paymentMethodsManagement = paymentMethodsManagementElements.create("paymentMethodsManagement");
      paymentMethodsManagement.mount("#payment-methods-management-element");
  };
  document.body.appendChild(script);
}

Congratulations! Now that you have integrated the PaySwitcher Payment Methods Management on your app, you can customize the it to blend with the rest of your app.

Call loadHyper with your publishable API keys to configure the library. To get an publishable Key please find it .

Pass the promise from loadHyper to the HyperManagementElements component. This allows the child components to access the Hyper service via the HyperManagementElements parent component. Additionally, pass the ephemeralKey in to the HyperManagementElements component.

📦
PaySwitcher dashboard
here
options