如何将 PayPal 按钮集成到 Extjs 环境中？

Question

虽然有很多关于 Paypal 支付集成的教程，但没有一个涉及 EXTJS 框架。在 index.html 页面中集成 PayPal 按钮非常简单：

<!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&currency=USD"></script>

    <script>
        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({
            style: {
                layout: 'horizontal'
            }
        }).render('#paypal-button-container');
    </script>
</body>

</html>

但是，如何将它包含在 EXTJS 中？我不明白如何将 extjs MVC 或 MVVM 架构与纯 javascipt 和 html 代码混合使用。

Answer 1

Ext.js 有一个 index.html 文件。您可以在此处添加加载 PayPal 的脚本标签。 IE。您需要将这些行添加到您的 index.html

 <!-- Include the PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

然后创建某种容器（例如 Ext.Panel）将标示符 div 设置为 html 属性的值，然后您可以使用 paypal 代码渲染成这个 div。例如

     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(),
            })
        }
    });

可以找到工作示例here

Answer 2

将 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()});
    }

});

如何将 PayPal 按钮集成到 Extjs 环境中？

How to integrate PayPal button into Extjs environment?

javascript

html

extjs