Magento2 – How to Add Saved Credit Cards in a Dropdown in Custom Payment

magento2

I have an online payment module where a user will be redirected to merchant page and by entering credit card details, the order will be created.I am saving those credit card details in db.

And I need to show those saved cards as a dropdown on a checkout page.

So For that I have created a new custom offline payment module where I need to show those details in dropdown and on selecting particular credit card, those details need to attach to payment object and order being placed

Can you please guide on how to achieve it in magento2 as the payment code is rendering from HTML pages

Best Answer

Please follow this question so you can get idea how to pass data payment form , this is basic version you need to add your data so you can get card drop down there same way. create configprovider.php and di.xml.

I have posted basic code which you can modified as per your requirement. create SampleConfigProvider.php under File

Namespace/Modulename/Model/SampleConfigProvider.php

<?php

 namespace Namespace\Modulename\Model;

 use Magento\Checkout\Model\ConfigProviderInterface;

 /**
  * Class SampleConfigProvider
 */
 class SampleConfigProvider implements ConfigProviderInterface
 {

  public function getStoredCards(){
    $result = array();
    $result['0'] = "Test";
    $result['1'] = "Test1";
    return $result;
  }

  public function getConfig()
  {

  $config = array_merge_recursive($config, [
     'payment' => [
        \Namespace\Modulename\Model\Payment::CODE => [
            'storedCards' => $this->getStoredCards(),
        ],
    ],
  ]);
  return $config;
 }
}

add below method in test-method.js add method :

getStoreCard: function() {
        return  window.checkoutConfig.payment.checkmo.storedCards;
    },

    getCardList: function() {
        return _.map(this.getStoreCard(), function(value, key) {
            return {
                'value': key,
                'type': value
            }
        });
    },

add in your_html.html file (Namespace\Modulename\view\frontend\web\template\payment) :

<select name="payment[subscription_id]" class="select input-text required-entry" 
                            data-bind="
                                attr: {id: getCode()+'_payment_profile_id'},
                                options: getCardList(),
                                optionsValue: 'value',
                                optionsText: 'type',
                                optionsCaption: $t('--Please Select--'),
                                ">
                </select>
Related Topic