#nikolayfursov-3ds

1 messages · Page 1 of 1 (latest)

paper wagon
#

hi there, i'm still pretty confused over how you're implementing iframes for your application. Can you share your code snippets for how you're collecting the payment method details and confirming the payment and creating / updating the iframe?

pulsar storm
#

I'll try but it will take more time

#

I decided that our flow description would be also useful:

  1. if we get url like this "url": "https://hooks.stripe.com/3d_secure_2/hosted?merchant=acct..." We tried to open hidden iframe.
  2. and our client tried to submit form with this url
  3. then we tried to get info about payment_intent one more time and if we get url like this https://hooks.stripe.com/redirect/authenticate/src
  4. our client openы standard 3ds iframe

And i'll send our client's code snippets in next message

# 
  name: string;
  id: string;
}

const createIframe = ({ name, id }: CreateIframeParams) => {
  const root = document.body;
  const iframe = document.createElement('iframe');

  iframe.name = name;
  iframe.setAttribute('id', id);
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('border', '0');
  iframe.setAttribute('style', 'overflow:hidden; position:absolute');

  root.appendChild(iframe);

  return iframe;
};

interface Create3DSFormParams {
  formName: string;
  formAction: string;
  formTarget: string;
  inputName: string;
  inputValue: string;
}

const create3DSForm = ({
  formName,
  formAction,
  formTarget,
  inputName,
  inputValue,
}: Create3DSFormParams) => {
  const form = document.createElement('form');
  const input = document.createElement('input');
  form.name = formName;
  form.action = formAction;
  form.method = 'POST';
  form.target = formTarget;
  input.name = inputName;
  input.value = inputValue;

  form.appendChild(input);

  return form;
};

interface StartThreeDSV2FxParams {
  url: string;
  data: string;
}

const startThreeDSV2Fx = createEffect(
  ({ url, data }: StartThreeDSV2FxParams) => {
    const iframe = createIframe({
      name: THREE_DS_V2_IFRAME_NAME,
      id: THREE_DS_V2_IFRAME_NAME,
    });
    const form = create3DSForm({
      formName: THREE_DS_V2_FORM_NAME,
      formAction: url,
      formTarget: THREE_DS_V2_IFRAME_NAME,
      inputName: THREE_DS_V2_INPUT_NAME,
      inputValue: data,
    });

    const html = document.createElement('html');
    const body = document.createElement('body');
    body.appendChild(form);
    html.appendChild(body);
    iframe.style.display = 'none';

    if (iframe.contentDocument) {
      iframe.contentDocument.open();
      iframe.contentDocument.appendChild(html);
      iframe.contentDocument.close();
      form.submit();
    } else {
      throw new Error('3DSV2 iframe has not contentDocument property');
    }
  },
);
paper wagon
#

how are you collecting the payment method details? Are you using the Payment Element?

pulsar storm
#

nope, we are using our custom form

paper wagon
#

so you're not using stripe.js at all to collect payment details?

pulsar storm
#

yes

#

at this stage we are using only stripe backend API

paper wagon
#

just so you're aware, overall we don't suggest this approach at all because by passing raw credit card details from a backend server you have stringent PCI requirements imposed — see https://stripe.com/docs/security/guide#validating-pci-compliance under "API Direct" as this is what your integration would be classified as. In your case this means you’d have to submit a SAQ D form annually to prove that you are PCI compliant. It’s a 40 page form and not a headache most users want to be dealing with.

pulsar storm
#

wow, thank you for this information, I'll send it to my colleagues

paper wagon
#

if you want to continue passing raw card details, and assuming you're already PCI compliant. i would assume the usual way to go about implementing this is :

  1. the form's POST action would make an API call to your own server with the card details.
  2. after processing, your server would return the redirect url to your frontend
  3. upon receipt of the redirect url, your frontend would then create the iframe or update the iframe
#

in the original code you shared in the support ticket, from what i can tell, you're trying to make a POST request to the redirect url using a form. This wouldn't work.

pulsar storm
#

Should we use GET?

paper wagon
#

honestly, you should just use Stripe's Payment Element, and it will handle all of the 3ds stuff for you automatically

pulsar storm
#

I'll have a conversation with my colleagues

paper wagon
#

why don't you clarify with your colleague first? It'd save you the trouble of working on it and then being told that they want to switch later

pulsar storm