# AMSPaymentElement

> AMSPaymentElement is the core class of Payment Element, integrated from AMSProductBase, and is the main class used to integrate the Antom Payment Element payment component in iOS applications.

  `AMSPaymentElement`   is the core class of [Payment Element](https://docs.antom.com/ac/cashierpay/element.md?platform=ios), integrated from `AMSProductBase`, and is the main class used to integrate the Antom [Payment Element](https://docs.antom.com/ac/cashierpay/element.md?platform=ios) payment component in iOS applications. Merchants can complete SDK initialization configuration, create payment components, submit payments, reset, and destroy operations through this class.

## Declaration {#dGXrZ}

<!-- TabGroup -->

**Tab: Objective-C**

```objectivec
@interface AMSPaymentElement : AMSProductBase
```

**Tab: Swift**

```swift
public class AMSPaymentElement : AMSProductBase
```

<!-- /TabGroup -->

## Access singleton {#dGXrZ}

<!-- TabGroup -->

**Tab: Objective-C**

```objectivec
@property (class, nonatomic, readonly, strong) AMSPaymentElement *shared;

@end
```

**Tab: Swift**

```swift
public class var shared: AMSPaymentElement { get }
```

<!-- /TabGroup -->

 | **Name** | **Type** | **Description** |
| --- | --- | --- |
| _shared_ | AMSPaymentElement? | `AMSPaymentElement` singleton instance. |

### Instance methods {#eQLk3}

 `AMSPaymentElement`   singleton instance provides the following methods:

 | **Method name** | **Description** |
| --- | --- |
| `[initConfiguration()](https://docs.antom.com/ac/sdks/ios_initConfiguration.md)` | Used to initialize SDK configuration. |
| `[preload()](https://docs.antom.com/ac/sdks/ios_preload.md)` | Used to preload WebApp pages and KYC page resources. |
| `[createComponent()](https://docs.antom.com/ac/sdks/ios_createComponent.md)` | Used to create and display the payment or card binding component UI. This method is mutually exclusive with `[confirmPayment()](https://docs.antom.com/ac/sdks/ios_confirmPayment.md)`. |
| `[confirmPayment()](https://docs.antom.com/ac/sdks/ios_confirmPayment.md)` | Used to confirm payment (UI-less payment scenario). This method is mutually exclusive with `[createComponent()](https://docs.antom.com/ac/sdks/ios_createComponent.md)`. |
| `[reset()](https://docs.antom.com/ac/sdks/ios_reset.md)` | Used to reset the payment or card binding process and clear the current state. |
| `[onDestroy()](https://docs.antom.com/ac/sdks/ios_onDestroy.md)` | Used to destroy the instance and release all associated resources. |

## Property {#lmgUM}

<!-- TabGroup -->

**Tab: Objective-C**

```objectivec
@property (nonatomic, weak, nullable) id<AMSPaymentProtocol> paymentDelegate;
```

**Tab: Swift**

```swift
public weak var paymentDelegate: AMSPaymentProtocol?
```

<!-- /TabGroup -->

 | **Name** | **Type** | **Description** |
| --- | --- | --- |
| _paymentDelegate_ | AMSPaymentProtocol | Payment protocol delegate, refer to `[AMSPaymentProtocol](https://docs.antom.com/ac/sdks/ios_AMSPaymentProtocol.md)`. |

## Usage instructions {#lmgUM}

 - Access the instance through `AMSPaymentElement.shared`.
- Before calling the `[createComponent(_:)](https://docs.antom.com/ac/sdks/ios_createComponent.md)` method, `[initConfiguration(\_:)](https://docs.antom.com/ac/sdks/ios_initConfiguration.md)` must be called first.
- All UI-related methods (`[createComponent()](https://docs.antom.com/ac/sdks/ios_createComponent.md)`, `[reset()](https://docs.antom.com/ac/sdks/ios_reset.md)`, `[onDestroy()](https://docs.antom.com/ac/sdks/ios_onDestroy.md)`) need to be called from the main thread.

## Usage example {#QAhbo}

<!-- TabGroup -->

**Tab: Objective-C**

```objectivec
#import <AMSFoundation/AMSFoundation-Swift.h>
#import <AMSElement/AMSElement-Swift.h>

@interface PaymentViewController () <AMSPaymentProtocol>
@end

@implementation PaymentViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 1. Create configuration
    AMSPaymentElementConfiguration *config = [AMSPaymentElementConfiguration new];
    config.locale = @"en_US";
    config.options = @{
        @"sandbox": @YES,
        @"showLoading": @YES
        };

    // 2. Initialize SDK (with callback)
    [[AMSPaymentElement shared] initConfiguration:config completion:^(AMSStatusResult * _Nonnull result) {
        if (result.status == AMSStatusResultTypeSUCCESS) {
            NSLog(@"Initialization successful");
        } else {
            NSLog(@"Initialization failed: %@", result.error.message);
        }
    }];

    // 3. Set delegate
    [AMSPaymentElement shared].paymentDelegate = self;

    // 4. (Optional) Preload resources
    [[AMSPaymentElement shared] preload];
}

- (void)startPaymentWithSessionData:(NSString *)sessionData {
    // 5. Create payment component (with callback)
    [[AMSPaymentElement shared] createComponent:sessionData completion:^(AMSStatusResult * _Nonnull result) {
        if (result.status == AMSStatusResultTypeSUCCESS) {
            NSLog(@"Component created successfully");
        }
    }];
}

#pragma mark - AMSPaymentProtocol

- (void)onSubmitPayCallback:(AMSStatusResult * _Nullable)eventResult {
    switch (eventResult.status) {
        case AMSStatusResultTypeSUCCESS:
            NSLog(@"Payment successful");
            break;
        case AMSStatusResultTypeFAIL:
            NSLog(@"Payment failed: %@", eventResult.error.message);
            break;
        case AMSStatusResultTypePROCESSING:
            NSLog(@"Payment processing");
            break;
        case AMSStatusResultTypeCANCELLED:
            NSLog(@"Payment cancelled");
            break;
        default:
            break;
    }
}

- (void)onEventCallback:(NSString * _Nonnull)eventCode eventResult:(AMSEventResult * _Nonnull)eventResult {
    NSLog(@"Event callback: %@", eventCode);
}

- (void)dealloc {
    [[AMSPaymentElement shared] onDestroy];
}

@end
```

**Tab: Swift**

```swift
import AMSFoundation
import AMSElement

class PaymentViewController: UIViewController, AMSPaymentProtocol {
  
    override func viewDidLoad() {
        super.viewDidLoad()
  
        // 1. Create configuration
        let config = AMSPaymentElementConfiguration()
        config.locale = "en_US"
        config.options = [
            "sandbox": true,
            "showLoading": true
        ]
  
        // 2. Initialize SDK
        AMSPaymentElement.shared.initConfiguration(config) { result in
            if result.status == .SUCCESS {
                print("Initialization successful")
            } else {
                print("Initialization failed: (result.error?.message ?? "")")
            }
        }
  
        // 3. Set delegate
        AMSPaymentElement.shared.paymentDelegate = self
  
        // 4. (Optional) Preload resources
        AMSPaymentElement.shared.preload()
    }
  
    func startPayment(sessionData: String) {
        // 5. Create payment component
        AMSPaymentElement.shared.createComponent(sessionData) { result in
            if result.status == .SUCCESS {
                print("Component created successfully")
            }
        }
    }
  
    func onSubmitPayCallback(_ eventResult: AMSStatusResult?) {
        guard let result = eventResult else { return }
        switch result.status {
        case .SUCCESS:
            print("Payment successful")
        case .FAIL:
            print("Payment failed: (result.error?.message ?? "")")
        case .PROCESSING:
            print("Payment processing")
        case .CANCELLED:
            print("Payment cancelled")
        default:
            break
        }
    }
  
    func onEventCallback(_ eventCode: String, eventResult: AMSEventResult) {
        print("Event callback: (eventCode)")
    }
  
    // Destroy
    deinit {
        AMSPaymentElement.shared.onDestroy()
    }
}
```

<!-- /TabGroup -->