如何将 PayPal 按钮集成到 Extjs 环境中？
[英]How to integrate PayPal button into Extjs environment?
问题描述
While there is a number of tutorials on Paypal Payment Integration, there is no one dealing wit EXTJS framework.
虽然有许多关于 Paypal 支付集成的教程，但没有人处理 EXTJS 框架。 Integration of PayPal button is pretty straightforward in index.html page: PayPal 按钮的集成在 index.html 页面中非常简单：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add meta tags for mobile and IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> PayPal Smart Payment Buttons Integration | Horizontal Buttons </title>
</head>
<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=USD"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
layout: 'horizontal'
}
}).render('#paypal-button-container');
</script>
</body>
</html>
But, how to include it in EXTJS?但是，如何将它包含在 EXTJS 中？ I do not understand how to mix extjs MVC or MVVM architecture with plain javascipt and html code.我不明白如何将 extjs MVC 或 MVVM 架构与普通的 javascipt 和 html 代码混合使用。
2 个解决方案
解决方案1
0 2021-02-25 18:20:14
Ext.js has an index.html file. Ext.js 有一个 index.html 文件。 You can add the script tag loading the PayPal there.您可以在此处添加加载 PayPal 的脚本标签。 Ie you need to add these lines to your index.html即您需要将这些行添加到您的 index.html
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=USD"></script>
Then create some sort of container (eg an Ext.Panel) set the placholder div as the value of the html property then you can use the paypal code to render into this div.然后创建某种容器（例如 Ext.Panel），将占位符 div 设置为 html 属性的值，然后您可以使用 paypal 代码渲染到此 div 中。 Eg例如
Ext.define('Paypal', {
extend: 'Ext.container.Container',
html: '<div id="paypal-button-container"></div>',
onRender() {
this.callParent();
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
layout: 'horizontal'
}
}).render('#paypal-button-container');
}
});
Ext.application({
name: 'Paypal',
launch: function () {
Ext.create('Paypal', {
layout: {
type: 'vbox',
align: 'stretch'
},
width: 300,
height: 200,
renderTo: Ext.getBody(),
})
}
});
解决方案2
0 已采纳 2021-02-25 18:49:55
Include the html part in a container and put the buttons code in the after render event将 html 部件包含在容器中，并将按钮代码放在渲染后事件中
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
title: 'Main Panel',
height:400,
items: [
{
xtype: 'container',
width: 200,
border: true,
height: 400,
html:'<div id="paypal-button-container"></div>',
listeners:{
afterrender: function (){
paypal.Buttons({
}).render('#paypal-button-container');
}
}
},
],
});
Ext.application({
views: [
'MyPanel'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyPanel', {renderTo: Ext.getBody()});
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.