render zoid in parent, pass payerActionUrl prop

paypal · Dec 4, 2024 · a843e7e · a843e7e
1 parent b768595
commit a843e7e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/three-domain-secure/component.jsx b/src/three-domain-secure/component.jsx
@@ -154,6 +154,8 @@ export class ThreeDomainSecureComponent {
     };
     // $FlowFixMe
     const instance = this.threeDSIframe({
+      payerActionUrl:
+        "https://te-fastlane-3ds.qa.paypal.com/webapps/helios?action=authenticate&token=30S05532XC756423E&go_to=next",
       onSuccess: async (data) => {
         // const { threeDSRefID, authentication_status, liability_shift } = data;
         const { threeDSRefID } = data;

diff --git a/src/three-domain-secure/interface.js b/src/three-domain-secure/interface.js
@@ -5,18 +5,26 @@ import {
   getPayPalAPIDomain,
   getSDKToken,
 } from "@paypal/sdk-client/src";
-
+import { destroy as zoidDestroy, destroyComponents } from "@krakenjs/zoid/src";
 import type { LazyExport } from "../types";
 
 import {
   ThreeDomainSecureComponent,
   type ThreeDomainSecureComponentInterface,
 } from "./component";
 import { GraphQLClient, RestClient } from "./api";
+import { getFastlaneThreeDS } from "./utils";
 
 const BRAINTREE_PROD = "https://payments.braintree-api.com";
 const BRAINTREE_SANDBOX = "https://payments.sandbox.braintree-api.com";
 
+export function setup() {
+  return getFastlaneThreeDS();
+}
+export function destroy(err?: mixed) {
+  zoidDestroy(err);
+}
+
 export const ThreeDomainSecureClient: LazyExport<ThreeDomainSecureComponentInterface> =
   {
     __get__: () => {

diff --git a/src/three-domain-secure/utils.jsx b/src/three-domain-secure/utils.jsx
@@ -28,11 +28,11 @@ export type TDSProps = {|
 
 export type TDSComponent = ZoidComponent<TDSProps>;
 
-export function getFastlaneThreeDS(payerActionUrl: string): TDSComponent {
+export function getFastlaneThreeDS(): TDSComponent {
   return inlineMemoize(getFastlaneThreeDS, () => {
     const component = create({
       tag: "fastlane-threeds",
-      url: payerActionUrl,
+      url: ({ props }) => props.payerActionUrl,
 
       attributes: {
         iframe: {
@@ -67,6 +67,9 @@ export function getFastlaneThreeDS(payerActionUrl: string): TDSComponent {
       // $FlowIssue
       allowedParentDomains: /^https?:\/\/[a-zA-Z0-9.-]+(:[0-9]+)?(\/.*)?$/, // eslint-disable-line security/detect-unsafe-regex
       props: {
+        payerActionUrl: {
+          type: "string",
+        },
         clientID: {
           type: "string",
           value: getClientID,