1

if I use storedCardPayment object in my card.create and want to pay or click pay I get this error clientside in my console log

IMPLEMENTATION_ERROR: Could not submit the payment

server.js

  const client = new Client({apiKey: "xxx", environment: "TEST"}); 
  const checkout = new CheckoutAPI(client);

  const orderRef = uuidv4();

  const paymentMethods = await checkout.paymentMethods({
    countryCode: 'DE',
    amount: { currency: 'EUR', value: 10000 },
    merchantAccount: 'xxx',
    shopperReference: 'AHHH',
  })

  return json({paymentMethods});

React

export const cf = {
  storePaymentMethod: true,
  paymentMethodsConfiguration: {
    ideal: {
      showImage: true,
    },
    storedCard: {
      hideCVC: true,
      showInstallmentAmounts: true,
      styles: {
        height: 100,
        width: 200,
        backgroundColor: 'red'
      }
    },
    card: {
      hasHolderName: true,
      holderNameRequired: true,
      name: "Credit or debit card",
      amount: {
        value: 10000, // 100€ in minor units
        currency: "EUR",
      },
    },
  },
  enableStoreDetails: true,
  locale: "de_DE",
  showPayButton: true,
  clientKey: 'xxx',
  environment: "test",
}
...
  useEffect(() => {
    if(fetcher.data && paymentData.session === null) {
      setPaymentData(fetcher.data);

      console.log('HIEE');

      const createCheckout = async () => {
        const checkout = await AdyenCheckout({
          ...cf,
          paymentMethodsResponse: fetcher.data.paymentMethods,
          onPaymentCompleted: (response: any, _component: any) =>
            console.log(response),
          onError: (error: any, _component: any) => {
            console.error(error);
          },
        });

        const storedPaymentMethod = checkout.paymentMethodsResponse.storedPaymentMethods[0];

        const card = checkout.create("card", storedPaymentMethod).mount(paymentContainer.current);
        
      };

      createCheckout();
    }
  }, [fetcher]);
  
  return (
    <div className="payment-container">
      <div ref={paymentContainer} className="payment"></div>

      <div ref={paymentContainer} id="stored-card">

      </div>
    </div>
  )

Can anyone help me why I got this error ?

if I remove "storedPaymentMethod" at card.create then I can pay but I want to pay with a stored payment method.

I hope anyone can help me

Beppe C
  • 11,256
  • 2
  • 19
  • 41
stackcall01
  • 99
  • 5
  • I can't comment on the code, but I can tell you that credit card numbers follow certain rules, and the card number in your question is not valid. See https://www.validcreditcardnumber.com/ – Tangentially Perpendicular May 06 '23 at 00:41
  • @TangentiallyPerpendicular that is a placeholder automatically from the adyen response the field is empty its only a placeholder – stackcall01 May 06 '23 at 01:30
  • Is using the `/sessions` approach a viable solution in your case? This is a lot simpler as the `drop-in` takes care of showing and using the stored cards. https://docs.adyen.com/payment-methods/cards/web-drop-in?tab=store-card-details-sessions_1#stored-card-payments – Beppe C May 12 '23 at 09:18

0 Answers0