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

  • Storing credit card data in your db is not safe & valid ,
    – Yogesh
    Nov 11 '17 at 5:49
  • @Yogesh : As of now,i am storing those details in db later i will be fetching it from payment gateway
    – S.Venky
    Nov 11 '17 at 6:32
  • Okay , Please post your code so getting more idea about that.
    – Yogesh
    Nov 11 '17 at 6:34
  • @venki Can u please check my Question I tried to follow the Answer for this Question, I couldn't make it. if possible please share your module. May 20 '18 at 7:54
  • @venki Have you able to achive your requirment? Actually I also want that. I have saved card details in db but now I want to use that card details for order place. Jan 31 '20 at 20:09

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 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" 
                                attr: {id: getCode()+'_payment_profile_id'},
                                options: getCardList(),
                                optionsValue: 'value',
                                optionsText: 'type',
                                optionsCaption: $t('--Please Select--'),
  • I followed the above steps and successfully created select field with credit card details dropdown in the checkout page.Can i know how i can attach those details to payment object while placing order
    – S.Venky
    Nov 11 '17 at 12:14
  • ok sure i will create another question
    – S.Venky
    Nov 11 '17 at 12:19
  • Don't forgot to accept it :)
    – Yogesh
    Nov 11 '17 at 12:29
  • Tried to accept it but it showing "Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score."
    – S.Venky
    Nov 11 '17 at 12:31
  • You are not able to upvote , you can accept answer because after 15 reputation you are able to give upvote.
    – Yogesh
    Nov 11 '17 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.