Help me to integrate cybersource payment gateway in React Native (Expo or Using JavaScript)

Abdul07x00 — Thu, 20 Feb 2025 11:14:38 GMT

I have started from below code but couldnt move forward. getting {"response": {"rmsg": "Authentication Failed"}} for below code.

import CryptoJS from "crypto-js";

// Your CyberSource credentials

const merchantId = "unf_myqadv_test";

const keyId = "xxxx-xxxx-4e7b-8883-xxxxxxxx";

const secretKey = "F2HVMyitPsFwfWeoDInoQsEj/XXXXXXXXXXXX=";

const generateSignature = async (method: string, requestBody: string) => {

const date = new Date().toUTCString();

const digest = `SHA-256=${CryptoJS.SHA256(requestBody).toString(CryptoJS.enc.Base64)}`;

// Use the actual endpoint path in the signature string

const signatureString = `(request-target): ${method.toLowerCase()} /pts/v2/capture-contexts\nhost: apitest.cybersource.com\ndate: ${date}\ndigest: ${digest}`;

const signature = CryptoJS.HmacSHA256(signatureString, secretKey).toString(

CryptoJS.enc.Base64

);

const headers = {

"v-c-merchant-id": merchantId,

Date: date,

Host: "apitest.cybersource.com",

Digest: digest,

Signature: `keyid="${keyId}", algorithm="HmacSHA256", headers="(request-target) host date digest", signature="${signature}"`,

"Content-Type": "application/json",

};

return headers;

};

interface PaymentFormData {

email: string;

amount: string;

currency: string;

}

export const retrieveCyberSourceForm = async (data: PaymentFormData) => {

const requestBody = JSON.stringify({

amount: data.amount,

currency: data.currency,

email: data.email,

});

const headers = await generateSignature("POST", requestBody);

try {

const response = await fetch(

"https://apitest.cybersource.com/pts/v2/capture-contexts",

{

method: "POST",

headers: headers,

body: requestBody,

}

);

const jsonResponse = await response.json();

console.log("CyberSource Response:", jsonResponse);

return jsonResponse;

} catch (error) {

console.error("Error retrieving CyberSource form:", error);

throw error;

}

};

topic Help me to integrate cybersource payment gateway in React Native (Expo or Using JavaScript) in Integration and Testing

Help me to integrate cybersource payment gateway in React Native (Expo or Using JavaScript)