import React, { Component } from 'react'; import { withRouter } from 'next/router'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import DefaultLayout from 'ui/layouts/DefaultLayout'; import Breadcrumbs from 'ui/components/Breadcrumbs'; @withTranslation() @inject('appStore') @observer export default withRouter( class Payment extends Component { state = { id: "", fname: "", email: "", code: "", phone: "", } componentDidMount() { } render() { const { t, appStore } = this.props; const { business } = appStore; const { id, fname, email, code, phone } = this.state; const amount = this.props.router.query.amount / 100; const currency = this.props.router.query.currency; const nexRef = this.props.router.query.reference; const nexIdn = this.props.router.query.identifier; const returnUrl = this.props.router.query.returnUrl; let handleForm = (e) => { e.preventDefault(); if ((amount && currency && nexRef && nexIdn && returnUrl) && (id || (fname && email && code && phone))) { // console.log(`Form: ${id} ${fname} ${email} ${phone}`); goSellConfig(amount, currency, nexRef, nexIdn, returnUrl, id, fname, email, code, phone); goSell.openLightBox(); } else { alert("Please make sure everything you entered is correct and try again."); } } return (

Please fill the form with Tap credential

Tap Customer ID:
this.setState({id: e.target.value})} />

Note: You can fill just the Customer ID or bottom portion or both.

First name:
this.setState({fname: e.target.value})} /> Email:
this.setState({email: e.target.value})} />

Phone number:
this.setState({code: e.target.value})} /> this.setState({phone: e.target.value})} />

); } }); // export default Payment; function goSellConfig(amount, currency, nexRef, nexIdn, returnUrl, id, fname, email, code, phone) { goSell.config({ containerID: "goSellRoot", gateway: { publicKey: "pk_live_OHQUgMAmBfpnv1ol65Sty3xX", //"pk_live_OHQUgMAmBfpnv1ol65Sty3xX" prod // pk_test_Vlk842B1EA7tDN5QbrfGjYzh test language: "en", contactInfo: true, supportedCurrencies: "all", supportedPaymentMethods: "all", saveCardOption: false, customerCards: false, notifications: 'standard', callback: (response) => { // console.log('response', response); }, onClose: () => { // console.log("onClose Event"); }, backgroundImg: { url: 'imgURL', opacity: '0.5' }, labels: { cardNumber: "Card Number", expirationDate: "MM/YY", cvv: "CVV", cardHolder: "Name on Card", actionButton: "Pay" }, style: { base: { color: '#535353', lineHeight: '18px', fontFamily: 'sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: 'rgba(0, 0, 0, 0.26)', fontSize: '15px' } }, invalid: { color: 'red', iconColor: '#fa755a ' } } }, customer: { id: id, // cus_TS023920220316g1PX2202756 test first_name: fname, middle_name: "", last_name: "", email: email, phone: { country_code: code, number: phone } }, order: { amount: amount, currency: currency, shipping: null, taxes: null, }, transaction: { mode: 'charge', charge: { saveCard: false, threeDSecure: true, description: "Almashtal", statement_descriptor: "Almashtal Service", reference: { transaction: nexIdn, order: nexRef }, metadata: {"nexRef": nexRef, "nexIdn": nexIdn, "returnUrl": returnUrl}, receipt: { email: true, sms: true }, redirect: "https://almashtal.spaces.nexudus.com/pages/paymentstatus", post: null, } } }); }

Events