how to do securefields in sdk 3.1

cullsin commented 5 years ago

Hi,

I am migrating adyen from 1.3 to 3.1 sdk. I would like to get a secure fields as you have written for v1.0 and v2.0 .

I am getting an error "Error: The passed payment method is not a valid Checkout Component"

Can you please suggest me the appropriate definitation for securefields

window.checkout = new window.AdyenCheckout(config) return window.checkout.create('securefields', {});

Sample configuration file export const CheckoutConfig = (props, originKey, environment) => ({ form: { adyenConfig: { configObject: { originKey }, context: environment, rootNode: '.form-div', paymentMethods: { card: { sfStyles: '', placeholders: { encryptedCardNumber: '1111 4444 3333 2222', encryptedExpiryDate: '1002, encryptedSecurityCode: '999' } } } }, cvvInstructions: { text: 'cvv', button: 'button' }, cardNumber: { errors: { unreal: 'real', invalid: 'invalid' }, items: { component: 'input', name: 'cardnumber', placeholder: '+91900', type: 'tel', normalize: 'cardNumber' } }, cardMonth: { label: 'month', name: 'month', placeholder: 'mmyy', errors: { month: 'error month' } }, cardYear: { label: 'year', name: 'year', placeholder: '0909', errors: { year: 'YYYY' } }, cardExpiry: { label: 'MMYY', placeholder: 'MMYY', items: [ { text: 'mmyy' } ] }, cardCvv: { label: 'cvv', placeholder: '000', name: 'cvv', errors: { number: 'invalid number', digits: 'invalid digit' }, items: { component: 'input', name: 'cvv', type: 'tel', maxLength: '3', normalize: 'cardCvv' } } } });

pabloai commented 5 years ago

Hi @cullsin

I think you just need to replace securefields with securedfields, as in fields that are secured. Let me know if there's any other issue.

Best,

Pablo

cullsin commented 5 years ago

Thanks. I have configured this in the react Js. unfortunately .mount is not mounting the element. Is there anything needs to be done on implement inside React ?

     componentDidMount() {
      const originKey = getOriginKey(this.props.subscriptionInfo);
      const checkout = new window.AdyenCheckout({
        locale: 'en-US',
        originKey,
        loadingContext: 'https://checkoutshopper-test.adyen.com/checkoutshopper/',
        onChange: function() {},
        onError: console.error
      });

    window.securedFields = checkout
      .create('securedfields', {
      type: 'card',
      groupTypes: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
      allowedDOMAccess: false,
      autoFocus: true,
      onFieldValid,
      onConfigSuccess,
      onAllValid,
      onError
    })
    .mount('.secured-fields');

    const onConfigSuccess = (cbObj) => {
      document.querySelector('.secured-fields').style.display = 'block';
      document.querySelector('.card-input__spinner__holder').style.display = 'none';
    };
}

sanntanna commented 5 years ago

I'm also having trouble implementing this version of the SDK, the securedFields requests are giving 500 error.

The only version of the SDK that is working is 2.3.0. But it doesn't work the custom fields.

How can I implement in React ?

Adyen / adyen-secured-fields-sample-code

how to do securefields in sdk 3.1 #6