I finally figured this out myself, so I thought I'd share the solution in case anyone else is looking for the same thing.
Use require.js to include your javascript by defining paths in view/frontend/requirejs-config.js like this:
var config = {
paths: {
"my_external_file": "https://sample.test.com/my_file",
"my_local_file": "./Company_ModuleName/js/view/myfolder/myjsfile"
}
};
Then include the javascript in the define section of your method renderer file at view/frontend/web/js/payment/method-renderer/ like so:
define(
[
'require',
'jquery',
'my_external_file',
'my_local_file'
],
function (require, $, myExternalThing, myLocalThing) {
'use strict';
return Component.extend({
...
In your javascript file you can have a look at the window.checkoutConfig object. To get your config values into this object you need a config provider. Add the config provider to etc/frontend/di.xml like this:
<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="my_config_provider" xsi:type="object">CompanyName\ModuleName\Model\MyConfigProvider</item>
</argument>
</arguments>
</type>
Make the config provider php file in your Model folder like so:
<?php
namespace CompanyName\ModuleName\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
use \Magento\Framework\App\Config\ScopeConfigInterface as ScopeConfig;
class MyConfigProvider implements ConfigProviderInterface
{
/**
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $scopeConfig;
/**
* first config value config path
*/
const FIRST_CONFIG_VALUE = 'payment/mymodulename/first_config_value';
/**
* second config value config path
*/
const SECOND_CONFIG_VALUE = 'payment/mymodulename/second_config_value';
/**
* @param ScopeConfig $scopeConfig
*/
public function __construct(
ScopeConfig $scopeConfig
) {
$this->scopeConfig = $scopeConfig;
}
/**
* {@inheritdoc}
*/
public function getConfig()
{
$storeScope = \Magento\Store\Model\ScopeInterface::SCOPE_STORE;
$config = [
'payment' => [
'mymodulename' => [
'first_config_value' => $this->scopeConfig->getValue(self::FIRST_CONFIG_VALUE, $storeScope),
'second_config_value' => $this->scopeConfig->getValue(self::SECOND_CONFIG_VALUE, $storeScope)
]
]
];
return $config;
}
}
This is the process that worked for me.
