Drop in implementation

[mkcpb]

Hello,

I have started implementing Drop in component in my iOS app. I did first three steps following documentation. As you can se on screenshot what I have got. When I click on credit/debit card, spinner starts and it calls didSubmit(_ data: Adyen.PaymentComponentData, from component: Adyen.PaymentComponent, in dropInComponent: Adyen.AnyDropInComponent) delegate method. My question is how can I open the page where I can fill in data of card? What I did so far:

        var dropInComponentStyle = DropInComponent.Style()
        dropInComponentStyle.formComponent.mainButtonItem.button.backgroundColor = .black
        dropInComponentStyle.formComponent.textField.separatorColor = .black
        dropInComponentStyle.formComponent.textField.tintColor = .black
        
        let configuration = DropInComponent.Configuration(
            style: dropInComponentStyle,
            allowsSkippingPaymentList: true,
            allowPreselectedPaymentView: true
        )

        configuration.card.showsStorePaymentMethodField = true
        configuration.paymentMethodsList.allowDisablingStoredPaymentMethods = true
        
        let apiContext = try! APIContext(environment: Environment.test, clientKey: "test_######")
        
        let adyenAmount = Adyen.Amount(value: 0, currencyCode: "USD")
        let adyenPayment = Adyen.Payment(amount: adyenAmount, countryCode: "NL")
        let adyenContext = AdyenContext(apiContext: apiContext, payment: adyenPayment)
        
        var data = Data()
        var paymentMethods: PaymentMethods?
        
        do {
            
            data = try JSONSerialization.data(withJSONObject: paymentMethod.toJSON() as Any, options:[])
            paymentMethods = try JSONDecoder().decode(PaymentMethods.self, from: data)
            
        } catch {
            
            log.debug("Error during parsing: \(error.localizedDescription)")
        }
        
        let component = DropInComponent(paymentMethods: paymentMethods!,
                                        context: adyenContext,
                                        configuration: configuration,
                                        title: "Test title")
        
        component.delegate = self
        
        self.dropInComponent = component
        present(dropInComponent?.viewController ?? UIViewController(), animated: true)

[descorp]

Hey @mkcpb

spinner starts and it calls didSubmit

For scheme it should not call didSubmit, but open CardComponent UI.

How you paymentMethods JSON looks like ?

[mkcpb]

Hi @descorp,

Yes, I also wondered why it was calling didSubmit. paymentMethods JSON looks like:

{
  paymentMethods: [
    {
      details: ['visa', 'mc', 'amex', 'maestro'],
      name: 'Credit / Debit Card',
      type: 'scheme',
    },
  ],
}

[descorp]

Small thing:

Use brands instead of details.

[mkcpb]

Hi @descorp,
I have managed to fix this. I have one question. Is it possible to remove pay button of Card Component? I was thinking of inserting a drop in component inside the view and using an already existing button in my app.

[descorp]

Your paymentMethods json looks fine.
What was the issue?

[descorp]

Is it possible to remove pay button of Card Component?

No. But this improvement in our backlog.

[mkcpb]

Your paymentMethods json looks fine. What was the issue?

The thing is that our backend wasn't working so I hardcoded values and made typo. Instead of scheme I wrote sheme. And I sent to you correct json.

[mkcpb]

Is it possible to remove pay button of Card Component?

No. But this improvement in our backlog.
Sorry for asking but are you going to implement it anytime soon?

[descorp]

No timeline so far... we have had this ticket for quite some time now. My best guess is v6 - so 2024.

Could you describe your use case? We can revisit and prioritise this ticket.

[mkcpb]

We have web, android and ios app. For the web they implemented drop in with advanced flow. Our application is about restaurant booking so on Checkout screen we had table view and one of the table view cells is on this screenshot. Last cell is Book now button. So we want to somehow embed drop in component inside table view and on book now button have same functionality as drop in pay button. Is it possible? Any suggestions?

[descorp]

Hey @mkcpb

You can use your custom UI with Client-Side Encryption and API Only integration.

try CardEncryptor.encrypt(card: card, with: cardPublicKey)

OR

You can do following:

1. Customize button title by override adyen.submitButton.formatted key on Localizable.string
2. Embed cardComponent.viewController into your own viewController